在现代 Web 应用中，WebSocket 是实现实时通信的核心技术。但网络环境复杂多变，如何确保连接稳定成为关键挑战。本文将深入剖析 WebSocket 的重连与心跳机制，提供一套经过生产环境验证的解决方案。

一、WebSocket 基础封装

首先我们实现一个具备基础重连能力的 WebSocket 类：

class RobustWebSocket {constructor(url, protocols = [], options = {}) {// 配置参数this.url = url;this.protocols = protocols;this.options = {reconnectInterval: 1000,    // 基础重连间隔maxReconnectInterval: 30000, // 最大重连间隔reconnectDecay: 1.5,        // 重连间隔增长因子maxReconnectAttempts: Infinity, // 最大重连次数...options};// 状态变量this.reconnectAttempts = 0;this.reconnectTimer = null;this.heartbeatTimer = null;this.pendingMessages = [];this.isManualClose = false;// 事件监听器this.listeners = {open: [],message: [],close: [],error: []};// 初始化连接this.connect();}// 建立连接connect() {this.ws = new WebSocket(this.url, this.protocols);this.ws.onopen = (event) => {this.onOpen(event);};this.ws.onmessage = (event) => {this.onMessage(event);};this.ws.onclose = (event) => {this.onClose(event);};this.ws.onerror = (event) => {this.onError(event);};}// 开放事件监听onOpen(event) {console.log('WebSocket连接已建立');this.reconnectAttempts = 0; // 重置重连计数器// 启动心跳检测this.startHeartbeat();// 处理积压消息this.flushPendingMessages();// 触发开放事件this.emit('open', event);}// 消息接收处理onMessage(event) {// 如果是心跳响应，则记录最后活动时间if (this.isHeartbeatMessage(event.data)) {this.lastActivityTime = Date.now();return;}this.emit('message', event);}// 连接关闭处理onClose(event) {console.log(`WebSocket连接关闭，代码: ${event.code}, 原因: ${event.reason}`);// 停止心跳this.stopHeartbeat();// 非手动关闭时尝试重连if (!this.isManualClose) {this.scheduleReconnect();}this.emit('close', event);}// 错误处理onError(event) {console.error('WebSocket发生错误:', event);this.emit('error', event);}// 发送消息send(data) {if (this.ws.readyState === WebSocket.OPEN) {this.ws.send(data);} else {// 连接未就绪时暂存消息this.pendingMessages.push(data);}}// 手动关闭连接close(code = 1000, reason = '正常关闭') {this.isManualClose = true;this.ws.close(code, reason);}// 添加事件监听addEventListener(type, callback) {if (this.listeners[type]) {this.listeners[type].push(callback);}}// 移除事件监听removeEventListener(type, callback) {if (this.listeners[type]) {this.listeners[type] = this.listeners[type].filter(cb => cb !== callback);}}// 触发事件emit(type, event) {this.listeners[type].forEach(callback => {callback(event);});}
}

二、智能重连机制

1. 指数退避算法

// 在RobustWebSocket类中添加方法
scheduleReconnect() {// 达到最大重连次数则不再尝试if (this.reconnectAttempts >= this.options.maxReconnectAttempts) {console.warn('已达到最大重连次数，停止重连');return;}// 计算下次重连间隔（指数退避）const delay = Math.min(this.options.reconnectInterval * Math.pow(this.options.reconnectDecay, this.reconnectAttempts),this.options.maxReconnectInterval);console.log(`将在 ${delay}ms 后尝试第 ${this.reconnectAttempts + 1} 次重连`);this.reconnectTimer = setTimeout(() => {this.reconnectAttempts++;this.connect();}, delay);
}

2. 网络状态感知

// 在constructor中添加网络监听
constructor(url, protocols = [], options = {}) {// ...原有代码// 监听网络状态变化this.handleOnline = () => {if (this.ws.readyState === WebSocket.CLOSED && !this.isManualClose) {console.log('网络恢复，立即尝试重连');clearTimeout(this.reconnectTimer);this.connect();}};window.addEventListener('online', this.handleOnline);
}// 在关闭时移除监听
close() {// ...原有代码window.removeEventListener('online', this.handleOnline);
}

3. 服务端不可用检测

// 在onClose方法中增强
onClose(event) {// ...原有代码// 如果是服务端不可用错误，延长重连间隔if (event.code === 1006 || event.code === 1011) {this.reconnectAttempts = Math.max(this.reconnectAttempts,5); // 相当于已经尝试了5次}
}

三、心跳检测机制

1. 基础心跳实现

// 在RobustWebSocket类中添加心跳相关方法
startHeartbeat() {// 心跳配置this.heartbeatConfig = {interval: 30000,      // 30秒发送一次心跳timeout: 10000,       // 10秒内未收到响应则断开message: JSON.stringify({ type: 'heartbeat' }), // 心跳消息内容...(this.options.heartbeat || {})};// 记录最后活动时间this.lastActivityTime = Date.now();// 定时发送心跳this.heartbeatTimer = setInterval(() => {this.checkHeartbeat();}, this.heartbeatConfig.interval);
}// 停止心跳
stopHeartbeat() {clearInterval(this.heartbeatTimer);this.heartbeatTimer = null;
}// 执行心跳检查
checkHeartbeat() {// 检查上次响应是否超时if (Date.now() - this.lastActivityTime > this.heartbeatConfig.timeout) {console.error('心跳响应超时，主动断开连接');this.ws.close(1000, '心跳超时');return;}// 发送心跳消息if (this.ws.readyState === WebSocket.OPEN) {this.ws.send(this.heartbeatConfig.message);}
}// 判断是否为心跳消息
isHeartbeatMessage(data) {try {const msg = JSON.parse(data);return msg.type === 'heartbeat' || msg.type === 'heartbeat-reply';} catch {return false;}
}

2. 动态心跳间隔

// 根据网络状况调整心跳间隔
updateHeartbeatInterval() {// 获取网络连接类型const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;if (connection) {// 移动网络使用更频繁的心跳if (connection.type === 'cellular') {this.heartbeatConfig.interval = 15000;this.heartbeatConfig.timeout = 5000;}// 检测到网络变化时重启心跳connection.addEventListener('change', () => {this.stopHeartbeat();this.startHeartbeat();});}
}

3. 心跳与重连协同

// 修改onClose方法
onClose(event) {// ...原有代码// 心跳超时导致的关闭，立即重连if (event.reason === '心跳超时') {clearTimeout(this.reconnectTimer);this.connect();}
}

四、高级优化策略

1. 连接状态同步

// 添加状态同步方法
getConnectionState() {return {wsState: this.ws.readyState,lastActivity: this.lastActivityTime,reconnectAttempts: this.reconnectAttempts,isOnline: navigator.onLine};
}// 在UI中显示连接状态
renderConnectionStatus() {const state = this.getConnectionState();let status = '';switch(state.wsState) {case WebSocket.CONNECTING:status = '连接中...';break;case WebSocket.OPEN:status = `已连接 (${Math.floor((Date.now() - state.lastActivity)/1000}s)`;break;case WebSocket.CLOSING:status = '正在关闭...';break;case WebSocket.CLOSED:status = state.isOnline ? `正在尝试第 ${state.reconnectAttempts} 次重连` : '网络已断开';break;}return status;
}

2. 消息队列与重发

// 增强send方法
send(data, options = {}) {const message = {data,timestamp: Date.now(),attempts: 0,maxAttempts: options.maxAttempts || 3,timeout: options.timeout || 5000};if (this.ws.readyState === WebSocket.OPEN) {this._sendInternal(message);} else {this.pendingMessages.push(message);}
}// 内部发送方法
_sendInternal(message) {message.attempts++;this.ws.send(message.data);// 设置超时检查message.timer = setTimeout(() => {if (!message.ack) {this._handleMessageTimeout(message);}}, message.timeout);
}// 处理消息超时
_handleMessageTimeout(message) {if (message.attempts < message.maxAttempts) {console.warn(`消息 ${message.data} 超时，尝试重发 (${message.attempts}/${message.maxAttempts})`);this._sendInternal(message);} else {console.error(`消息 ${message.data} 达到最大重试次数`);this.emit('message_timeout', message);}
}// 在onOpen中修改积压消息处理
flushPendingMessages() {this.pendingMessages.forEach(message => {this._sendInternal(message);});this.pendingMessages = [];
}

3. 服务端协同优化

// 添加服务端时间同步
syncServerTime() {this.send(JSON.stringify({type: 'time-sync',clientTime: Date.now()}));this.once('message', (event) => {const data = JSON.parse(event.data);if (data.type === 'time-sync-reply') {this.timeDiff = data.serverTime - Math.floor((data.clientTime + Date.now())/2);console.log(`服务器时间差: ${this.timeDiff}ms`);}});
}

五、生产环境实践

1. 性能监控集成

// 添加监控埋点
trackConnectionMetrics() {const startTime = Date.now();let disconnectTime = 0;this.addEventListener('open', () => {const duration = disconnectTime ? Date.now() - disconnectTime : 0;analytics.track('ws_reconnect', {attempts: this.reconnectAttempts,downtime: duration});});this.addEventListener('close', () => {disconnectTime = Date.now();analytics.track('ws_disconnect', {code: event.code,reason: event.reason});});
}

2. 异常处理增强

// 添加全局错误捕获
setupErrorHandling() {window.addEventListener('unhandledrejection', (event) => {if (event.reason instanceof WebSocketError) {this.handleWsError(event.reason);event.preventDefault();}});
}// 自定义WebSocket错误
class WebSocketError extends Error {constructor(message, code, originalError) {super(message);this.code = code;this.originalError = originalError;}
}// 在错误处理中抛出自定义错误
onError(event) {const error = new WebSocketError('WebSocket错误',this.ws.readyState,event);this.emit('error', error);
}

3. 单元测试要点

// 使用Jest测试重连逻辑
describe('RobustWebSocket 重连机制', () => {let ws;const mockUrl = 'ws://test';beforeEach(() => {jest.useFakeTimers();global.WebSocket = jest.fn(() => ({onopen: null,onclose: null,onerror: null,onmessage: null,readyState: 0,close: jest.fn(),send: jest.fn()}));ws = new RobustWebSocket(mockUrl, [], {reconnectInterval: 100,maxReconnectInterval: 1000});});test('网络断开应触发指数退避重连', () => {// 模拟连接建立ws.ws.onopen();// 模拟连接断开ws.ws.onclose({ code: 1006 });// 验证定时器设置jest.advanceTimersByTime(100);expect(WebSocket).toHaveBeenCalledTimes(2);// 第二次重连间隔应增加ws.ws.onclose({ code: 1006 });jest.advanceTimersByTime(150); // 100 * 1.5expect(WebSocket).toHaveBeenCalledTimes(3);});
});

六、不同场景下的配置建议

1. 金融交易类应用

const tradingSocket = new RobustWebSocket('wss://trading-api', [], {reconnectInterval: 500,          // 更快的重连尝试maxReconnectInterval: 5000,      // 最大间隔缩短heartbeat: {interval: 10000,               // 10秒心跳timeout: 3000                  // 3秒超时},maxReconnectAttempts: 10         // 限制重连次数
});

2. 社交聊天应用

const chatSocket = new RobustWebSocket('wss://chat-server', [], {reconnectInterval: 1000,maxReconnectInterval: 60000,     // 允许更长的重连间隔heartbeat: {interval: 30000,               // 30秒心跳timeout: 10000                 },messageQueue: true               // 启用消息队列
});

3. 物联网监控系统

const iotSocket = new RobustWebSocket('wss://iot-gateway', [], {reconnectInterval: 2000,maxReconnectInterval: 300000,    // 5分钟最大间隔heartbeat: {interval: 60000,               // 1分钟心跳timeout: 30000                 },networkAware: true              // 增强网络感知
});