說說對WebSocket的理解？應用場景？

林恒發表於2024-04-08
Web

一、是什麼

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

如果對您有所幫助，歡迎您點個關注，我會定時更新技術文件，大家一起討論學習，一起進步。

說說對WebSocket的理解？應用場景？

相關文章