websocket
2011年技術文檔
http://www.ibm.com/developerworks/cn/web/1112_huangxa_websocket/index.html
瀏覽器端接口:
https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API
WebSockets.org站點:http://www.websockets.org/
認識websocket
http://www.html5rocks.com/en/tutorials/websockets/basics/
http://javascript.ruanyifeng.com/htmlapi/websocket.html
HTTP協議是一種無狀態協議,服務器端本身不具有識別客戶端的能力,必須借助外部機制,比如session和cookie,才能與特定客戶端保持 對話。這多多少少帶來一些不便,尤其在服務器端與客戶端需要持續交換數據的場合(比如網絡聊天),更是如此。為了解決這個問題,HTML5提出了瀏覽器的WebSocket API。
WebSocket的主要作用是,允許服務器端與客戶端進行全雙工(full-duplex)的通信。舉例來說,HTTP協議有點像發電子郵件,發 出后必須等待對方回信;WebSocket則是像打電話,服務器端和客戶端可以同時向對方發送數據,它們之間存着一條持續打開的數據通道。
WebSocket協議完全可以取代Ajax方法,用來向服務器端發送文本和二進制數據,而且還沒有“同域限制”。
nodejs Demo安裝
https://github.com/websockets/ws
來自
http://www.html5rocks.com/en/tutorials/websockets/basics/
Server Side Implementations
- Node.js
從 https://github.com/websockets/ws 下載以后, 解壓后到目標目錄, 執行
npm install --save ws
進行安裝。
遇到報錯 Refusing to install hapi as a dependency of itself:
http://stackoverflow.com/questions/27267707/npm-warn-install-refusing-to-install-hapi-as-a-dependency-of-itself
通過修改 package.json 中 name名稱解決。 例如 ws-test
到 example文件夾下, 運行node server.js結果報錯:Cannot find module 'xxx' 問題解決
通過如下方法解決:
http://blog.csdn.net/wmsjlihuan/article/details/19816389
使用npm install -g 'xxx' 之后仍然報
Cannot find module 'xxx' 錯誤,可以通過設置環境變量來解決;
export NODE_PATH=/usr/local/lib/node_modules/
echo $NODE_PATH
運行結果
fqs@fqs:/home/share/ws-master/ws-master/examples/serverstats$ node server.js
started client interval
stopping client interval
started client interval
stopping client interval
頁面不斷刷新數據,很快! 這些內容都是由后台間隔200ms推送到前台。
代碼如下:
server
var WebSocketServer = require('../../').Server , http = require('http') , express = require('express') , app = express.createServer(); app.use(express.static(__dirname + '/public')); app.listen(8080); var wss = new WebSocketServer({server: app}); wss.on('connection', function(ws) { var id = setInterval(function() { ws.send(JSON.stringify(process.memoryUsage()), function() { /* ignore errors */ }); }, 100); console.log('started client interval'); ws.on('close', function() { console.log('stopping client interval'); clearInterval(id); }); });
client
<!DOCTYPE html> <html> <head> <style> body { font-family: Tahoma, Geneva, sans-serif; } div { display: inline; } </style> <script> function updateStats(memuse) { document.getElementById('rss').innerHTML = memuse.rss; document.getElementById('heapTotal').innerHTML = memuse.heapTotal; document.getElementById('heapUsed').innerHTML = memuse.heapUsed; } var host = window.document.location.host.replace(/:.*/, ''); var ws = new WebSocket('ws://' + host + ':8080'); ws.onmessage = function (event) { updateStats(JSON.parse(event.data)); }; </script> </head> <body> <strong>Server Stats</strong><br> RSS: <div id='rss'></div><br> Heap total: <div id='heapTotal'></div><br> Heap used: <div id='heapUsed'></div><br> </body> </html>
評價
websocket屬於新事物, 瀏覽器支持度有差異。
如果考慮老舊瀏覽器,可以使用開源commet框架, pushlet:
http://www.ibm.com/developerworks/cn/web/wa-lo-comet/index.html
對於只需要服務器推送消息的情況, 可以使用SSE
http://server.ctocio.com.cn/181/13158181.shtml
http://www.html5rocks.com/en/tutorials/eventsource/basics/
