[[402681]]

本文轉(zhuǎn)載自微信公眾號「JS每日一題」，作者灰灰。轉(zhuǎn)載本文請聯(lián)系JS每日一題公眾號。

 一、是什么

WebSocket，是一種網(wǎng)絡傳輸協(xié)議，位于OSI模型的應用層。可在單個TCP連接上進行全雙工通信，能更好的節(jié)省服務器資源和帶寬并達到實時通迅

客戶端和服務器只需要完成一次握手，兩者之間就可以創(chuàng)建持久性的連接，并進行雙向數(shù)據(jù)傳輸

圖片

從上圖可見，websocket服務器與客戶端通過握手連接，連接成功后，兩者都能主動的向?qū)Ψ桨l(fā)送或接受數(shù)據(jù)

而在websocket出現(xiàn)之前，開發(fā)實時web應用的方式為輪詢

不停地向服務器發(fā)送 HTTP 請求，問有沒有數(shù)據(jù)，有數(shù)據(jù)的話服務器就用響應報文回應。如果輪詢的頻率比較高，那么就可以近似地實現(xiàn)“實時通信”的效果

輪詢的缺點也很明顯，反復發(fā)送無效查詢請求耗費了大量的帶寬和 CPU資源

二、特點

全雙工

通信允許數(shù)據(jù)在兩個方向上同時傳輸，它在能力上相當于兩個單工通信方式的結(jié)合

例如指 A→B 的同時 B→A ，是瞬時同步的

二進制幀

采用了二進制幀結(jié)構(gòu)，語法、語義與 HTTP 完全不兼容，相比http/2，WebSocket更側(cè)重于“實時通信”，而HTTP/2 更側(cè)重于提高傳輸效率，所以兩者的幀結(jié)構(gòu)也有很大的區(qū)別

不像 HTTP/2 那樣定義流，也就不存在多路復用、優(yōu)先級等特性

自身就是全雙工，也不需要服務器推送

協(xié)議名

引入ws和wss分別代表明文和密文的websocket協(xié)議，且默認端口使用80或443，幾乎與http一致

ws://www.chrono.com

ws://www.chrono.com:8080/srv

wss://www.chrono.com:445/im?user_id=xxx

握手

WebSocket也要有一個握手過程，然后才能正式收發(fā)數(shù)據(jù)

客戶端發(fā)送數(shù)據(jù)格式如下：

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協(xié)議

Sec-WebSocket-Key：客戶端發(fā)送的一個 base64 編碼的密文，用于簡單的認證秘鑰。要求服務端必須返回一個對應加密的“Sec-WebSocket-Accept應答，否則客戶端會拋出錯誤，并關閉連接

Sec-WebSocket-Version ：表示支持的Websocket版本

服務端返回的數(shù)據(jù)格式：

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 協(xié)議的客戶端連接

Sec-WebSocket-Accep：驗證客戶端請求報文，同樣也是為了防止誤連接。具體做法是把請求頭里“Sec-WebSocket-Key”的值，加上一個專用的 UUID，再計算摘要

優(yōu)點

較少的控制開銷：數(shù)據(jù)包頭部協(xié)議較小，不同于http每次請求需要攜帶完整的頭部

更強的實時性：相對于HTTP請求需要等待客戶端發(fā)起請求服務端才能響應，延遲明顯更少

保持創(chuàng)連接狀態(tài)：創(chuàng)建通信后，可省略狀態(tài)信息，不同于HTTP每次請求需要攜帶身份驗證

更好的二進制支持：定義了二進制幀，更好處理二進制內(nèi)容

支持擴展：用戶可以擴展websocket協(xié)議、實現(xiàn)部分自定義的子協(xié)議

更好的壓縮效果：Websocket在適當?shù)臄U展支持下，可以沿用之前內(nèi)容的上下文，在傳遞類似的數(shù)據(jù)時，可以顯著地提高壓縮率

二、應用場景

基于websocket的事實通信的特點，其存在的應用場景大概有：

彈幕

媒體聊天

協(xié)同編輯

基于位置的應用

體育實況更新

股票基金報價實時更新

參考文獻

https://zh.wikipedia.org/wiki/WebSocket

https://www.oschina.net/translate/9-killer-uses-for-websockets

https://vue3js.cn/interview