WebSocket詳解

因為 http 協定是單向的，之前如果伺服器端有連續的變化需要通知用戶端，隻能通過用戶端進行輪詢（或者 long poll），但是輪詢非常浪費資源，工程師們就發明了WebSocket。2011年成為國際标準，目前所有浏覽器都已經支援了。

WebSocket 協定是基于TCP的一種新的網絡協定。它實作了浏覽器與伺服器全雙工(full-duplex)通信——允許伺服器主動發送資訊給用戶端。這是百度百科的定義，非常容易了解。服務端主動推送消息到用戶端解決了一大痛點，也是使用WebSocket的最大原因。

在 WebSocket API，浏覽器和伺服器隻需要做一個握手的動作，然後，浏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。

特點

1. 建立在TCP協定之上，伺服器端容易實作。
2. 與 HTTP 相容良好，握手階段采用 HTTP 協定。
3. 性能開銷小，通信高效。
4. 可發送文本或二進制資料。
5. 沒有同源限制。

優勢

一句話就是：持久化連結

相比于輪詢和 long poll，WebSocket 帶來的性能開銷優勢就是因為持久化連結。

簡單說下輪詢和 long poll，輪詢就是每隔一段時間就請求，每次請求無論資料是否更新都要占據背景服務的資源，非常浪費，需要背景服務有很快的處理速度，long poll 就是發送請求後，直到伺服器更新了才傳回更新的資訊，也很浪費，需要背景服務很好的處理高并發的能力。

對比一下，每條 http 請求需要經過 Nginx 轉發到特定的背景服務，背景服務處理請求，而且因為是無狀态的，每次都要解析頭資訊，搞的背景服務也很煩。而 WebSocket 與 Nginx 建立持久化連結後，背景服務與用戶端通信變得非常高效。Nginx 能力很強，保持這種持久化連結小菜一碟。

使用

示例：

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');
//
// Connection opened
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});
//
// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server', event.data);
});           

詳細 API 見

MDN文檔

詳細使用見

位址

Socket.IO

了解 WebSocket 的時候很容易接觸到 Socket.IO，兩者關系：Socket.IO 是 WebSocket 在 node.js 和用戶端的一種實作，這麼說也不準确，因為他會在無法使用 Websocket 的時候采用其他代替方案實作類似持久連結。

這樣描述應該跟準确：Socket.IO 是建立 node.js服務端與用戶端之間持久連結的一個架構，會優先采用 WebSocket 協定。

其接口簡單容易了解，參考

官方文檔