WebSocket 技術詳解

引言

在現代Web應用中，實時通信已經成為不可或缺的一部分。想象一下聊天應用、在線游戲、股票交易平臺或協作工具，這些應用都需要服務器能夠即時將更新推送給客戶端，而不僅僅是等待客戶端請求。WebSocket技術應運而生，它提供了一種在客戶端和服務器之間建立持久連接的方法，實現了真正的雙向通信。

傳統的HTTP通信模式是"請求-響應"式的，客戶端必須主動發送請求，服務器才能響應。這種模式對于實時應用來說效率低下且資源消耗大。相比之下，WebSocket在建立連接后，允許服務器主動向客戶端推送數據，為實時應用提供了更高效、更低延遲的通信方式。

本文將帶你從零開始，深入理解WebSocket的工作原理、如何在前端實現WebSocket連接、處理消息傳輸、使用常見的WebSocket庫，以及在實際開發中需要注意的各種細節和最佳實踐。

什么是WebSocket？

WebSocket是一種在單個TCP連接上進行全雙工通信的協議。它在2011年被IETF標準化為RFC 6455，現在已得到所有主流瀏覽器的支持。

WebSocket與HTTP的區別

特性	HTTP	WebSocket
連接性質	非持久連接	持久連接
通信方式	單向（請求-響應）	雙向（全雙工）
開銷	每次請求都有HTTP頭	建立連接后的消息無需額外頭信息
實時性	依賴輪詢，延遲高	真正的實時，延遲低
URL前綴	http:// 或 https://	ws:// 或 wss:// (安全WebSocket)

WebSocket的工作流程

握手階段：客戶端通過HTTP請求發起WebSocket連接
協議升級：服務器接受連接請求，協議從HTTP升級到WebSocket
數據傳輸：建立連接后，雙方可以隨時發送消息
關閉連接：任何一方都可以發起關閉連接的請求

從零開始：原生WebSocket API

現代瀏覽器內置了WebSocket API，讓我們先來看看如何使用原生API創建和管理WebSocket連接。

創建WebSocket連接

// 創建WebSocket連接
const socket = new WebSocket('ws://example.com/socketserver');// 連接建立時觸發
socket.onopen = function(event) {console.log('WebSocket連接已建立');// 可以立即發送消息socket.send('你好，服務器！');
};// 接收到消息時觸發
socket.onmessage = function(event) {console.log('收到消息：', event.data);
};// 連接關閉時觸發
socket.onclose = function(event) {console.log('WebSocket連接已關閉');console.log('關閉碼：', event.code);console.log('關閉原因：', event.reason);
};// 發生錯誤時觸發
socket.onerror = function(error) {console.error('WebSocket發生錯誤:', error);
};

發送不同類型的數據

WebSocket支持發送文本和二進制數據：

// 發送文本數據
socket.send('這是一個文本消息');// 發送JSON數據（需要先轉換為字符串）
const jsonData = { type: 'userInfo', name: 'Zhang San', age: 30 };
socket.send(JSON.stringify(jsonData));// 發送二進制數據（例如ArrayBuffer）
const buffer = new ArrayBuffer(4);
const view = new Int32Array(buffer);
view[0] = 42;
socket.send(buffer);// 發送Blob對象
const blob = new Blob(['Hello world'], {type: 'text/plain'});
socket.send(blob);

關閉WebSocket連接

// 正常關閉連接
socket.close();// 帶關閉碼和原因關閉連接
socket.close(1000, '操作完成');/*
常見的關閉碼：
1000: 正常關閉
1001: 離開（例如用戶關閉瀏覽器）
1002: 協議錯誤
1003: 數據類型不支持
1008: 消息違反策略
1011: 服務器遇到未知情況
*/

WebSocket連接狀態

WebSocket對象有一個readyState屬性，表示連接的當前狀態：

