WebSocket：断线、心跳与重连

作为现代实时应用的通信基石，WebSocket解决了传统HTTP协议的诸多痛点。本文将深入剖析WebSocket的核心机制，通过真实案例解读其实现原理和故障处理方案。

---

一、为何能解决断线问题？

传统HTTP的短板：

• 单向通信：HTTP只能客户端主动请求，服务端被动响应
• 高开销：每次请求都携带完整的 HTTP 头部（通常500-2000字节）
• 无状态性：难以维持持久连接

WebSocket的破局点：

// 建立WebSocket连接（实际代码示例）
const socket = new WebSocket('wss://api.realtime.com');

// 与传统AJAX轮询对比
setInterval(() => {
  // 传统轮询：1分钟内产生120次请求（假设每0.5秒轮询）
  fetch('/api/check-update'); // 每次携带完整HTTP头
}, 500);

// WebSocket：1分钟内只需1次握手+心跳包（约5次数据交换）

通过单次HTTP升级握手 （头信息仅2-14字节）建立全双工通道，后续通信无需重复建立连接，从根本上减少断线概率。

---

二、在线状态判断原理：三重探测机制

WebSocket通过底层协议栈和API事件精确感知连接状态：

socket.onopen = () => console.log("在线：TCP连接建立");
socket.onmessage = e => console.log("数据抵达：", e.data);

// 核心状态判断逻辑
socket.onerror = () => {
  console.error("异常断线：网络错误/协议不匹配");
  startReconnect(); // 触发重连
};

socket.onclose = event => {
  if (event.wasClean) {
    console.log(`离线：正常关闭(code=${event.code})`);
  } else {
    console.warn("离线：非正常断开(如网络中断)");
  }
};

探测维度：

1. TCP层探测：操作系统自动发送ACK包检测连接活性
2. WebSocket协议控制帧：Ping/Pong帧实现应用层保活
3. 浏览器API事件：onerror/onclose提供状态回调

---

三、握手协议

握手过程（基于HTTP Upgrade机制）：

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

服务端响应：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

核心步骤：

1. 客户端发送加密随机键（Sec-WebSocket-Key）
2. 服务端用固定GUID拼接后生成SHA1摘要
3. 返回Base64编码的摘要值（Sec-WebSocket-Accept）
4. 验证通过后切换为WebSocket二进制帧协议

如同商务洽谈中握手确认身份后，后续可直接用行业暗语交流，无需每次递名片。

---

四、连接维持：心跳机制

为什么需要心跳？

• 解决 NAT 网关超时自动断连（通常5-30分钟）
• 检测静默断网（如进入电梯、隧道导致网络中断）

实现方案：双向探活机制

// 客户端心跳发送
let heartbeatTimer = null;

function startHeartbeat() {
  heartbeatTimer = setInterval(() => {
    if (socket.readyState === WebSocket.OPEN) {
      socket.send('HEARTBEAT'); // 发送心跳包
    }
  }, 25000); // 25秒发送一次（小于NAT超时阈值）
}

// 服务端响应示例 (Node.js)
ws.on('message', data => {
  if (data === 'HEARTBEAT') {
    ws.send('HEARTBEAT_ACK'); // 立即回应
  }
});

// 客户端检测响应
let ackTimeout = null;

socket.onmessage = e => {
  if (e.data === 'HEARTBEAT_ACK') {
    clearTimeout(ackTimeout); // 收到ACK则重置计时
    return;
  }
  // 处理业务数据...
};

// 超时判定
function checkAck() {
  ackTimeout = setTimeout(() => {
    console.error("心跳无响应，触发重连!");
    socket.close(); // 主动关闭触发重连逻辑
  }, 10000); // 等待10秒后判定超时
}

参数设计：

• 发送间隔：建议15-25秒（小于运营商NAT超时最小值）
• 超时时长：网络RTT×3（通常5-10秒）
• 重试次数：指数退避策略（1s, 2s, 4s, 8s...）

---

五、重连机制：断线后的智能恢复

阶梯式重连策略：

let reconnectAttempts = 0;
const MAX_ATTEMPTS = 10;

function reconnect() {
  if (reconnectAttempts >= MAX_ATTEMPTS) {
    console.error("超过最大重试次数，停止重连");
    return;
  }

  const delay = Math.min(30, Math.pow(2, reconnectAttempts)) * 1000;
  
  setTimeout(() => {
    console.log(`第${reconnectAttempts + 1}次重连...`);
    initWebSocket(); // 重新初始化连接
    reconnectAttempts++;
  }, delay);
}

function initWebSocket() {
  const ws = new WebSocket(url);
  ws.onopen = () => {
    reconnectAttempts = 0; // 重置计数器
    startHeartbeat(); // 重启心跳
  };
  ws.onclose = reconnect; // 关闭时自动重连
}

优化技巧：

1. 网络状态感知 ：优先监听navigator.onLine变化
2. 退避算法：避免雪崩式请求冲击服务器
3. 状态同步 ：重连后发送SESSION_RESUME包同步状态

---

六、WebSocket的短板与应对策略

痛点	根本原因	解决方案
浏览器兼容性	旧版浏览器不支持	SockJS降级方案
代理拦截问题	未配置WS支持的代理	WSS加密+443端口
消息顺序不可靠	网络抖动导致乱序	序列号+服务端排序逻辑
无原生广播机制	协议层级限制	Redis Pub/Sub消息中继
移动端耗电增加	长连接维持需要射频	智能心跳+AppState监听

---

七、WebSocket 核心特点总结

1. 全双工通信：同时收发数据（对比HTTP半双工）
2. 低延迟传输：平均延迟<100ms（HTTP轮询>500ms）
3. 头部压缩：帧头仅2-14字节（HTTP头通常500B+）
4. 二进制支持：可传输ArrayBuffer/Blob类型数据
5. 跨域友好：不受同源策略限制（需服务端配合）

---

class RobustWebSocket {
  constructor(url) {
    this.url = url;
    this.reconnectCount = 0;
    this.init();
  }

  init() {
    this.ws = new WebSocket(this.url);
    
    // 核心事件绑定
    this.ws.onopen = this.handleOpen.bind(this);
    this.ws.onmessage = this.handleMessage.bind(this);
    this.ws.onclose = this.handleClose.bind(this);
    this.ws.onerror = this.handleError.bind(this);
  }

  handleOpen() {
    this.reconnectCount = 0;
    this.startHeartbeat();
  }

  handleClose(event) {
    if (!event.wasClean) this.reconnect();
  }

  reconnect() {
    const delay = Math.min(30, Math.pow(2, this.reconnectCount)) * 1000;
    setTimeout(() => this.init(), delay);
    this.reconnectCount++;
  }

  // 包含前面实现的心跳机制
  // ...（略，完整代码见上文）
}

// 使用示例
const chatSocket = new RobustWebSocket('wss://chat.example.com');

---

小结

1. 强实时场景：优先选WS（如在线协作、金融交易）
2. 弱实时场景：SSE/HTTP2更合适（如消息通知）
3. 兼容性优先：SockJS+Fallback方案
4. 超大规模连接：考虑WebSocket集群+负载均衡

将心跳间隔设置为业务可容忍最大延迟的1/3，例如要求30秒内感知离线，则心跳间隔设为10秒。同时结合Page Visibility API在标签页隐藏时降低心跳频率，优化资源消耗。