一篇吃透WebSocket：概念、原理、易錯常識、動手實踐

宅宅很神

一篇吃透WebSocket：概念、原理、易錯常識、動手實踐

作者：知乎 Jack Jiang
原始網址：https://bit.ly/2YIv6Va



1、引言
本文將從基本概念、技術原理、常見易錯常識、動手實踐等多個方面入手，萬字長文，帶你一起全方位探索 WebSocket 技術。

閱讀完本文，你將瞭解以下內容：

1）瞭解 WebSocket 的誕生背景、WebSocket 是什麼及它的優點；
2）瞭解 WebSocket 含有哪些 API 及如何使用 WebSocket API 發送普通文字和二進制數據；
3）瞭解 WebSocket 的握手協議和數據幀格式、掩碼演算法等相關知識；
4）瞭解 WebSocket 與http、長輪詢、socket等的關係，理清常識性的理解錯誤；
5）瞭解如何實現一個支援發送普通文字的 WebSocket 伺服器。


2、關於作者
作者網名：阿寶哥
個人部落格：http://www.semlinker.com/
作者Github：https://github.com/semlinker/

3、什麼是 WebSocket
3.1 WebSocket 誕生背景
早期，很多網站爲了實現推送技術，所用的技術都是輪詢（也叫短輪詢）。輪詢是指由瀏覽器每隔一段時間向伺服器發出 HTTP 請求，然後伺服器返回最新的數據給客戶端。

常見的輪詢方式分為輪詢與長輪詢，它們的區別如下圖所示：




爲了更加直觀感受輪詢與長輪詢之間的區別，我們來看一下具體的程式碼：



這種傳統的模式帶來很明顯的缺點，即瀏覽器需要不斷的向伺服器發出請求，然而 HTTP 請求與響應可能會包含較長的頭部，其中真正有效的數據可能只是很小的一部分，所以這樣會消耗很多頻寬資源。

PS：關於短輪詢、長輪詢技術的前世今身，可以詳細讀這兩篇：《新手入門貼：史上最全Web端即時通訊技術原理詳解》、《Web端即時通訊技術盤點：短輪詢、Comet、Websocket、SSE》。

比較新的輪詢技術是 Comet。這種技術雖然可以實現雙向通訊，但仍然需要反覆發出請求。而且在 Comet 中普遍採用的 HTTP 長連線也會消耗伺服器資源。

在這種情況下，HTML5 定義了 WebSocket 協議，能更好的節省伺服器資源和頻寬，並且能夠更實時地進行通訊。

Websocket 使用 ws 或 wss 的統一資源標誌符（URI），其中 wss 表示使用了 TLS 的 Websocket。

如：

ws://http://echo.websocket.org
wss://http://echo.websocket.org
WebSocket 與 HTTP 和 HTTPS 使用相同的 TCP 埠，可以繞過大多數防火墻的限制。

預設情況下：

1）WebSocket 協議使用 80 埠；
2）若執行在 TLS 之上時，預設使用 443 埠。
3.2 WebSocket 簡介
WebSocket 是一種網路傳輸協議，可在單個 TCP 連線上進行全雙工通訊，位於 OSI 模型的應用層。WebSocket 協議在 2011 年由 IETF 標準化為 RFC 6455，後由 RFC 7936 補充規範。

WebSocket 使得客戶端和伺服器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和伺服器只需要完成一次握手，兩者之間就可以建立永續性的連線，並進行雙向數據傳輸。

介紹完輪詢和 WebSocket 的相關內容之後，接下來用一張圖看一下 XHR Polling（短輪詢） 與 WebSocket 之間的區別。

XHR Polling與 WebSocket 之間的區別如下圖所示：



3.3 WebSocket 優點
普遍認為，WebSocket的優點有如下幾點：

1）較少的控制開銷：在連線建立后，伺服器和客戶端之間交換數據時，用於協議控制的數據包頭部相對較小；
2）更強的實時性：由於協議是全雙工的，所以伺服器可以隨時主動給客戶端下發數據。相對於 HTTP 請求需要等待客戶端發起請求服務端才能響應，延遲明顯更少；
3）保持連線狀態：與 HTTP 不同的是，WebSocket 需要先建立連線，這就使得其成為一種有狀態的協議，之後通訊時可以省略部分狀態資訊；
4）更好的二進制支援：WebSocket 定義了二進制幀，相對 HTTP，可以更輕鬆地處理二進制內容；
5）可以支援擴充套件：WebSocket 定義了擴充套件，使用者可以擴充套件協議、實現部分自定義的子協議。
由於 WebSocket 擁有上述的優點，所以它被廣泛地應用在即時通訊/IM、實時音視訊、線上教育和遊戲等領域。

對於前端開發者來說，要想使用 WebSocket 提供的強大能力，就必須先掌握 WebSocket API，下面帶大家一起來認識一下 WebSocket API。

PS：如果你想要更淺顯的WebSocket入門教程，可以先讀這篇《新手快速入門：WebSocket簡明教程》后，再回來繼續學習。

繼續閱讀：https://bit.ly/2YIv6Va