在HTML5 的早期開發(fā)過程中，由于意識(shí)到現(xiàn)有的 HTTP 協(xié)議在實(shí)時(shí)通信方面的不足，開發(fā)者開始探索能夠在 Web 環(huán)境下實(shí)現(xiàn)雙向?qū)崟r(shí)通信的新的通信協(xié)議，提出了 WebSocket 協(xié)議的概念。

一、什么是 WebSocket？

WebSocket 是一種在單個(gè) TCP 連接上進(jìn)行全雙工通信的協(xié)議。與 HTTP 協(xié)議不同的是，WebSocket 允許服務(wù)器和客戶端在連接建立后能夠在不需要重新請(qǐng)求的情況下，相互發(fā)送數(shù)據(jù)。即瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接， 并進(jìn)行雙向數(shù)據(jù)傳輸。這個(gè)特性使得 WebSocket 特別適合于需要實(shí)時(shí)數(shù)據(jù)交換的應(yīng)用場(chǎng)景。

二、WebSocket 的使用場(chǎng)景

即時(shí)聊天應(yīng)用、多人在線游戲、股票行情及天氣預(yù)報(bào)等實(shí)時(shí)數(shù)據(jù)更新、在線白板工具、協(xié)同開發(fā)平臺(tái)、在線協(xié)同繪圖工具、設(shè)計(jì)協(xié)作平臺(tái)等

三、簡(jiǎn)要介紹WebSocket 的工作原理

1. 握手過程

   WebSocket 連接的建立始于客戶端的 HTTP 請(qǐng)求。服務(wù)器接收到請(qǐng)求后，會(huì)進(jìn)行確認(rèn) 并切換為 WebSocket 協(xié)議，從而建立連接。
   握手成功后，HTTP 連接切換為 WebSocket 連接，此時(shí)客戶端和服務(wù)器之間可以進(jìn)行全雙工通信。

2. 數(shù)據(jù)傳輸

   一旦 WebSocket 連接建立，客戶端和服務(wù)器之間就可以進(jìn)行雙向的數(shù)據(jù)傳輸。

3. 連接關(guān)閉

   WebSocket 連接可以由客戶端或服務(wù)器任意一方發(fā)起關(guān)閉。包括以下步驟：

• 發(fā)送關(guān)閉幀：一方發(fā)送一個(gè)關(guān)閉幀，表明希望關(guān)閉連接。
• 確認(rèn)關(guān)閉請(qǐng)求：接收方回應(yīng)一個(gè)關(guān)閉幀，確認(rèn)關(guān)閉請(qǐng)求。
• 完成關(guān)閉：在雙方都發(fā)送關(guān)閉幀后，連接正式關(guān)閉?？蛻舳撕头?wù)器隨后釋放相關(guān)資源。

四、WebSocket 的連接建立過程

1. 客戶端發(fā)送 WebSocket 握手請(qǐng)求，請(qǐng)求頭包含 Upgrade 和 Connection 字段，指定協(xié)議升級(jí)和建立連接。
2. 服務(wù)器收到握手請(qǐng)求后，驗(yàn)證請(qǐng)求頭的字段，并返回握手響應(yīng)，響應(yīng)頭包含 Upgrade 和 Connection 字段，以及一個(gè)隨機(jī)的 Sec-WebSocket-Key 字段。
3. 客戶端收到握手響應(yīng)后，驗(yàn)證響應(yīng)頭的字段，并生成一個(gè) Sec-WebSocket-Accept 值進(jìn)行驗(yàn)證。
4. 驗(yàn)證通過后，WebSocket 連接建立成功，客戶端和服務(wù)器可以開始進(jìn)行實(shí)時(shí)通信。

五、WebSocket 在前端的實(shí)現(xiàn)

1. 創(chuàng)建 WebSocket 連接

使用 WebSocket 構(gòu)造函數(shù)并傳入服務(wù)器的 URL。URL 通常以 ws:// 或 wss://（用于安全連接）開頭。

// 創(chuàng)建 WebSocket 連接
const socket = new WebSocket('wss://example.com/socket');

2. 處理 WebSocket 事件

WebSocket 對(duì)象提供了幾個(gè)事件處理器，可以通過這些處理器來處理連接的各種狀態(tài)和數(shù)據(jù)傳輸。

• onopen：連接成功打開時(shí)觸發(fā)。
• onmessage：接收到消息時(shí)觸發(fā)。
• onerror：連接發(fā)生錯(cuò)誤時(shí)觸發(fā)。
• onclose：連接關(guān)閉時(shí)觸發(fā)。

