webSocket

webSocket是什麼

webSocket是HTML5新出的一種協議，底層是基於TCP/IP協議的。跟http沒有關係，只是複用了http握手通道，用來升級協議。

webSocket的做用

輪詢：客戶端以必定的時間間隔向服務端發出請求，以頻繁請求的方式來保持客戶端和服務器端的同步。缺點：

• 瀏覽器須要不斷的向服務器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數據可能只是很小的一部分，顯然這樣會浪費不少的帶寬等資源。

長輪詢：瀏覽器向服務器發送請求，服務器將請求保持打開一段時間。若是在該時間段內收到通知，則將包含該消息的響應發送到客戶端。若是在設定的時間段內未收到通知，則服務器發送響應以終止打開的請求。缺點：

• 當具備較高的消息量時，長輪詢不會提供比傳統輪詢更大的性能改進
• 服務器端會阻塞請求直到有數據傳遞或超時才返回

使用webSocket瀏覽器和服務器只須要完成一次握手，二者之間就直接能夠建立持久性的鏈接，並進行雙向數據傳輸。
優勢：

• 能更好的節省服務器資源和帶寬
• 支持雙向通訊，實時性更強
• 能夠發送文本，也能夠發送二進制數據

webSocket的使用

服務端：

var app = require('express')();
var WebSocket = require('ws');
var wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
    ws.on('message', function incoming(message) {
        console.log(message);
    });
    ws.send('the content from server');
});
app.listen(3000,() => {
    console.log('you are listening port 3000');
});

客戶端：

<script>
    var ws = new WebSocket('ws://localhost:8080');
    ws.onopen = function () {
        ws.send('the request from client');
    };
    ws.onmessage = function (e) {
        console.log('from server: ' + e.data);
    };
</script>

webSocket應用場景

社交聊天、彈幕、多玩家遊戲、協同編輯、股票基金實時報價、體育實況更新、視頻會議/聊天、基於位置的應用、在線教育、智能家居等須要高實時的場景

參考資料：

• Comet：基於 HTTP 長鏈接的「服務器推」技術
• Benefits of WebSocket
• WebSocket：5分鐘從入門到精通
• 《web性能優化權威指南》