重连风暴会压垮后端连接池，需在前端重连加入随机抖动、切后台暂停重连，并在后端实施限流、心跳与熔断。
重连风暴会直接压垮后端连接池
前端无节制重连时，服务端在几秒内收到成千上万的新连接请求，远超 max_connections 或 ulimit -n 限制，导致新连接被拒绝、旧连接被强制踢出。Nginx 代理层常先于应用层崩溃，报错如 502 Bad Gateway 或 upstream prematurely closed connection。
常见诱因包括：多个用户同时遭遇网络切换（如地铁进隧道）、服务端滚动重启、CDN 或 LB 主动断开空闲连接后客户端集中重试。
- 固定间隔重连（如每 3 秒）会让所有客户端在断连后第 3、6、9 秒同步发起请求，形成脉冲式冲击
- 未加
Math.random()抖动的指数退避，在初始几次重试中仍高度同步 - 前端未做连接状态去重，
onclose触发多次时重复调用createWebSocket()
指数退避必须带随机抖动才有效
纯 reconnectInterval *= 2 只解决“间隔增长”，不解决“时间对齐”。真实网络中断恢复时间呈指数分布，但客户端启动时间、JS 执行精度、定时器调度偏差都存在毫秒级差异——这些天然扰动应被主动利用，而非忽略。
推荐实现方式：
let reconnectInterval = 1000;
const maxInterval = 30000;
<p>function attemptReconnect() {
// 加入 0–1 秒随机偏移，打散重试时间点
const jitter = Math.random() <em> 1000;
setTimeout(() => {
if (socket.readyState === WebSocket.CLOSED || socket.readyState === WebSocket.CONNECTING) {
createWebSocket();
reconnectInterval = Math.min(reconnectInterval </em> 2, maxInterval);
}
}, reconnectInterval + jitter);
}</p>
注意：reconnectInterval 应在每次成功连接后重置为初始值，否则下次断连会从上次最大间隔开始。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
后端需配合心跳超时与连接数熔断
前端重连策略再好，后端若无对应防护，照样雪崩。关键不是“拦住所有重连”，而是让异常流量快速失败、不堆积。
- 服务端 WebSocket 握手阶段就校验
X-Real-IP或设备指纹，对单 IP 短时高频握手限流（如 >5 次/10s 拒绝） - 启用
ping/pong心跳，超时未响应则主动close()，避免僵尸连接占满epoll或kqueue句柄 - 使用熔断器（如 Go 的
gobreaker、Java 的Resilience4j）监控握手失败率：连续 5 次失败且错误率 >80%，自动开启熔断 30 秒，期间直接返回429 Too Many Requests
熔断不是拒绝服务，而是给后端喘息时间——等连接池释放、GC 完成、DB 连接归还后再恢复接入。
页面切后台时重连逻辑必须暂停
Chrome 和 Safari 对后台标签页的 setTimeout 最大间隔会拉长到 1 分钟以上，但很多前端代码没判断 document.hidden，仍在后台默默计时、尝试重连，导致用户切回页面时瞬间爆发一堆请求。
正确做法：
- 监听
visibilitychange事件，document.hidden === true时清除所有重连定时器 - 切回前台后，不立即重连，而是先检查
socket.readyState；若仍是CLOSED，再按当前reconnectInterval延迟发起 - Android WebView 中还需监听
pagehide和pageshow，Doze 模式下visibilitychange可能不触发
最容易被忽略的是：重连计时器变量（如 reconnectTimer）未在切后台时清除，切回后多个定时器叠加执行，间隔越来越短。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