// 創(chuàng)建 WebSocket 連接
const socket = new WebSocket('wss://localhost:8080');// 連接成功打開時(shí)的處理
socket.onopen = function(event) {console.log('WebSocket 連接已打開');// 發(fā)送一條消息到服務(wù)器socket.send('halo啊哈哈哈哈哈哈(*′▽｀)ノノ!');
};// 接收到消息時(shí)的處理
socket.onmessage = function(event) {// 處理接收到的消息const message = event.data;console.log('接收到消息咯O(∩_∩)O:', message);
};// 連接關(guān)閉時(shí)的處理
socket.onclose = function(event) {console.log('啊喔…… WebSocket連接已關(guān)閉(｀?ω?′)');
};// 連接發(fā)生錯(cuò)誤時(shí)的處理
socket.onerror = function(error) {console.error('WebSocket發(fā)生錯(cuò)誤啦:', error);
};

3. 發(fā)送消息

使用 send 方法向服務(wù)器發(fā)送文本消息。

// 發(fā)送文本消息
socket.send('Hello Server!');

WebSocket 除了發(fā)送和接收文本消息外，還支持發(fā)送和接收二進(jìn)制數(shù)據(jù)。對(duì)于發(fā)送二進(jìn)制數(shù)據(jù)，可以使用 send() 方法傳遞一個(gè) ArrayBuffer 或 Blob 對(duì)象，例如：

// 發(fā)送二進(jìn)制數(shù)據(jù)
const buffer = new ArrayBuffer(8);// 創(chuàng)建一個(gè) 8 字節(jié)的 ArrayBuffer 對(duì)象
//ArrayBuffer 是一個(gè)表示通用、固定長(zhǎng)度原始二進(jìn)制數(shù)據(jù)緩沖區(qū)的對(duì)象。//本身不提供操作數(shù)據(jù)的直接方法，而是通過 TypedArray 或 DataView 對(duì)其進(jìn)行讀寫操作。
const view = new DataView(buffer);// 創(chuàng)建一個(gè) DataView 對(duì)象，以便操作 ArrayBuffer 中的數(shù)據(jù)
//DataView 提供了一種對(duì) ArrayBuffer 中數(shù)據(jù)進(jìn)行讀取和寫入的方式，支持多種數(shù)據(jù)類型（如整數(shù)、浮點(diǎn)數(shù)等）的讀取和寫入。
//創(chuàng)建 DataView 對(duì)象時(shí)，傳入了之前創(chuàng)建的 ArrayBuffer，這使得 DataView 可以操作這個(gè)緩沖區(qū)中的數(shù)據(jù)。
view.setUint8(0, 255);
//setUint8(offset, value) 方法將 8 位無符號(hào)整數(shù)值寫入 ArrayBuffer 的指定位置。
//offset 是偏移量（從緩沖區(qū)的起始位置），value 是要寫入的值。
//0 表示數(shù)據(jù)將寫入 ArrayBuffer 的第一個(gè)字節(jié)位置，255 是要寫入的值。由于 Uint8 是 8 位無符號(hào)整數(shù)，范圍從 0 到 255。socket.send(buffer);
//send(data) 方法將指定的數(shù)據(jù)發(fā)送到 WebSocket 服務(wù)器。
//在這里，發(fā)送的是 ArrayBuffer 對(duì)象，即我們之前 創(chuàng)建并修改的 數(shù)據(jù)緩沖區(qū)。

在接收二進(jìn)制數(shù)據(jù)時(shí)，可以通過 event.data 獲取到 ArrayBuffer 對(duì)象，然后進(jìn)行處理。

4. 關(guān)閉連接

可以調(diào)用 close 方法關(guān)閉 WebSocket 連接。可以傳遞一個(gè)關(guān)閉狀態(tài)碼和可選的原因描述。

// 關(guān)閉 WebSocket 連接
socket.close(1000, 'Normal closure');

六、WebSocket的安全性和跨域問題處理

WebSocket 支持通過 wss:// 前綴建立加密的安全連接，使用 TLS / SSL 加密通信，確保數(shù)據(jù)的安全性。在使用加密連接時(shí)，服務(wù)器需要配置相應(yīng)的證書。

對(duì)于跨域問題，WebSocket 遵循同源策略，只能與同源的服務(wù)器建立連接。 如果需要與不同域的服務(wù)器通信，可以使用 CORS （ 跨域資源共享 ） 來進(jìn)行跨域訪問控制。

