WebSocket
WebSocket
是一種
支援雙向通訊
網路通訊協議。
意思就是伺服器可以
主動向客戶端推送資訊
，客戶端也可以
主動向伺服器傳送資訊
屬於伺服器推送技術的一種。
特點：
（1）建立在
TCP 協議
之上，伺服器端的實現比較容易。
（2）與
HTTP 協議
有著良好的相容性。預設埠也是80和443，並且
握手階段
採用 HTTP 協議，因此握手時不容易遮蔽，
能透過各種 HTTP 代理伺服器
。
（3）資料格式比較輕量，效能開銷小，通訊高效。
（4）可以傳送
文字
，也可以傳送
二進位制資料
（
blob
物件或
Arraybuffer
物件）
（5）收到的資料型別 可以使用binaryType 指定， 顯式指定收到的二進位制資料型別
（6）沒有
同源限制
，客戶端可以與任意伺服器通訊。
（7）協議識別符號是
ws（握手http）
（如果加密，則為
wss（tcp +TLS）
），伺服器網址就是 URL。
WebSocket物件
WebSocket物件
提供了用於
建立和管理WebSocket 連線
，以及可以透過該連線
傳送和接收資料的 API
。
使用
WebSocket（）
建構函式來構造一個
WebSocket
。
為什麼需要websocket
Hypertext Transfer Protocol （HTTP） 協議
一種
無狀態
的、
應用層
的、以
請求/應答方式執行
的協議，它使用
可擴充套件的語義
和
自描述訊息格式
，與
基於網路
的
超文字資訊系統
靈活的互動。
因為http 通訊只能由客戶端發起，伺服器返回查詢結果，HTTP 協議做不到伺服器主動向客戶端推送資訊，
伺服器有連續的狀態變化，客戶端要獲知就非常麻煩。
我們只能使用
輪詢
：每隔一段時候，就發出一個詢問，瞭解伺服器有沒有新的資訊。最典型的場景就是聊天室。
輪詢的效率低，非常浪費資源（因為必須不停連線，或者
HTTP 連線始終開啟
）；
Chrome 請求列表：分析 WebSocket
過濾器（過濾資源xhr js ws css ws等）：
按照型別：ws
屬性過濾：is：running
表格列 Frames
Data： 訊息負載。如果訊息為純文字，直接顯示。二進位制操作嗎顯示操作碼名稱和程式碼（Continuation Frame、 Binanry Frame、 Connection Close Frame、 Ping Frame或者Pong Frame）
Length： 訊息負載的長度 以位元組為單位
Time： 收到或者傳送的時間。
訊息顏色
傳送到伺服器的文字訊息為淺綠色
接收到的文字訊息為白色
WebSocket 操作碼 為淺黃色
錯誤為淺紅色
WbeSocket 的成本 對比http
1、實時性與可伸縮性。犧牲了簡單性。
2、網路效率與無狀態：請求1基於請求2 犧牲了簡單性與可見性
websocket 的心跳保持 對比http
（http 長連線只能基於簡單的超時（常見為65s））
websocket 連結基於
ping/pong 心跳機制維持
設計哲學：在web約束下暴露tcp 給上層
元資料
http 協議頭部會存放元資料。
websocket 上傳輸的應用層存放元資料
基於幀：不是基於位元組流（http， tcp）
每一幀要麼存放
字元資料
，要麼承載
二進位制
資料
基於瀏覽器的同源策略模型個（非瀏覽器無效）
可以使用Access-Control-Allow-Origin 等頭部
基於
URI
、
子協議
支援
同主機``同埠
上的多個服務
幀格式示意圖
ABNF 描述的幀格式
ws-frame = frame-fin ； 1 bit in length
frame-rsv1 ； 1 bit in length
frame-rsv2 ； 1 bit in length
frame-rsv3 ； 1 bit in length
frame-opcode ； 4 bits in length
frame-masked ； 1 bit in length
frame-payload-length ； 3 種長度
［ frame-masking-key ］ ； 32 bits in length
frame-payload-data ； n*8 bits in ； length， where ； n >= 0
複製程式碼
紅色： 2 位元組必然存在的幀首部
資料幀格式：Rsv 保留值
RSV1/RSV2/RSV3：預設為 0，僅當使用 extension 擴充套件時，由擴充套件決定其值
資料幀格式：幀型別
持續幀
0： 繼續前一幀
非控制幀
1：文字幀（utf-8）
2：二進位制幀
3-7： 為非控制幀保留
控制幀 8： 關閉幀 9： 心跳幀ping A： 心跳幀pong B-F：控制幀保留
URI 格式
1、ws-uri：
ws：//［host］［：port］［path］［？query］
埠port預設 80
2、wss-uri：
wss：//［host］［：port］［path］［？query］
埠port 預設443
客戶端提供資訊
host、port 主機埠
schema： 是否基於SSL
訪問的資源：uri
握手隨機數：Sec-WebSocket-Key
選擇的子協議：Sec-WebSocket-Protocol
擴充套件協議：Sec-WebSocket-Extensions
CORS：Origin
如何證明握手被伺服器接受？預防意外
請求中的 Sec-WebSocket-Key 隨機數
Sec-WebSocket-Key： A1EEou7Nnq6+BBZoAZqWlg== 響應中的 Sec-WebSocket-Accept 證明值
GUID（RFC4122）：258EAFA5-E914-47DA-95CA-C5AB0DC85B11
值構造規則：BASE64（SHA1（Sec-WebSocket-KeyGUID））
拼接值：A1EEou7Nnq6+BBZoAZqWlg==258EAFA5-E914-47DA-95CA-C5AB0DC85B11
SHA1 值：713f15ece2218612fcadb1598281a35380d1790f
BASE 64 值：cT8V7OIhhhL8rbFZgoGjU4DReQ8=
最終頭部：Sec-WebSocket-Accept： cT8V7OIhhhL8rbFZgoGjU4DReQ8=
文章分類
轉自
：https：//juejin。cn/post/6989539483695710215