WebSocket詳解

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 協議。
其接口簡單容易理解，參考官方文檔