一、是什麼 WebSocket，是一種網路傳輸協議，位於OSI模型的應用層。可在單個TCP連接上進行全雙工通信，能更好的節省伺服器資源和帶寬並達到實時通迅 客戶端和伺服器只需要完成一次握手，兩者之間就可以創建持久性的連接，併進行雙向數據傳輸 從上圖可見，websocket伺服器與客戶端通過握手連接， ...
一、是什麼
WebSocket，是一種網路傳輸協議，位於OSI模型的應用層。可在單個TCP連接上進行全雙工通信，能更好的節省伺服器資源和帶寬並達到實時通迅
客戶端和伺服器只需要完成一次握手，兩者之間就可以創建持久性的連接，併進行雙向數據傳輸
從上圖可見，websocket伺服器與客戶端通過握手連接，連接成功後，兩者都能主動的向對方發送或接受數據
而在websocket出現之前，開發實時web應用的方式為輪詢
不停地向伺服器發送 HTTP 請求，問有沒有數據，有數據的話伺服器就用響應報文回應。如果輪詢的頻率比較高，那麼就可以近似地實現“實時通信”的效果
輪詢的缺點也很明顯，反覆發送無效查詢請求耗費了大量的帶寬和 CPU資源
二、特點
全雙工
通信允許數據在兩個方向上同時傳輸，它在能力上相當於兩個單工通信方式的結合
例如指 A→B 的同時 B→A ，是瞬時同步的
二進位幀
採用了二進位幀結構，語法、語義與 HTTP 完全不相容，相比http/2，WebSocket更側重於“實時通信”，而HTTP/2 更側重於提高傳輸效率，所以兩者的幀結構也有很大的區別
不像 HTTP/2 那樣定義流，也就不存在多路復用、優先順序等特性
自身就是全雙工，也不需要伺服器推送
協議名
引入ws和wss分別代表明文和密文的websocket協議，且預設埠使用80或443，幾乎與http一致
ws://www.chrono.com ws://www.chrono.com:8080/srv wss://www.chrono.com:445/im?user_id=xxx
握手
WebSocket也要有一個握手過程，然後才能正式收發數據
客戶端發送數據格式如下：
GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Origin: http://example.com Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13
- Connection：必須設置Upgrade，表示客戶端希望連接升級
- Upgrade：必須設置Websocket，表示希望升級到Websocket協議
- Sec-WebSocket-Key：客戶端發送的一個 base64 編碼的密文，用於簡單的認證秘鑰。要求服務端必須返回一個對應加密的“Sec-WebSocket-Accept應答，否則客戶端會拋出錯誤，並關閉連接
- Sec-WebSocket-Version ：表示支持的Websocket版本
服務端返回的數據格式：
HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=Sec-WebSocket-Protocol: chat
- HTTP/1.1 101 Switching Protocols：表示服務端接受 WebSocket 協議的客戶端連接
- Sec-WebSocket-Accep：驗證客戶端請求報文，同樣也是為了防止誤連接。具體做法是把請求頭裡“Sec-WebSocket-Key”的值，加上一個專用的 UUID，再計算摘要
優點
- 較少的控制開銷：數據包頭部協議較小，不同於http每次請求需要攜帶完整的頭部
- 更強的實時性：相對於HTTP請求需要等待客戶端發起請求服務端才能響應，延遲明顯更少
- 保持創連接狀態：創建通信後，可省略狀態信息，不同於HTTP每次請求需要攜帶身份驗證
- 更好的二進位支持：定義了二進位幀，更好處理二進位內容
- 支持擴展：用戶可以擴展websocket協議、實現部分自定義的子協議
- 更好的壓縮效果：Websocket在適當的擴展支持下，可以沿用之前內容的上下文，在傳遞類似的數據時，可以顯著地提高壓縮率
二、應用場景
基於websocket的事實通信的特點，其存在的應用場景大概有：
- 彈幕
- 媒體聊天
- 協同編輯
- 基於位置的應用
- 體育實況更新
- 股票基金報價實時更新
參考文獻
- https://zh.wikipedia.org/wiki/WebSocket
- https://www.oschina.net/translate/9-killer-uses-for-websockets
- https://vue3js.cn/interview
如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。
