天天看點

淺談HTML5 WebSocket的機制

回顧上一章

websocket機制

websocket是一種雙向通信協定,在建立連接配接後,websocket伺服器和browser/client agent都能主動的向對方發送或接收資料,就像socket一樣;

websocket需要類似tcp的用戶端和伺服器端通過握手連接配接,連接配接成功後才能互相通信。

非websocket模式傳統 http 用戶端與伺服器的互動如下:

淺談HTML5 WebSocket的機制

使用 websocket 模式用戶端與伺服器的互動如下:

淺談HTML5 WebSocket的機制

根據上面兩張圖對比可以看出,相對于傳統的http每次請求-應答都需要用戶端與服務端建立連接配接的模式,websocket是類似socket的tcp長連接配接的通訊模式,一旦websocket連接配接建立後,後續資料都以幀序列的形式傳輸。在用戶端斷開websocket連接配接或server端斷掉連接配接前,不需要用戶端和服務端重新發起連接配接請求。在海量并發及用戶端與伺服器互動負載流量大的情況下,極大的節省了網絡帶寬資源的消耗,有明顯的性能優勢,且用戶端發送和接受消息是在同一個持久連接配接上發起,實時性優勢明顯。

websocket和http的封包

我們再來看看websocket通訊與傳統http的不同互動的封包:

在用戶端(浏覽器端js),建立websocket 執行個體化一個新的 websocket 用戶端對象,連接配接類似 ws://yourdomain:port/path 的服務端 websocket url,websocket 用戶端對象會自動解析并識别為 websocket 請求,進而連接配接服務端端口,執行雙方握手過程,用戶端發送資料格式類似:

淺談HTML5 WebSocket的機制

可以看到,用戶端發起的 websocket 連接配接封包類似傳統 http 封包,”upgrade:websocket”參數值表明這是websocket類型請求,“sec-websocket-key”是websocket用戶端發送的一個base64編碼的密文,要求服務端必須傳回一個對應加密的“sec-websocket-accept”應答,否則用戶端會抛出“error during websocket handshake”錯誤,并關閉連接配接。

服務端收到封包後傳回的資料格式類似:

淺談HTML5 WebSocket的機制

“sec-websocket-accept”的值是服務端采用與用戶端一緻的密鑰計算出來後傳回用戶端的,“http/1.1 101 switching protocols”表示服務端接受websocket協定的用戶端連接配接,經過這樣的請求-響應處理後,用戶端服務端的websocket連接配接握手成功, 後續就可以進行tcp通訊了。

歡迎大家關注我的部落格,關注我的微網誌,如有疑問,請加qq群:454796847、135430763 共同進步!

繼續閱讀