Http Header 怎么判斷協議是不是 Websocket
本文轉載自微信公眾號「三分鐘學前端」，作者sisterAn 。轉載本文請聯系三分鐘學前端公眾號。
引言
首先，解答本題， http 通過判斷 header 中是否包含 Connection: Upgrade 與 Upgrade: websocket 來判斷當前協議是否要升級到 websocket ，下面我們了解一下 WebSocket 協議與由來
WebSocket 由來
WebSocket 之前，如果需要在客戶端和服務之間雙向通信，需要通過 HTTP 輪詢來實現， HTTP 輪詢分為輪詢與長輪詢：
其中，輪詢是指瀏覽器通過 JavaScript 啟動一個定時器，然后以固定的間隔給服務器發請求，詢問服務器有沒有新消息，缺點：
- 實時性不夠
- 頻繁的請求會給服務器帶來極大的壓力
長輪詢是指瀏覽器發送一個請求時，服務器先拖一段時間，等到有消息了再回復。這個機制暫時地解決了實時性問題，但是它帶來了新的問題：
- 以多線程模式運行的服務器會讓大部分線程大部分時間都處于掛起狀態，極大地浪費服務器資源
- 一個HTTP連接在長時間沒有數據傳輸的情況下，鏈路上的任何一個網關都可能關閉這個連接，而網關是我們不可控的
因此，HTML5 新增了 WebSocket 協議，能夠在瀏覽器和服務器之間建立一個不受限的雙向通信的通道。
為什么WebSocket連接可以實現全雙工通信而HTTP連接不行呢?
實際上HTTP協議是建立在TCP協議之上的，TCP協議本身就實現了全雙工通信，但是HTTP協議的請求-應答機制限制了全雙工通信。WebSocket連接建立以后，其實只是簡單規定了一下：接下來，咱們通信就不使用HTTP協議了，直接互相發數據吧。
WebSocket 的優點：
- 較少的控制開銷：在連接創建后，服務器和客戶端之間交換數據時，用于協議控制的數據包頭部相對較小
- 更強的實時性：由于協議是全雙工的，所以服務器可以隨時主動給客戶端下發數據
- 保持連接狀態：與 HTTP 不同的是，WebSocket 需要先創建連接，這就使得其成為一種有狀態的協議，之后通信時可以省略部分狀態信息
- 更好的二進制支持：WebSocket 定義了二進制幀，相對 HTTP，可以更輕松地處理二進制內容
可以支持擴展：WebSocket 定義了擴展，用戶可以擴展協議、實現部分自定義的子協議
WebSocket 協議
WebSocket 使用 ws 或 wss 的統一資源標志符(URI)，其中 wss 表示使用了 TLS 的 WebSocket。
ws:// 數據不是加密的，對于任何中間人來說其數據都是可見的。
wss:// 是基于 TLS 的 WebSocket，類似于 HTTPS 是基于 TLS 的 HTTP)，傳輸安全層在發送方對數據進行了加密，在接收方進行解密
http 通過判斷 header 中是否包含 Connection: Upgrade 與 Upgrade: websocket 來判斷當前是否需要升級到 websocket 協議，除此之外，還有其它 header：
- Sec-WebSocket-Key ：瀏覽器隨機生成的安全密鑰
- Sec-WebSocket-Version ：WebSocket 協議版本
- Sec-WebSocket-Extensions ：用于協商本次連接要使用的 WebSocket 擴展
- Sec-WebSocket-Protocol ：協議
當服務器同意進行 WebSocket 連接時，返回響應碼 101
測試地址：https://www.websocket.org/echo.html
一旦 socket 被建立，我們就應該監聽 socket 上的事件。一共有 4 個事件：
- open ：連接已建立
- message ：接收到數據
- error ：WebSocket 錯誤
- close ：連接已關閉
如果我們想發送消息，可以使用 socket.send(data)
- let socket = new WebSocket("wss://echo.websocket.org")
- socket.onopen = function(e) {
- console.log("[open] Connection established")
- // 發送消息
- socket.send("My name is an")
- }
- socket.onmessage = function(event) {
- console.log(`[message] Data received from server: ${event.data}`)
- }
- socket.onclose = function(event) {
- // ...
- }
- socket.onerror = function(error) {
- console.log(`[error] ${error.message}`)
- }
總結
WebSocket 使用 ws 或 wss 的統一資源標志符，通過判斷 header 中是否包含 Connection: Upgrade 與 Upgrade: websocket 來判斷當前是否需要升級到 websocket 協議，除此之外，它還包含 Sec-WebSocket-Key 、 Sec-WebSocket-Version 等header，當服務器同意 WebSocket 連接時，返回響應碼 101 ，它的 API 很簡單。
方法：
- socket.send(data)
- socket.close([code], [reason])
事件：
- open
- message
- error
- close
參考：
WebSocket：https://www.liaoxuefeng.com/wiki/1022910821149312/1103303693824096
WebSocket：https://zh.javascript.info/websocket
你不知道的 WebSocket：https://juejin.cn/post/6854573221241421838
來自：https://github.com/Advanced-Frontend/Daily-Interview-Question
