1. 连上昨天的本地 WS 服务器
2. 拔网线（或 DevTools → Network → Offline）
3. 观察：onclose 没触发、readyState 还是 OPEN、页面毫无感知
4. 重新插上网线：连接其实早就死了，发消息才报错

客户端每 N 秒发一个 ping → 服务器回一个 pong
              │
              ├── R 秒内收到 pong → 连接还活着，继续
              └── R 秒没收到 pong  → 判决死亡 → ws.close() → 触发重连流程

/**
 * 心跳检测器
 * 设计要点：
 * 1. ping/pong 用应用层消息（协议层的见第四节）
 * 2. 任何收到的消息都算"活着"的证据（不必非等 pong——数据帧也能证明链路通）
 * 3. 超时判决要 close 而不是傻等
 */
export class Heartbeat {
  private pingTimer = 0;
  private deathTimer = 0;
  private seq = 0;

  constructor(
    private send: (msg: string) => void,
    private onDead: () => void,
    private intervalMs = 10_000,    // 每 10 秒一次 ping
    private timeoutMs = 5_000       // ping 后 5 秒无任何消息判死
  ) {}

  /** 连接建立后启动 */
  start(): void {
    this.stop();
    this.pingTimer = window.setInterval(() => {
      this.send(JSON.stringify({ type: "ping", seq: this.seq++ }));
      // 每次 ping 后布置死亡判决计时器
      clearTimeout(this.deathTimer);
      this.deathTimer = window.setTimeout(() => this.onDead(), this.timeoutMs);
    }, this.intervalMs);
  }

  /** 收到任何消息时调用：撤销死刑判决 */
  feed(): void {
    clearTimeout(this.deathTimer);
  }

  /** 断开/重连前清理 */
  stop(): void {
    clearInterval(this.pingTimer);
    clearTimeout(this.deathTimer);
  }
}

// ❌ 立即重连：服务器宕机时 1000 个客户端同时每秒打 1000 次 → 重启瞬间被打挂
const delay = 0;

// ❌ 固定间隔：比立即重连好，但"同时断、同时试"的共振仍在
const delay = 3000;

// ✅ 指数退避 + 随机抖动：行业最佳实践（TCP 重传、AWS SDK、socket.io 都这么干）
//    每次 failures+1，延迟翻倍；上限封顶；抖动打散同时重试的客户端
const delay = Math.min(1000 * 2 ** failures, 30_000) * (0.5 + Math.random() * 0.5);

失败次数    退避基数     随机抖动后
   1         1s        0.5 ~ 1.0s
   2         2s        1.0 ~ 2.0s
   3         4s        2.0 ~ 4.0s
   4         8s        4.0 ~ 8.0s
   5        16s        8.0 ~ 16.0s
  ≥6        30s        15 ~ 30s（封顶）
        ──▶ 服务器恢复后最多 30s 内全部客户端回来，且不会共振

特点：
- 帧只有 2 字节头，零 payload 开销
- 但浏览器 JavaScript API 不能发协议层 ping，也收不到 pong
  （浏览器内核自动回 pong，但你的代码无感知）
- 只有服务器端（Node ws 库）能主动发协议层 ping

import { Heartbeat } from "./heartbeat";

/** 连接状态（UI 层据此显示状态灯） */
export type ConnState = "connecting" | "open" | "reconnecting" | "closed";

/**
 * 生产级可重连 WebSocket：
 * - 心跳判死半开连接
 * - 指数退避 + 抖动重连
 * - 主动 close(code 1000) 不触发重连（用户意图优先）
 */
export class ReconnectingWebSocket {
  private ws: WebSocket | null = null;
  private state: ConnState = "closed";
  private failures = 0;                 // 连续失败计数（成功后清零）
  private retryTimer = 0;
  private manualClose = false;          // 区分"用户主动关"与"意外断"
  private heartbeat: Heartbeat;

  private msgListeners = new Set<(data: string) => void>();
  private stateListeners = new Set<(s: ConnState) => void>();

  constructor(
    private url: string,
    private opts = {
      heartbeatInterval: 10_000,
      heartbeatTimeout: 5_000,
      maxRetryDelay: 30_000,
    }
  ) {
    // 心跳：发不出去（send 返回 false）或超时无响应都判死
    this.heartbeat = new Heartbeat(
      () => this.send("ping"),
      () => {
        console.warn("心跳超时，判决连接死亡");
        this.ws?.close();               // 触发 onclose → 走统一重连流程
      },
      opts.heartbeatInterval,
      opts.heartbeatTimeout
    );
  }

  /** 建立连接（对外主入口，幂等） */
  connect(): void {
    this.manualClose = false;
    this.setState("connecting");
    this.openSocket();
  }

  /** 主动关闭：不重连（组件卸载时调用） */
  close(): void {
    this.manualClose = true;
    this.heartbeat.stop();
    clearTimeout(this.retryTimer);
    this.ws?.close(1000, "client-shutdown");
    this.setState("closed");
  }

  /** 发送文本（仅 OPEN 状态） */
  send(data: string): boolean {
    if (this.ws?.readyState !== WebSocket.OPEN) return false;
    this.ws.send(data);
    return true;
  }

  onMessage(listener: (data: string) => void): () => void {
    this.msgListeners.add(listener);
    return () => this.msgListeners.delete(listener);
  }

  onState(listener: (s: ConnState) => void): () => void {
    this.stateListeners.add(listener);
    return () => this.stateListeners.delete(listener);
  }

  // ===== 内部实现 =====

  private openSocket(): void {
    const ws = new WebSocket(this.url);
    ws.binaryType = "arraybuffer";
    this.ws = ws;

    ws.onopen = () => {
      this.failures = 0;              // 成功：退避序列归零
      this.setState("open");
      this.heartbeat.start();
      // 重连成功后的会话恢复钩子（Day 61 补传逻辑挂这里）
      this.onSessionRestored?.();
    };

    ws.onmessage = (ev) => {
      this.heartbeat.feed();          // 任何消息都撤销死刑判决
      if (typeof ev.data === "string") {
        this.msgListeners.forEach((l) => l(ev.data as string));
      }
    };

    ws.onclose = (ev) => {
      this.heartbeat.stop();
      this.ws = null;
      if (this.manualClose || ev.code === 1000) return;   // 用户意图：不重连
      this.scheduleReconnect();
    };
    // onerror 统一交给 onclose 处理（Day 57 坑 6）
  }

  /** 指数退避 + 抖动重连 */
  private scheduleReconnect(): void {
    const base = Math.min(1000 * 2 ** this.failures, this.opts.maxRetryDelay);
    const delay = base * (0.5 + Math.random() * 0.5);
    this.failures++;
    this.setState("reconnecting");
    console.log(`将在 ${Math.round(delay)}ms 后第 ${this.failures} 次重连`);
    clearTimeout(this.retryTimer);
    this.retryTimer = window.setTimeout(() => this.openSocket(), delay);
  }

  /** 会话恢复钩子（子类/外部注入重连后的恢复逻辑） */
  onSessionRestored: (() => void) | null = null;

  private setState(s: ConnState): void {
    this.state = s;
    this.stateListeners.forEach((l) => l(s));
  }

  get connectionState(): ConnState {
    return this.state;
  }
}

1. 连接后立刻 DevTools → Network → Offline
2. 观察控制台：10s 后 ping 发出 → 15s 时判决死亡 → 进入 reconnecting
3. 恢复网络：退避后自动重连成功 → open