WebSocket断开后自动重连需监听onclose和onerror事件,在满足条件时触发带指数退避的重连逻辑:初始延迟1s,逐次翻倍至最大30s,最多重试10次;同时维护isConnecting标志与readyState检查防止重复连接,并在重连前关闭旧实例、清除定时器;重连成功后应同步状态并启用心跳保活。

WebSocket 断开后自动重连,核心是监听 onclose 和 onerror 事件,在合适时机调用重新连接逻辑,并加入退避策略避免频繁重试。
监听断开与错误事件触发重连
WebSocket 原生不提供自动重连,需手动捕获连接异常:
-
onclose:连接被服务器关闭、网络中断或主动close()后触发,event.code和event.reason可辅助判断是否需要重连(如1006表示异常关闭,通常需重连) -
onerror:发生不可恢复错误时触发(如 DNS 失败、SSL 握手失败),此时readyState通常为0(CONNECTING)或2(CLOSING),也应触发重连逻辑 - 注意:
onerror不会携带具体错误信息,仅作兜底;不要在onerror中直接new WebSocket(),可能造成重复实例
实现带退避策略的重连逻辑
避免密集重试压垮客户端或服务端,采用指数退避(Exponential Backoff):
- 初始延迟 1000ms,每次失败后翻倍(1s → 2s → 4s → 8s…)
- 设置最大重试间隔(如 30s)和最大重试次数(如 10 次),超限后暂停或提示用户
- 每次重连前检查
reconnectAttempts计数器,并清空旧定时器防止内存泄漏 - 示例关键逻辑:
let reconnectTimeout;
let attempts = 0;
const maxAttempts = 10;
const baseDelay = 1000;
function connect() {
ws = new WebSocket('wss://example.com');
ws.onopen = () => { attempts = 0; };
ws.onclose = () => maybeReconnect();
ws.onerror = () => maybeReconnect();
}
function maybeReconnect() {
if (attempts >= maxAttempts) return;
attempts++;
const delay = Math.min(baseDelay * Math.pow(2, attempts - 1), 30000);
reconnectTimeout = setTimeout(connect, delay);
}
连接状态管理与重复连接防护
防止重连过程中用户多次点击或事件重复触发导致多个 WebSocket 实例并存:
- 维护一个
isConnecting标志位,在connect()开始时设为true,onopen/onclose/onerror后设为false - 在
maybeReconnect()中加判断:if (ws && ws.readyState === WebSocket.CONNECTING || isConnecting) return; - 每次新建 WebSocket 前,确保销毁旧实例:
if (ws) ws.close();,并清除旧定时器:clearTimeout(reconnectTimeout);
可选:上线后同步状态与心跳保活
重连成功后,建议主动同步业务状态,同时配合心跳防止中间设备(如代理、NAT)静默断连:
- 在
onopen回调中发送认证帧或订阅指令,恢复会话上下文 - 使用
setInterval每 30 秒发一次ping(自定义消息,非原生 ping),服务端响应pong;若连续 2 次无响应,则主动close()触发重连 - 心跳检测需独立于重连逻辑,但失败时可作为
maybeReconnect()的触发条件之一


















