1. WebSockets 原理

WebSockets 是 HTML5 標準的一部分，旨在為 Web 應用提供全雙工通信能力。與傳統的 HTTP 請求不同，WebSockets 連接一旦建立，就可以在客戶端和服務器之間自由傳輸數據，而不再需要每次通信都重新建立連接。

工作流程：

1. 建立連接：客戶端通過 HTTP 協議發起 WebSocket 握手請求，服務器接收到請求后，如果支持 WebSocket，則會返回一個 101 狀態碼，表示協議切換成功。
2. 數據傳輸：一旦連接建立，客戶端和服務器之間可以在不需要額外的請求-響應的情況下自由交換數據，直到連接被顯式關閉。
3. 關閉連接：連接可以由客戶端或服務器任何一方發起關閉。

優點：

• 實時性強：由于是全雙工通信，數據可以實時地從客戶端和服務器雙方發送，不再受限于請求-響應模型。
• 減少開銷：不需要頻繁建立和關閉連接，節省了資源和時間。
• 支持二進制數據：除了文本數據，WebSockets 還可以傳輸二進制數據，如圖片、視頻等。

2. WebSocket 握手

WebSocket 握手是建立 WebSocket 連接的第一步，它是通過標準的 HTTP 請求來實現的，但在完成握手后，通信協議會從 HTTP 切換到 WebSocket。

握手請求（由客戶端發起）：

GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

• GET /chat HTTP/1.1：這是一個標準的 HTTP GET 請求，用于發起 WebSocket 連接。
• Upgrade: websocket：表明客戶端希望將協議升級為 WebSocket。
• Connection: Upgrade：要求服務器升級連接。
• Sec-WebSocket-Key：一個隨機生成的 base64 編碼的值，用于安全校驗。
• Sec-WebSocket-Version：表示 WebSocket 協議版本，這里是 13。

握手響應（由服務器返回）：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

• 101 Switching Protocols：狀態碼 101 表示服務器同意切換協議。
• Sec-WebSocket-Accept：基于客戶端的 Sec-WebSocket-Key 和一個魔數字符串 "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" 生成的一個校驗值，用于驗證握手請求的合法性。

3. WebSocket 的代碼實現

下面我們通過一個簡單的示例來展示如何使用 WebSocket 在客戶端與服務器之間實現實時通信。

客戶端（JavaScript 實現）：

// 創建 WebSocket 連接
const socket = new WebSocket('ws://localhost:8080');

// 連接打開時觸發
socket.onopen = function(event) {
    console.log('WebSocket connection established');
    socket.send('Hello Server!'); // 向服務器發送消息
};

// 接收到消息時觸發
socket.onmessage = function(event) {
    console.log('Message from server:', event.data);
};

// 連接關閉時觸發
socket.onclose = function(event) {
    console.log('WebSocket connection closed:', event);
};

// 連接發生錯誤時觸發
socket.onerror = function(error) {
    console.error('WebSocket error:', error);
};

服務器端（Node.js 實現）：

const WebSocket = require('ws');

// 創建 WebSocket 服務器實例，監聽 8080 端口
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
    console.log('Client connected');

    // 接收客戶端消息
    ws.on('message', (message) => {
        console.log('Received:', message);
        ws.send('Hello Client!'); // 向客戶端發送消息
    });

    // 處理連接關閉
    ws.on('close', () => {
        console.log('Client disconnected');
    });
});

運行步驟：

1. 啟動服務器：在 Node.js 環境中運行服務器端代碼。
2. 運行客戶端：將客戶端代碼嵌入到一個 HTML 文件中，并在瀏覽器中打開該文件。
3. 在瀏覽器控制臺查看 WebSocket 連接建立的日志，并觀察客戶端和服務器之間的消息傳遞。

4. WebSockets 的應用場景

WebSockets 適用于多種實時通信場景：

• 實時聊天應用：用戶之間可以即時發送和接收消息。
• 實時數據流：如股票行情、加密貨幣價格等需要實時更新的數據流應用。
• 多人在線游戲：實現玩家之間的實時互動。
• 協作工具：如實時協作編輯、多人白板等。