淺析WebSocket 原理

　　　　長恨此身非我有，何時忘卻營營。

簡介：先簡單瞭解下WebSocket 原理，日後的使用中再進一步深入研究~

一、什麼是WebSocket

WebSocket 是HTML5 開始提供的一種在單個TCP 連線上進行全雙工通訊的協議，其最大特點就是，伺服器可以主動向客戶端推送資訊，客戶端也可以主動向伺服器傳送資訊，屬於雙向平等對話。更深層次的解釋就是WebSocket 是應用層第七層上的一個應用層協議，它必須依賴 HTTP 協議進行一次握手 ，握手成功後，資料就直接從 TCP 通道傳輸，與 HTTP 無關了。也就是說WebSocket 分為握手和資料傳輸階段，即進行了HTTP握手 + 雙工的TCP連線，當然還有關閉連線。

二、WebSocket 應用場景

1、直播發彈幕、身份認證。

2、社交訂閱。

3、多玩家遊戲。

4、協通編輯/程式設計。

5、點選流資料。

6、股票基金報價。

7、體育實況更新。

8、多媒體聊天。

9、基於位置的應用。

10、線上教育等。

三、WebSocket 特點

  • 建立在 TCP 協議之上，伺服器端的實現比較容易。

  • 與 HTTP 協議有著良好的相容性。預設埠也是80和443，並且握手階段採用 HTTP 協議，因此握手時不容易遮蔽，能通過各種 HTTP 代理伺服器。

  • 資料格式比較輕量，效能開銷小，通訊高效。

  • 可以傳送文字，也可以傳送二進位制資料。

  • 沒有同源限制，客戶端可以與任意伺服器通訊。

  • 協議識別符號是ws（如果加密，則為wss），伺服器網址就是 URL。

四、WebSocket 協議內容

WebSocket 最新的協議是 13 RFC 6455。協議主要包括兩個部分，一個是握手的規則，另一個是資料傳輸的方式及載體格式。

WS連線生命週期

五、握手階段

因為 WebSocket 是基於 HTTP 協議的，它借用了 HTTP 協議來完成一部分握手。

所以，握手階段WebSocket 首先發起一個 HTTP 請求，在請求頭加上 Upgrade 欄位，該欄位用於改變 HTTP 協議版本或者是換用其他協議，把 Upgrade 的值設為 websocket ，即將它升級為 WebSocket 協議。

一個典型的 WebSocket 握手：

1 GET /chat HTTP/1.1

2 Host: server.example.com

3 Upgrade: websocket

4 Connection: Upgrade

5 Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==

6 Sec-WebSocket-Protocol: chat, superchat

7 Sec-WebSocket-Version: 13

8 Origin: http://example.com

熟悉 HTTP 的一眼就可以看出這段類似 HTTP 協議的握手請求中，多了Upgrade、Connection、Sec-WebSocket-Key、Sec-WebSocket-Protocol、Sec-WebSocket-Version 幾個屬性。

1 Upgrade: websocket

2 Connection: Upgrade

這幾個屬性就是 WebSocket 的核心了，Upgrade：websocket屬性通知 Apache 、 Nginx 等伺服器，此次發起的請求要用 WebSocket 協議，而不是http。

1 Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==

2 Sec-WebSocket-Protocol: chat, superchat

3 Sec-WebSocket-Version: 13

Sec-WebSocket-Key 欄位，它由客戶端生成併發給服務端，用於證明服務端接收到的是一個可受信的連線握手，可以幫助服務端排除自身接收到的由非 WebSocket 客戶端發起的連線，該值是一串隨機經過 base64 編碼的字串。即該欄位用於驗證伺服器端是否採用WebSocket 協議。

收到請求後，服務端做一次響應：

1 HTTP/1.1 101 Switching Protocols

2 Upgrade: websocket

3 Connection: Upgrade

4 Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=

5 Sec-WebSocket-Protocol: chat

響應裡面重要的是 Sec-WebSocket-Accept ，服務端通過從客戶端請求頭中讀取 Sec-WebSocket-Key 與一串全域性唯一的標識字串(俗稱魔串)“258EAFA5-E914-47DA- 95CA-C5AB0DC85B11”做拼接，生成長度為160位的 SHA-1 字串，然後進行 base64 編碼，作為 Sec-WebSocket-Accept 的值回傳給客戶端。

此時成功建立了WebSocket 連線，Upgrade：websocket 欄位也標誌著這裡開始就是 HTTP 最後負責的區域了，通知客戶端服務端已切換為WebSocket 協議。至此，HTTP 已經完成它所有工作了，接下來就是完全按照 WebSocket 協議進行了。

六、資料傳輸階段

Websocket 的資料傳輸是以frame 形式傳輸的，比如將一條訊息分為幾個frame，按照先後順序傳輸出去。這樣做會有幾個好處：

  • 1、大資料的傳輸可以分片傳輸，不用考慮到資料大小導致的長度標誌位不足夠的情況。
  • 2、和http 的chunk 一樣，可以邊生成資料邊傳遞訊息，極大提高了傳輸效率。

websocket傳輸協議圖

吃透WebSocket 傳輸協議圖請聽下回分解~

七、WebSocket 初體驗

後端使用SpringBoot，前端使用VUE，通過WebSocket 實現後端傳送訊息，前端接收到訊息後即刻播放聲音提示。

完整專案連結：https://www.cnblogs.com/taojietaoge/p/14980331.html

長恨此身非我有

　　　　　　　　何時忘卻營營