七、WebSocket 協(xié)議和 HTTP 協(xié)議的區(qū)別

• 連接方式：WebSocket 提供持久的連接，通過握手過程建立連接后保持打開狀態(tài)，直到主動(dòng)關(guān)閉，而 HTTP 是無狀態(tài)的，每次請(qǐng)求都需要重新建立連接。
• 數(shù)據(jù)格式：WebSocket 支持文本和二進(jìn)制數(shù)據(jù)的傳輸，而 HTTP 主要是傳輸文本數(shù)據(jù)。
• 數(shù)據(jù)傳輸方式：WebSocket 實(shí)現(xiàn)了全雙工通信，數(shù)據(jù)傳輸是雙向的，客戶端和服務(wù)器可以 同時(shí)發(fā)送和接收 數(shù)據(jù)，數(shù)據(jù)通過幀（frame）進(jìn)行傳輸，減少了傳輸開銷。而 HTTP 數(shù)據(jù)傳輸是單向的，客戶端發(fā)起請(qǐng)求，服務(wù)器響應(yīng)數(shù)據(jù)。每個(gè)請(qǐng)求都包含完整的 HTTP 頭部。
• 協(xié)議標(biāo)識(shí)：WebSocket 使用 ws:// 或 wss:// 前綴標(biāo)識(shí)，而 HTTP 使用 http:// 或 https://
• 協(xié)議切換：WebSocket 使用 HTTP 協(xié)議進(jìn)行初始的握手，之后切換到 WebSocket 協(xié)議進(jìn)行通信。握手過程包括協(xié)議升級(jí)的請(qǐng)求和響應(yīng)。HTTP 協(xié)議在每次請(qǐng)求時(shí)都是獨(dú)立的，不涉及協(xié)議切換。
• 應(yīng)用場(chǎng)景：WebSocket適用于實(shí)時(shí)交互的場(chǎng)景，如即時(shí)聊天、在線游戲、實(shí)時(shí)數(shù)據(jù)推送等，需要快速且頻繁的數(shù)據(jù)交換。HTTP適用于傳統(tǒng)的 Web 請(qǐng)求和響應(yīng)場(chǎng)景，如靜態(tài)資源加載、表單提交等。

八、WebSocket 相對(duì)于傳統(tǒng) HTTP 請(qǐng)求的優(yōu)勢(shì)

• 實(shí)時(shí)性：WebSocket 提供了低延遲的實(shí)時(shí)通信能力，能夠在服務(wù)器端有新數(shù)據(jù)時(shí)立即推送給客戶端。
• 雙向通信：WebSocket 支持客戶端和服務(wù)器之間的雙向通信，可以實(shí)現(xiàn)實(shí)時(shí)聊天、實(shí)時(shí)數(shù)據(jù)更新等場(chǎng)景。
• 較低的網(wǎng)絡(luò)開銷：WebSocket 使用長(zhǎng)連接，連接保持持久，減少了頻繁建立和關(guān)閉連接的開銷和服務(wù)器資源消耗。
• 更高的性能：由于減少了 HTTP 請(qǐng)求的開銷（WebSocket 在建立連接后不再需要重復(fù)的 HTTP 請(qǐng)求頭），數(shù)據(jù)通過幀進(jìn)行傳輸，支持文本和二進(jìn)制數(shù)據(jù)，靈活性高，使WebSocket 在性能上更高效。
• 跨域支持：WebSocket 具備跨域通信的能力，可以跨域進(jìn)行實(shí)時(shí)通信。

九、WebSocket 的性能優(yōu)化

• 減少數(shù)據(jù)量：合理控制發(fā)送的數(shù)據(jù)量大小，避免不必要的數(shù)據(jù)傳輸。
• 心跳機(jī)制：通過定時(shí)發(fā)送心跳消息，保持連接的活躍狀態(tài)，防止連接被關(guān)閉。
• 數(shù)據(jù)壓縮：可以使用壓縮算法對(duì)數(shù)據(jù)進(jìn)行壓縮，減少網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)量。
• 服務(wù)器端優(yōu)化：合理配置服務(wù)器端的連接數(shù)和資源管理，以支持更多的并發(fā)連接。

參考：

• developer.mozilla.org/zh-CN/docs/…
• ruanyifeng.com/blog/2017/0…
• www.cnblogs.com/nnngu/p/934…