WebSocket断线后应采用指数退避策略自动重连，即按1s→2s→4s→8s等倍增延迟重试，并设最大重试次数与延迟上限；需封装连接管理器，统一处理创建、监听、重连及定时器清理，避免重复连接与资源浪费。
WebSocket 断线后自动重连本身不难，但盲目轮询重连会浪费资源、触发服务限流，甚至压垮客户端。用指数退避（Exponential Backoff）策略控制重试间隔，是稳定、友好的关键——即每次失败后，等待时间按倍数增长（如 1s → 2s → 4s → 8s），并设置上限和最大重试次数。
核心逻辑：封装可重试的连接管理器
不要直接在 onclose 中调用 new WebSocket()，而应封装一个连接管理类，统一处理创建、监听、重连与退避。关键点包括：
- 维护当前连接实例（避免重复连接）
- 记录已失败次数，用于计算退避时长：delay = Math.min(base * 2^attempts, maxDelay)
- 使用 setTimeout 启动下一次重连，而非 setInterval（避免堆积定时器）
- 在成功建立连接后，重置失败计数和定时器
实现带退避的重连函数
下面是一个轻量实用的重连逻辑示例（不含框架依赖）：
class ReconnectableWebSocket {
constructor(url, options = {}) {
this.url = url;
this.options = options;
this.ws = null;
this.attempts = 0;
this.maxAttempts = options.maxAttempts ?? 10;
this.baseDelay = options.baseDelay ?? 1000; // 初始延迟 1s
this.maxDelay = options.maxDelay ?? 30000; // 最大延迟 30s
this.reconnectTimer = null;
<pre class="brush:php;toolbar:false;">this.connect();}
立即学习“Java免费学习笔记（深入）”；
connect() { try { this.ws = new WebSocket(this.url); this.setupEventListeners(); this.attempts = 0; // 成功则清零 } catch (e) { this.scheduleReconnect(); } }
setupEventListeners() { this.ws.onopen = () => { console.log('WebSocket connected'); // 可在此触发自定义事件或通知业务层 };
this.ws.onmessage = (event) => {
// 处理消息
this.options.onmessage?.(event);
};
this.ws.onclose = (event) => {
console.warn('WebSocket closed', event.code, event.reason);
this.scheduleReconnect();
};
this.ws.onerror = (error) => {
console.error('WebSocket error', error);
// onerror 不一定伴随 onclose，也需触发重连
this.scheduleReconnect();
};}
立即学习“Java免费学习笔记（深入）”；
scheduleReconnect() { if (this.attempts >= this.maxAttempts) { console.error('Max reconnection attempts reached'); return; }
const delay = Math.min(
this.baseDelay * Math.pow(2, this.attempts),
this.maxDelay
);
this.attempts++;
console.log(`Reconnecting in ${delay}ms... (attempt ${this.attempts})`);
this.reconnectTimer = setTimeout(() => {
this.connect();
}, delay);}
立即学习“Java免费学习笔记（深入）”；
close() { if (this.ws && this.ws.readyState === WebSocket.OPEN) { this.ws.close(); } if (this.reconnectTimer) { clearTimeout(this.reconnectTimer); this.reconnectTimer = null; } } }
// 使用方式 const ws = new ReconnectableWebSocket('wss://example.com/ws', { onmessage: (e) => console.log('Received:', e.data), maxAttempts: 5, baseDelay: 500, maxDelay: 10000 });
进阶注意事项
实际项目中还需考虑这些细节，否则容易出问题：
- 手动关闭时不重连：调用 close() 后应清除定时器、停止重试，避免“关了还连”
- 网络恢复检测：可在 onclose 前检查 navigator.onLine，若为 false 可暂停重连，待 online 事件再恢复
- 避免重复连接：在 connect() 开头判断 ws.readyState 是否为 CONNECTING / OPEN，跳过重复 new WebSocket
- 心跳保活：服务端可能因超时断连，建议配合 ping/pong 心跳（通过定时 send(JSON.stringify({ type: 'ping' }))）
- 重连前清理旧连接：onclose 触发时，确保旧 ws 实例已移除所有监听器（尤其使用箭头函数绑定时不易泄漏）
推荐增强方案
若项目已用 RxJS 或 Vue/React，可进一步封装为响应式流或 Hook：
- RxJS：用 interval + switchMap 控制退避节奏，结合 retryWhen 实现声明式重试
- React：自定义 Hook（如 useReconnectableWebSocket）管理状态、重连逻辑与生命周期同步
- Vue 3：用 onBeforeUnmount 自动 cleanup，配合 ref 管理 ws 实例
不复杂但容易忽略：退避不是越慢越好，也不是越快越好；关键是让失败后的等待时间随尝试次数“温和上升”，既避开服务压力峰值，又不让用户长时间失联。
