SSE连接中断后如何实现自动重连？

Question

在使用SSE（Server-Sent Events）实现服务端消息推送时，网络波动或服务端重启常导致连接中断。尽管SSE API 支持通过 `onerror` 事件触发重连机制，但实际应用中发现，部分浏览器在短暂断开后未能自动恢复连接，或重连过于频繁引发服务器压力。常见问题是：如何设计一个稳定、防抖的自动重连机制，在保证实时性的同时避免过度请求？需考虑重连间隔指数退避、连接状态标记及最大重试次数等策略。

Answer 1

一、SSE连接中断的常见现象与底层机制分析

Server-Sent Events（SSE）是一种基于HTTP长连接的服务器向客户端单向推送数据的技术，适用于实时日志、通知、股票行情等场景。其核心优势在于轻量级、文本流式传输以及浏览器原生支持。然而，在实际生产环境中，网络抖动、服务端重启、负载均衡切换或代理超时（如Nginx默认60秒）常导致连接意外中断。

尽管SSE API 提供了 onerror 事件用于捕获异常并触发重连，但规范并未强制要求浏览器在所有错误后自动重试。部分浏览器（如旧版Safari或某些移动端内核）在短暂断开后可能不会触发重连，或仅尝试一次即放弃。此外，onerror 可能因网络闪断被频繁调用，若未加控制，将导致客户端陷入“无限快速重连”状态，进而对服务端造成DDoS式压力。

• 典型问题：连接断开后无反应，用户需手动刷新页面
• 重连风暴：每秒发起数十次连接请求
• 重复消息：连接恢复后未正确携带上次事件ID，导致消息丢失或重复

二、关键设计原则与策略分解

为构建稳定、防抖的SSE重连机制，需从以下三个维度进行系统性设计：

1. 指数退避重试（Exponential Backoff）：避免短时间高频重连，初始间隔可设为1秒，每次失败后乘以退避因子（如1.5~2），上限通常设为30秒。
2. 连接状态机管理：明确区分“连接中”、“已连接”、“断开”、“重试中”等状态，防止并发重连任务叠加。
3. 最大重试次数限制：设置硬性上限（如10次），超过后进入静默期或提示用户检查网络。

策略	目的	实现方式
指数退避	缓解服务器压力	延迟 = base * Math.pow(factor, retryCount)
状态标记	防止重复启动连接	使用布尔标志或枚举状态
Last-Event-ID	保证消息连续性	存储最后接收到的event id
心跳检测	主动发现死连接	服务端定期发送ping或注释消息
离线缓存	提升用户体验	前端缓存最近消息，避免白屏

三、完整实现方案与代码示例

以下是一个生产级SSE客户端封装类，集成指数退避、状态控制和Last-Event-ID恢复机制：

class ReliableSSE {
  constructor(url, options = {}) {
    this.url = url;
    this.eventSource = null;
    this.isConnected = false;
    this.retryCount = 0;
    this.maxRetries = options.maxRetries || 10;
    this.baseDelay = options.baseDelay || 1000; // 初始延迟1秒
    this.backoffFactor = options.backoffFactor || 1.5;
    this.maxDelay = options.maxDelay || 30000;   // 最大30秒
    this.lastEventId = null;
    this.isManuallyClosed = false;
  }

  connect() {
    if (this.isConnected || this.isManuallyClosed) return;

    const url = this.lastEventId 
      ? `${this.url}?lastEventId=${this.lastEventId}` 
      : this.url;

    this.eventSource = new EventSource(url, { withCredentials: true });

    this.eventSource.onopen = () => {
      console.log('SSE 连接已建立');
      this.isConnected = true;
      this.retryCount = 0; // 成功连接后重置重试计数
    };

    this.eventSource.onmessage = (event) => {
      this.lastEventId = event.lastEventId || Date.now().toString();
      // 处理业务消息
      console.log('收到消息:', event.data);
    };

    this.eventSource.onerror = () => {
      console.warn('SSE 发生错误，准备重连...');
      this.isConnected = false;
      this.attemptReconnect();
    };
  }

  attemptReconnect() {
    if (this.retryCount >= this.maxRetries || this.isManuallyClosed) {
      console.error('达到最大重试次数，停止重连');
      return;
    }

    const delay = Math.min(this.baseDelay * Math.pow(this.backoffFactor, this.retryCount), this.maxDelay);
    setTimeout(() => {
      this.retryCount++;
      console.log(`第 ${this.retryCount} 次重连尝试`);
      this.connect();
    }, delay);
  }

  close() {
    if (this.eventSource) {
      this.eventSource.close();
      this.isManuallyClosed = true;
      this.isConnected = false;
    }
  }
}

四、流程图与状态演进模型

通过状态机清晰表达连接生命周期与转换逻辑：

graph TD
    A[初始化] --> B{是否已关闭?}
    B -- 否 --> C[创建EventSource]
    C --> D[监听onopen]
    D --> E[设置isConnected=true]
    C --> F[监听onmessage]
    C --> G[监听onerror]
    G --> H{重试次数 < max?}
    H -- 是 --> I[计算退避延迟]
    I --> J[setTimeout重连]
    H -- 否 --> K[停止重连]
    J --> C
    B -- 是 --> L[终止]

五、服务端协同优化建议

客户端机制需与服务端配合才能发挥最大效果：

• 心跳保活：服务端每15~30秒发送一条注释行（: ping），防止代理层断开空闲连接。
• Last-Event-ID 支持：客户端通过查询参数传递最后ID，服务端据此恢复未完成的消息流。
• 连接标识与限流：为每个客户端分配唯一token，服务端可识别并限制单位时间内同一客户端的连接频率。
• 优雅关闭通知：服务端重启前广播“即将下线”事件，客户端提前感知并暂停重试。

例如，Node.js Express 中的心跳实现：

app.get('/events', (req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  const interval = setInterval(() => {
    res.write(': ping\n\n');
  }, 15000);

  req.on('close', () => {
    clearInterval(interval);
  });
});