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應用場景

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

參考資料：

• Websocket 使用指南
• Comet：基于 HTTP 長連接配接的“伺服器推”技術
• Benefits of WebSocket
• WebSocket：5分鐘從入門到精通
• 《web性能優化權威指南》

原文位址：https://segmentfault.com/a/1190000016594700