// 檢查WebSocket的狀態
const checkState = () => {switch(socket.readyState) {case WebSocket.CONNECTING: // 0 - 連接正在建立console.log('正在連接...');break;case WebSocket.OPEN: // 1 - 連接已建立，可以通信console.log('已連接');break;case WebSocket.CLOSING: // 2 - 連接正在關閉console.log('正在關閉...');break;case WebSocket.CLOSED: // 3 - 連接已關閉或無法打開console.log('已關閉');break;}
};

使用Socket.io：更強大的WebSocket庫

原生WebSocket API雖然簡單易用，但在處理復雜場景時仍顯不足。Socket.io是一個廣泛使用的WebSocket庫，它提供了更多功能和更好的兼容性。

安裝Socket.io客戶端

# 使用npm安裝
npm install socket.io-client# 或使用yarn
yarn add socket.io-client

使用Socket.io的基本示例

// 導入Socket.io客戶端
import io from 'socket.io-client';// 創建Socket.io連接
const socket = io('http://example.com');// 連接事件
socket.on('connect', () => {console.log('Socket.io連接已建立');console.log('連接ID:', socket.id);// 發送事件到服務器socket.emit('greeting', { message: '你好，服務器！' });
});// 自定義事件監聽
socket.on('welcome', (data) => {console.log('收到歡迎消息:', data);
});// 斷開連接事件
socket.on('disconnect', (reason) => {console.log('Socket.io連接斷開:', reason);
});// 重新連接事件
socket.on('reconnect', (attemptNumber) => {console.log(`第${attemptNumber}次重連成功`);
});// 重連嘗試事件
socket.on('reconnect_attempt', (attemptNumber) => {console.log(`正在嘗試第${attemptNumber}次重連`);
});// 重連錯誤
socket.on('reconnect_error', (error) => {console.error('重連錯誤:', error);
});// 連接錯誤
socket.on('connect_error', (error) => {console.error('連接錯誤:', error);
});

Socket.io的高級功能

命名空間和房間

Socket.io支持命名空間和房間，用于組織和分類連接：

// 連接到特定的命名空間
const chatSocket = io('http://example.com/chat');
const gameSocket = io('http://example.com/game');// 加入房間
socket.emit('join', 'room1');// 向特定房間發送消息
socket.to('room1').emit('message', '你好，房間1的成員！');

事件確認

Socket.io支持確認事件接收：

// 客戶端發送帶確認的事件
socket.emit('createUser', { name: 'Li Si', email: 'lisi@example.com' }, (response) => {if (response.success) {console.log('用戶創建成功:', response.userId);} else {console.error('用戶創建失敗:', response.error);}
});

二進制數據支持

// 發送二進制數據
const buffer = new ArrayBuffer(4);
const view = new Uint8Array(buffer);
view.set([1, 2, 3, 4]);
socket.emit('binaryData', buffer);// 接收二進制數據
socket.on('binaryResponse', (data) => {const view = new Uint8Array(data);console.log('收到二進制數據:', Array.from(view));
});

實現一個聊天應用

讓我們結合前面所學，實現一個簡單的聊天應用：

HTML結構

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebSocket聊天室</title><style>#chatbox {height: 300px;overflow-y: scroll;border: 1px solid #ccc;padding: 10px;margin-bottom: 10px;}.message {margin-bottom: 5px;padding: 5px;border-radius: 5px;}.sent {background-color: #e3f2fd;text-align: right;}.received {background-color: #f1f1f1;}.system {background-color: #fff9c4;text-align: center;font-style: italic;}</style>
</head>
<body><h1>WebSocket聊天室</h1><div id="connectionStatus">正在連接...</div><div id="chatbox"></div><div><input type="text" id="messageInput" placeholder="輸入消息..."><button id="sendButton">發送</button></div><script src="https://cdn.socket.io/4.4.1/socket.io.min.js"></script><script src="app.js"></script>
</body>
</html>

JavaScript實現

// app.js
document.addEventListener('DOMContentLoaded', () => {const statusElement = document.getElementById('connectionStatus');const chatbox = document.getElementById('chatbox');const messageInput = document.getElementById('messageInput');const sendButton = document.getElementById('sendButton');// 創建一個唯一的用戶IDconst userId = 'user_' + Math.random().toString(36).substr(2, 9);const username = prompt('請輸入你的昵稱') || '訪客' + userId.substr(-4);// 連接到Socket.io服務器const socket = io('http://localhost:3000');// 連接建立socket.on('connect', () => {statusElement.textContent = '已連接';statusElement.style.color = 'green';// 發送加入消息socket.emit('join', { userId, username });// 添加系統消息addMessage('系統', `歡迎來到聊天室, ${username}!`, 'system');});// 斷開連接socket.on('disconnect', () => {statusElement.textContent = '已斷開連接';statusElement.style.color = 'red';addMessage('系統', '與服務器的連接已斷開', 'system');});// 接收消息socket.on('message', (data) => {const messageType = data.userId === userId ? 'sent' : 'received';addMessage(data.username, data.message, messageType);});// 有新用戶加入socket.on('userJoined', (data) => {addMessage('系統', `${data.username} 加入了聊天室`, 'system');});// 用戶離開socket.on('userLeft', (data) => {addMessage('系統', `${data.username} 離開了聊天室`, 'system');});// 發送消息const sendMessage = () => {const message = messageInput.value.trim();if (message) {socket.emit('sendMessage', {userId,username,message});messageInput.value = '';}};// 添加消息到聊天框const addMessage = (sender, content, type) => {const messageElement = document.createElement('div');messageElement.className = `message ${type}`;if (type !== 'system') {messageElement.innerHTML = `<strong>${sender}:</strong> ${content}`;} else {messageElement.textContent = content;}chatbox.appendChild(messageElement);chatbox.scrollTop = chatbox.scrollHeight; // 滾動到底部};// 點擊發送按鈕sendButton.addEventListener('click', sendMessage);// 按回車鍵發送messageInput.addEventListener('keypress', (e) => {if (e.key === 'Enter') {sendMessage();}});// 頁面關閉前window.addEventListener('beforeunload', () => {socket.emit('leave', { userId, username });});
});

服務器端實現（Node.js + Socket.io）

// server.js
const http = require('http');
const { Server } = require('socket.io');const server = http.createServer();
const io = new Server(server, {cors: {origin: '*', // 在生產環境中應該限制為特定域名methods: ['GET', 'POST']}
});// 在線用戶
const onlineUsers = new Map();io.on('connection', (socket) => {console.log('新連接：', socket.id);// 用戶加入socket.on('join', (userData) => {const { userId, username } = userData;// 存儲用戶信息onlineUsers.set(socket.id, { userId, username });// 廣播新用戶加入socket.broadcast.emit('userJoined', { userId, username, onlineCount: onlineUsers.size });// 發送當前在線用戶信息socket.emit('currentUsers', Array.from(onlineUsers.values()));});// 發送消息socket.on('sendMessage', (data) => {// 廣播消息給所有客戶端io.emit('message', data);});// 用戶離開socket.on('leave', (userData) => {handleDisconnect(socket);});// 斷開連接socket.on('disconnect', () => {handleDisconnect(socket);});// 處理斷開連接邏輯const handleDisconnect = (socket) => {// 檢查用戶是否在記錄中if (onlineUsers.has(socket.id)) {const userData = onlineUsers.get(socket.id);// 移除用戶onlineUsers.delete(socket.id);// 廣播用戶離開io.emit('userLeft', {userId: userData.userId,username: userData.username,onlineCount: onlineUsers.size});console.log('用戶斷開連接：', userData.username);}};
});// 啟動服務器
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {console.log(`WebSocket服務器運行在端口 ${PORT}`);
});

WebSocket監聽心跳和重連機制

在實際應用中，網絡可能不穩定，WebSocket連接可能會意外斷開。實現心跳檢測和重連機制是很重要的。

心跳檢測機制

class HeartbeatWebSocket {constructor(url, options = {}) {this.url = url;this.options = options;this.socket = null;this.heartbeatInterval = options.heartbeatInterval || 30000; // 默認30秒this.heartbeatTimer = null;this.reconnectTimer = null;this.reconnectAttempts = 0;this.maxReconnectAttempts = options.maxReconnectAttempts || 5;this.reconnectInterval = options.reconnectInterval || 5000; // 默認5秒this.connect();}connect() {this.socket = new WebSocket(this.url);this.socket.onopen = (event) => {console.log('WebSocket連接已建立');this.reconnectAttempts = 0; // 重置重連次數this.startHeartbeat(); // 開始心跳if (typeof this.options.onopen === 'function') {this.options.onopen(event);}};this.socket.onmessage = (event) => {// 如果是心跳響應，重置心跳計時器if (event.data === 'pong') {this.resetHeartbeat();return;}if (typeof this.options.onmessage === 'function') {this.options.onmessage(event);}};this.socket.onclose = (event) => {console.log('WebSocket連接已關閉');this.stopHeartbeat();if (event.code !== 1000) { // 非正常關閉this.reconnect();}if (typeof this.options.onclose === 'function') {this.options.onclose(event);}};this.socket.onerror = (error) => {console.error('WebSocket錯誤:', error);if (typeof this.options.onerror === 'function') {this.options.onerror(error);}};}startHeartbeat() {this.stopHeartbeat(); // 確保沒有多余的心跳計時器this.heartbeatTimer = setInterval(() => {if (this.socket.readyState === WebSocket.OPEN) {console.log('發送心跳');this.socket.send('ping');// 設置心跳超時檢測this.heartbeatTimeout = setTimeout(() => {console.log('心跳超時');this.socket.close(3000, 'Heart beat timeout');}, 5000); // 5秒內沒收到回應則認為連接已斷開}}, this.heartbeatInterval);}resetHeartbeat() {// 清除心跳超時檢測if (this.heartbeatTimeout) {clearTimeout(this.heartbeatTimeout);this.heartbeatTimeout = null;}}stopHeartbeat() {if (this.heartbeatTimer) {clearInterval(this.heartbeatTimer);this.heartbeatTimer = null;}this.resetHeartbeat();}reconnect() {if (this.reconnectTimer) {clearTimeout(this.reconnectTimer);}if (this.reconnectAttempts < this.maxReconnectAttempts) {this.reconnectAttempts++;console.log(`嘗試重新連接 (${this.reconnectAttempts}/${this.maxReconnectAttempts})...`);this.reconnectTimer = setTimeout(() => {console.log('重新連接...');this.connect();}, this.reconnectInterval);} else {console.log('達到最大重連次數，放棄重連');if (typeof this.options.onreconnectfailed === 'function') {this.options.onreconnectfailed();}}}send(data) {if (this.socket && this.socket.readyState === WebSocket.OPEN) {this.socket.send(data);return true;}return false;}close(code, reason) {this.stopHeartbeat();if (this.reconnectTimer) {clearTimeout(this.reconnectTimer);this.reconnectTimer = null;}if (this.socket) {this.socket.close(code, reason);}}
}// 使用示例
const wsClient = new HeartbeatWebSocket('ws://example.com/socket', {heartbeatInterval: 15000, // 15秒發送一次心跳maxReconnectAttempts: 10,reconnectInterval: 3000,onopen: (event) => {console.log('連接已建立，可以發送消息');},onmessage: (event) => {console.log('收到消息:', event.data);},onclose: (event) => {console.log('連接已關閉:', event.code, event.reason);},onerror: (error) => {console.error('發生錯誤:', error);},onreconnectfailed: () => {alert('無法連接到服務器，請檢查您的網絡連接或稍后再試。');}
});// 發送消息
wsClient.send('Hello!');// 關閉連接
// wsClient.close(1000, 'Normal closure');

WebSocket安全性考慮

實現WebSocket時，安全性是一個重要的考慮因素：

1. 使用WSS而非WS

始終使用安全的WebSocket（WSS）連接，就像使用HTTPS而非HTTP一樣：

// 安全連接
const secureSocket = new WebSocket('wss://example.com/socket');// 不安全連接（避免使用）
const insecureSocket = new WebSocket('ws://example.com/socket');

2. 實現身份驗證和授權

// 前端：在WebSocket連接中包含身份驗證token
const token = localStorage.getItem('authToken');
const socket = new WebSocket(`wss://example.com/socket?token=${token}`);// 或者在連接后通過消息發送身份驗證
socket.onopen = () => {socket.send(JSON.stringify({type: 'authenticate',token: localStorage.getItem('authToken')}));
};

3. 驗證和消毒輸入數據

// 在處理接收到的消息之前，總是驗證數據格式
socket.onmessage = (event) => {try {const data = JSON.parse(event.data);// 驗證數據結構if (!data.type || typeof data.type !== 'string') {console.error('無效的消息格式');return;}switch (data.type) {case 'chat':// 驗證聊天消息的必要字段if (!data.message || typeof data.message !== 'string' || data.message.length > 1000) {console.error('無效的聊天消息');return;}displayChatMessage(data);break;// 其他消息類型處理...}} catch (e) {console.error('解析消息失敗:', e);}
};

4. 限速和資源保護

在服務器端實現限速機制，防止洪水攻擊：

// 服務器端示例（Node.js）
const messageRateLimits = new Map(); // 用戶ID -> 消息計數// 在收到消息時檢查限速
socket.on('message', (data) => {const userId = getUserId(socket);// 初始化或增加計數if (!messageRateLimits.has(userId)) {messageRateLimits.set(userId, {count: 1,lastReset: Date.now()});} else {const userLimit = messageRateLimits.get(userId);// 如果超過10秒，重置計數if (Date.now() - userLimit.lastReset > 10000) {userLimit.count = 1;userLimit.lastReset = Date.now();} else {userLimit.count++;// 如果10秒內發送超過20條消息，拒絕處理if (userLimit.count > 20) {socket.send(JSON.stringify({type: 'error',message: '發送消息過于頻繁，請稍后再試'}));return;}}messageRateLimits.set(userId, userLimit);}// 處理消息...
});

WebSocket相關庫和框架

除了Socket.io，還有其他幾個流行的WebSocket庫和框架：

1. SockJS

SockJS是一個JavaScript庫，提供了一個類似WebSocket的對象，即使在不支持WebSocket的瀏覽器中也能工作。

// 安裝SockJS
// npm install sockjs-client// 使用SockJS
import SockJS from 'sockjs-client';const sockjs = new SockJS('http://example.com/sockjs');sockjs.onopen = function() {console.log('SockJS連接已打開');sockjs.send('Hello, SockJS!');
};sockjs.onmessage = function(e) {console.log('收到消息:', e.data);
};sockjs.onclose = function() {console.log('SockJS連接已關閉');
};

2. ws (Node.js)

ws是一個Node.js的WebSocket庫，速度快且易于使用。

// 服務器端（Node.js）
// npm install wsconst WebSocket = require('ws');const wss = new WebSocket.Server({ port: 8080 });wss.on('connection', function connection(ws) {ws.on('message', function incoming(message) {console.log('收到消息:', message);// 回顯消息ws.send(`您發送的消息: ${message}`);});ws.send('歡迎連接到WebSocket服務器');
});

3. STOMP

STOMP（Simple Text Oriented Messaging Protocol）是一個簡單的消息協議，通常與WebSocket一起使用。

// 安裝STOMP客戶端
// npm install @stomp/stompjsimport { Client } from '@stomp/stompjs';const client = new Client({brokerURL: 'ws://example.com/stomp',connectHeaders: {login: 'user',passcode: 'password',},debug: function (str) {console.log(str);},reconnectDelay: 5000,heartbeatIncoming: 4000,heartbeatOutgoing: 4000,
});client.onConnect = function (frame) {console.log('STOMP連接已建立');// 訂閱消息const subscription = client.subscribe('/topic/messages', function (message) {console.log('收到消息:', message.body);});// 發送消息client.publish({destination: '/app/send',headers: {},body: JSON.stringify({ content: 'Hello, STOMP!' }),});
};client.onStompError = function (frame) {console.error('STOMP錯誤:', frame.headers['message']);
};client.activate();

