HTML5之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');
});

客戶端：

    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);
    };

webSocket應用場景

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

參考資料：WebSocket：5分鐘從入門到精通