websocket重连需限制次数并正确重置计数器：初始为0，每次重连失败递增，达到阈值（如5或10次）即停止；连接成功后重置为0，手动关闭时设标记避免误重连。
WebSocket重连次数限制怎么写
直接在连接失败回调里维护一个计数器，超过阈值就停止重连。关键不是“能不能写”，而是“什么时候重置计数器”——比如用户手动调用 close() 后，不应继续重试；而网络闪断后，要保留当前计数继续退避。
实操建议：
- 用闭包或类属性存
reconnectCount，初始为0 - 每次进入重连逻辑前先判断：
if (reconnectCount >= MAX_RECONNECT_ATTEMPTS) { return; } - 成功建立连接后，必须重置：
reconnectCount = 0 - 用户主动调用
ws.close()或销毁实例时，应设为-1或清空定时器，避免残留重连任务
WebSocket重连退避算法怎么实现（指数退避）
别用固定间隔重连，否则服务端可能被突发请求打挂。标准做法是每次失败后延迟时间翻倍，带随机抖动防雪崩。
实操建议：
- 基础公式：
delay = Math.min(baseDelay * Math.pow(2, attempt), maxDelay) - 加抖动（推荐 ±20%）：
delay = delay * (0.8 + Math.random() * 0.4) -
baseDelay建议从1000（1秒）起步，maxDelay控制在30000（30秒）以内 - 不要用
setTimeout嵌套实现——容易失控；改用setTimeout+ 清除机制，或封装成 Promise 链
示例片段（简化版）：
Frontend Design Pro — 专业前端设计规范
下载
前端设计质量提升 skill。让 AI 生成的 UI/前端代码更专业，避免常见设计反模式。 参考 impeccable 项目的设计语言规范，提供 audit/polish/critique 等设计审查命令。 触发词：/audit /polish /critique /colorize /animate /bold...
function reconnect() {
if (reconnectCount >= MAX_RECONNECT_ATTEMPTS) return;
<p>const base = 1000;
const max = 30000;
const delay = Math.min(base <em> Math.pow(2, reconnectCount), max) </em> (0.8 + Math.random() * 0.4);</p><p>setTimeout(() => {
ws = new WebSocket(url);
ws.onopen = () => { reconnectCount = 0; };
ws.onerror = () => { reconnectCount++; reconnect(); };
}, delay);
}</p>
onerror 和 onclose 哪个更适合触发重连
只靠 onerror 不可靠——它不保证连接已断开，且某些浏览器在连接未建立时也会触发；onclose 更准确，但要注意：正常调用 close() 也会进这里。
实操建议：
- 重连逻辑统一放在
onclose中，但加判断：if (event.code !== 1000 && !manuallyClosed) { triggerReconnect(); } -
manuallyClosed是个布尔标记，由你调用ws.close()前设为true -
onerror里只做日志，不启动重连——避免重复触发 - 补充监听
onopen时把manuallyClosed = false
重连时如何避免重复建立 WebSocket 实例
最常见 bug：没清理上一次的 setTimeout，导致多个定时器并发执行，新建一堆 WebSocket 实例却只保留最后一个的引用，其余变成内存泄漏+服务端无效连接。
实操建议：
- 每次发起新重连前，先
clearTimeout(reconnectTimer) - 用单例变量存当前
ws实例，创建新实例前先ws?.close()（注意判空） - 在
onclose回调里不要直接 new WebSocket，而是走统一的reconnect()函数入口，确保控制权集中 - 开发期加一行
console.log('WS created:', Date.now())，一眼看出是否重复创建
退避和限次本身不难，难的是状态同步——连接中、关闭中、重连中、手动关闭后，这些状态稍一错位，重连逻辑就失控。尤其是页面卸载、标签页切走、Service Worker 干预等场景，得靠 beforeunload 和 visibilitychange 补充兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
