面试官问我：你怎么做 WebSocket 稳定性设计的？

面试官问我你怎么做 WebSocket 稳定性设计的作者柚子6 年前端 | Vue / TS / WebSocket / WebRTC## 一、前言前段时间面试面试官问了我一个问题**“你在项目里是怎么保证 WebSocket 稳定性的”**这不是一道八股题。这是我在 **可视化指挥调度平台** 里真真切切踩过坑的地方。今天把这套东西完整复盘一遍。## 二、项目背景- 实时音视频通话- 单呼 / 群呼- 指令下发- 7×24 小时运行**核心要求只有一个** 不断、不丢、不乱。---## 三、最开始的错误做法const ws new WebSocket(url); ws.onmessage handleMessage;出现的问题- 页面切后台 → 断开- 网络抖动 → 断连- 服务重启 → 无重连- 消息丢失 → 前端无感知 指挥大厅直接黑屏。## 四、后来补上的 5 层稳定性设计✅ 1️⃣ 心跳检测HeartbeatsetInterval(() { ws.send(JSON.stringify({ type: ping })); }, 30000);- 服务端定时收 ping- 超时未响应 → 判定离线---✅ 2️⃣ 断线重连Reconnectfunction reconnect() { setTimeout(() { initWebSocket(); }, 2000); }- 指数退避- 防雪崩- 限制最大重试次数✅ 3️⃣ 消息确认机制ACK{ type: command, id: uuid, payload: {} }- 服务端必须返回 ACK- 未确认 → 重发- 保证不丢消息✅ 4️⃣ 异常兜底 降级策略- WebSocket 断开- 自动降级为轮询- 业务不中断✅ 5️⃣ 状态统一管理- 使用 Pinia / Vuex- 连接状态集中管理- 页面只关心业务不关心连接细节## 五、我现在的设计原则**WebSocket ≠ 长连接****WebSocket 稳定的通信系统**四个关键词1. 可感知心跳2. 可恢复重连3. 可追溯ACK4. 可降级容灾## 六、AI 在其中的角色2025 年起我在项目中引入 **Cursor Trae**- 生成重连逻辑模板- 检查边界条件- 优化异常分支但我始终坚持**AI 写代码我负责任。**因为- AI 不懂业务连续性- AI 不懂生产事故代价## 七、给前端的一点建议1. 别把 WebSocket 当成 API 调用2. 稳定性 功能3. 工程化能力是拉开差距的关键4. AI 是杠杆不是替代品如有问题欢迎评论区交流 **共勉。**