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

 作者：柚子
 6 年前端 | Vue / TS / WebSocket / WebRTC  

## 一、前言

前段时间面试，面试官问了我一个问题：

**“你在项目里是怎么保证 WebSocket 稳定性的？”**

这不是一道八股题。  
这是我在 **可视化指挥调度平台** 里，真真切切踩过坑的地方。

今天把这套东西完整复盘一遍。

## 二、项目背景

- 实时音视频通话
- 单呼 / 群呼
- 指令下发
- 7×24 小时运行

**核心要求只有一个：**
> 不断、不丢、不乱。

---

## 三、最开始的错误做法

const ws = new WebSocket(url);
ws.onmessage = handleMessage;

出现的问题
- 页面切后台 → 断开
- 网络抖动 → 断连
- 服务重启 → 无重连
- 消息丢失 → 前端无感知

👉 指挥大厅直接黑屏。

## 四、后来补上的 5 层稳定性设计

 ✅ 1️⃣ 心跳检测（Heartbeat）

setInterval(() => {
    ws.send(JSON.stringify({ type: 'ping' }));
}, 30000);

- 服务端定时收 ping
- 超时未响应 → 判定离线

---

 ✅ 2️⃣ 断线重连（Reconnect）

function reconnect() {
    setTimeout(() => {
        initWebSocket();
    }, 2000);
}

- 指数退避
- 防雪崩
- 限制最大重试次数

 ✅ 3️⃣ 消息确认机制（ACK）

{
"type": "command",
"id": "uuid",
"payload": {}
}

- 服务端必须返回 ACK
- 未确认 → 重发
- 保证不丢消息

 ✅ 4️⃣ 异常兜底 & 降级策略

- WebSocket 断开
- 自动降级为轮询
- 业务不中断

 ✅ 5️⃣ 状态统一管理

- 使用 Pinia / Vuex
- 连接状态集中管理
- 页面只关心业务，不关心连接细节

## 五、我现在的设计原则

**WebSocket ≠ 长连接**  
**WebSocket = 稳定的通信系统**

四个关键词
1. 可感知（心跳）
2. 可恢复（重连）
3. 可追溯（ACK）
4. 可降级（容灾）

## 六、AI 在其中的角色

2025 年起，我在项目中引入 **Cursor + Trae**：

- 生成重连逻辑模板
- 检查边界条件
- 优化异常分支

但我始终坚持：

 **AI 写代码，我负责任。**

因为：
- AI 不懂业务连续性
- AI 不懂生产事故代价

## 七、给前端的一点建议

1. 别把 WebSocket 当成 API 调用  
2. 稳定性 > 功能  
3. 工程化能力，是拉开差距的关键  
4. AI 是杠杆，不是替代品  

如有问题，欢迎评论区交流 👋

**共勉。**