淺淺的聊一下 WebSocket

第一次看到 ws:// 和 wss:// 時候，感覺好高級啊，還有這種協議。

Websocket 歷史

WebSocket是在2008年6月誕生的1。經由IEFT標準化后，2009年chrome 4第一個提供了該標準支持，并默認啟用。于2011年由IEFT標準化為RFC 6455。

現在的瀏覽器均已支持該標準。

Websocket 出現的背景

思考一下我們經常遇到的一種需求場景，要求在某個網頁下，網頁的內容可以實時更新。

這種情況下，最大眾化的方式就是輪詢接口了，即通過定時器，定時請求接口，獲取到最新的信息后，將內容更新到頁面中，如下：

setInterval(() => {
  queryAPI().then(() => update());
}, 1000);

但是我們知道，這種定時器的延時并不是很精確，而且加上接口的請求時延，實際時間可能不止代碼中所預先設定的時間長度，所以這種實時更新是偽實時更新。

除此之外，還有一點可能會經常遇到，即，我們更新信息并總是要更新整個頁面上所有可以看到的信息，我們更關注一些經常變化的信息，比如狀態，狀態的信息可能大小只有幾個字節，但是我們輪詢接口拿到的信息卻是這個頁面的所有信息，大小自然不只幾個字節，但是除狀態以外的信息都可以視作是冗余的。

我們實際只需要一個字段，而且即使后端提供只返回狀態的接口，但實際在一個請求中還要計算ip報文頭的大小，依舊是很占用帶寬的。

輪詢這種解決方案目前依舊是非常流行，最新的輪詢技術是Comet，這種技術雖然可以實現雙向通信，但仍然需要反復發出請求。而且在Comet中普遍采用的HTTP長連接也會消耗服務器資源2。

Websocket通信模式

了解網絡的都知道，數據傳輸分為單工、半雙工、全雙工三種工作模式。

Websocket是基于TCP的，使用全雙工通信模式的協議，他使得客戶端和服務端之間的數據交換變得更簡單。而且，作為一個工作在全雙工模式下的協議，服務端可以在建立連接后隨時向客戶端推送消息。

由于協議是基于TCP的，所以websocket也是需要建連和關閉連接的，但要注意的是，一般在websocket的握手通常指的是：客戶端發送一個http請求到服務端，服務端響應后標志這個鏈接建立起來。而不是指tcp的三次握手。

另外在RFC 6455 1.1節「Background」中介紹：WebSocket通過HTTP端口的80和443進行工作，并支持HTTP代理和中介。

原文：it is designed to work over HTTP ports 80 and 443 as well as to support HTTP proxies and intermediaries

為了實現和HTTP的兼容性，WebSocket握手使用HTTP的Upgrade頭將HTTP協議轉換成Websocket協議。

作為一種協議，websocket自然也是有其用于協議控制的頭部信息的，但是相對于HTTP請求每次都要帶上完整的頭部信息，傳輸數據時，websocket數據包的頭部信息就相對較小，從而降低了控制開銷。

相對于前文所提到的輪詢接口，websocket可以做到服務端直接向客戶端傳輸數據，省去了客戶端發起請求的步驟，同時沒有間隔時間，只要服務端內容變化，就可以告知客戶端，實時性上有了很大的提高。

Websocket 使用

WebSocket使用十分簡單，只需要關注以下API：

WebSocket(url[, protocol]) 構造函數

使用 new WebSocket(xxx) 創建對象時，會同時建立與服務器的連接

WebSocket.onopen , WebSocket.onclose

分別對應連接成功、失敗時的回調，這里可以做一些初始化、銷毀的工作

WebSocket.onmessage

實際處理數據是用的該函數

在數據處理完成后，需要移除回調函數，不然可能會影響到其他地方的處理

const ws = new WebSocket('ws://sdf.com');
function handleData(evt) {
  // handle server data.
}
ws.onmessage = handleData;
ws.addEventListener('message', handleData);

WebSocket.send

主動向服務端發送消息，可以通過send和onmessage進行數據互動，如：

ws.send('list');
?
ws.onmessage = evt => {
  const data = evt.data;
  if (data === 'hello') {
    console.log('world');
    return ;
  }
  try {
    const obj = JSON.parse(data);
    switch (obj.type) {
      case 'list':
        // do something.
    }
  } catch (ex) {}
}