性能優化和最佳實踐

為了獲得最佳的WebSocket性能，請考慮以下建議：

1. 消息壓縮

對于大型消息，考慮使用壓縮：

// 壓縮消息（使用pako壓縮庫）
// npm install pako
import pako from 'pako';// 發送前壓縮消息
function sendCompressedMessage(socket, data) {// 將數據轉換為字符串const jsonString = JSON.stringify(data);// 轉換為Uint8Array (pako需要)const uint8Array = new TextEncoder().encode(jsonString);// 壓縮數據const compressed = pako.deflate(uint8Array);// 發送壓縮數據socket.send(compressed);
}// 接收并解壓消息
socket.onmessage = (event) => {// 判斷是否為二進制數據if (event.data instanceof ArrayBuffer || event.data instanceof Blob) {// 處理二進制數據const processBlob = async (blob) => {try {// 將Blob或ArrayBuffer轉換為Uint8Arrayconst arrayBuffer = blob instanceof Blob ? await blob.arrayBuffer() : blob;const compressedData = new Uint8Array(arrayBuffer);// 解壓數據const decompressed = pako.inflate(compressedData);// 轉換回字符串const jsonString = new TextDecoder().decode(decompressed);// 解析JSONconst data = JSON.parse(jsonString);console.log('收到并解壓的消息:', data);processMessage(data);} catch (error) {console.error('解壓消息失敗:', error);}};if (event.data instanceof Blob) {processBlob(event.data);} else {processBlob(event.data);}} else {// 處理普通文本消息try {const data = JSON.parse(event.data);console.log('收到文本消息:', data);processMessage(data);} catch (e) {console.log('收到非JSON消息:', event.data);}}
};### 2. 批量處理消息當需要發送多個小消息時，將它們批量處理可以減少開銷：```javascript
// 不好的做法：發送多個小消息
function sendIndividually(socket, items) {items.forEach(item => {socket.send(JSON.stringify({type: 'update',data: item}));});
}// 好的做法：批量發送
function sendBatch(socket, items) {socket.send(JSON.stringify({type: 'batchUpdate',data: items}));
}

3. 使用二進制數據格式

對于大型數據傳輸，使用二進制格式（如Protocol Buffers或MessagePack）比JSON更有效：

// 使用MessagePack (需要安裝msgpack庫)
// npm install @msgpack/msgpack
import { encode, decode } from '@msgpack/msgpack';// 編碼并發送
function sendWithMessagePack(socket, data) {const encoded = encode(data);socket.send(encoded);
}// 接收并解碼
socket.onmessage = (event) => {if (event.data instanceof ArrayBuffer) {const data = decode(event.data);console.log('接收到的MessagePack數據:', data);}
};

4. 合理設置重連策略

實現指數退避算法進行重連：

class ReconnectingWebSocket {constructor(url) {this.url = url;this.socket = null;this.reconnectAttempts = 0;this.maxReconnectAttempts = 10;this.baseReconnectDelay = 1000; // 1秒起始延遲this.maxReconnectDelay = 30000; // 最大30秒延遲this.connect();}connect() {this.socket = new WebSocket(this.url);this.socket.onopen = () => {console.log('連接成功');this.reconnectAttempts = 0; // 重置重連次數};this.socket.onclose = () => {this.reconnect();};}reconnect() {if (this.reconnectAttempts >= this.maxReconnectAttempts) {console.log('達到最大重連次數');return;}// 計算指數退避延遲const delay = Math.min(this.baseReconnectDelay * Math.pow(2, this.reconnectAttempts),this.maxReconnectDelay);// 添加隨機抖動，避免多客戶端同時重連const jitter = Math.random() * 0.5 + 0.75; // 0.75-1.25之間的隨機值const actualDelay = Math.floor(delay * jitter);console.log(`將在${actualDelay}ms后嘗試第${this.reconnectAttempts + 1}次重連`);setTimeout(() => {this.reconnectAttempts++;this.connect();}, actualDelay);}
}

5. 優化負載均衡

在大型應用中，實現WebSocket集群和負載均衡是很重要的：

// 前端：在連接WebSocket時攜帶會話信息
const sessionId = localStorage.getItem('sessionId');
const socket = new WebSocket(`wss://example.com/socket?sessionId=${sessionId}`);// 后端偽代碼（使用Redis進行會話共享）
// 保持相同sessionId的客戶端連接到相同的服務器

常見的WebSocket問題及解決方案

1. 瀏覽器限制同域名的WebSocket連接數

現代瀏覽器通常將同一域名的WebSocket連接限制在6-8個。

解決方案：

使用WebSocket子協議合并多個邏輯連接
使用不同的子域名
實現消息優先級，確保重要消息先發送

2. 防火墻和代理問題

一些公司網絡和代理可能會阻止WebSocket連接。

解決方案：

使用Socket.io或SockJS等庫，它們具有自動降級功能
使用WSS（WebSocket Secure）連接，更可能通過防火墻
提供長輪詢作為備選方案

3. 連接被意外關閉

解決方案：

實現健壯的重連機制
使用心跳檢測保持連接活躍
在后端設置更長的超時時間

// 簡單心跳實現
function setupHeartbeat(socket, intervalMs = 30000) {const heartbeatInterval = setInterval(() => {if (socket.readyState === WebSocket.OPEN) {socket.send(JSON.stringify({ type: 'heartbeat' }));} else {clearInterval(heartbeatInterval);}}, intervalMs);return {stop: () => clearInterval(heartbeatInterval)};
}// 使用
const socket = new WebSocket('wss://example.com/socket');
let heartbeat;socket.onopen = () => {heartbeat = setupHeartbeat(socket);
};socket.onclose = () => {if (heartbeat) {heartbeat.stop();}
};

4. 消息順序問題

WebSocket通常保持消息順序，但在網絡問題或重連時可能出現問題。

解決方案：

為消息添加序列號
在客戶端實現重排序邏輯
考慮使用確認機制

// 添加序列號的消息發送
let messageCounter = 0;function sendOrderedMessage(socket, data) {const message = {...data,seq: messageCounter++};socket.send(JSON.stringify(message));
}// 客戶端接收和排序
const messageBuffer = [];
let expectedSeq = 0;socket.onmessage = (event) => {const message = JSON.parse(event.data);// 如果是期望的下一個消息，直接處理if (message.seq === expectedSeq) {processMessage(message);expectedSeq++;// 檢查緩沖區是否有可以處理的消息checkBufferedMessages();} else if (message.seq > expectedSeq) {// 收到了未來的消息，先緩存messageBuffer.push(message);messageBuffer.sort((a, b) => a.seq - b.seq);}// 忽略已處理的消息（seq < expectedSeq）
};function checkBufferedMessages() {while (messageBuffer.length > 0 && messageBuffer[0].seq === expectedSeq) {const message = messageBuffer.shift();processMessage(message);expectedSeq++;}
}