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

Question

在使用SSE（Server-Sent Events）实现服务端消息推送时，网络波动或服务重启常导致连接中断。由于浏览器内置的EventSource虽支持自动重连，但其默认重连机制有限：仅依赖服务端通过`retry:`字段设置超时时间，且在某些异常场景下（如长时间无响应、CORS失败或404错误）无法有效恢复连接。常见问题是，连接中断后客户端长时间停滞，无法重新订阅事件流，导致消息丢失。如何在前端优雅地检测连接状态，并结合指数退避策略实现更可靠的自动重连机制，成为保障SSE高可用的关键技术难题。

Answer 1

一、SSE连接中断问题的背景与挑战

Server-Sent Events（SSE）是一种基于HTTP的单向通信协议，允许服务端主动向客户端推送数据。其轻量、低延迟和兼容EventSource API的特性，使其广泛应用于实时通知、日志流、股票行情等场景。

然而，在生产环境中，网络波动、服务重启或负载均衡切换常导致SSE连接中断。尽管浏览器内置的EventSource对象支持自动重连机制，但其依赖服务端通过retry:字段指定重连间隔，且在以下异常场景中表现不佳：

• CORS策略变更导致跨域失败
• 服务端返回404或503错误
• TCP连接长时间无响应（如防火墙中断）
• DNS解析失败或TLS握手超时
• 移动端进入休眠状态后网络环境变化

这些问题使得默认重连机制不可靠，客户端可能陷入“假连接”状态——既未触发error事件，也收不到任何消息，造成消息丢失与用户体验下降。

二、EventSource 默认行为分析

EventSource 的标准行为如下表所示：

事件类型	触发条件	是否自动重连	重连间隔来源
open	连接成功建立	-	-
message	收到数据帧	-	-
error	连接关闭或网络错误	是	retry 字段或默认3秒
-	404/500响应码	有限尝试	retry 字段
-	CORS失败	不触发error	无法重连
-	TLS证书错误	抛出异常，终止	需手动处理

可以看出，error事件并非在所有失败场景下都会被触发，尤其是CORS或初始连接失败时，EventSource 可能直接静默失败。

三、前端连接状态检测机制设计

为弥补原生EventSource的不足，需引入主动健康检查机制。核心思路包括：

1. 心跳检测：监听最近一次消息时间戳，若超过阈值则判定为“卡死”
2. error事件增强：捕获并分类错误类型，区分可恢复与不可恢复错误
3. 连接生命周期管理：封装EventSource，提供统一的start/reconnect/close接口
4. 状态机建模：使用有限状态机（FSM）管理连接状态（INIT, CONNECTING, OPEN, RECONNECTING, CLOSED）

示例代码实现基础心跳检测逻辑：

const HEARTBEAT_TIMEOUT = 30000; // 30秒无消息视为断开
let lastMessageTime = Date.now();
let eventSource = null;
let reconnectTimeout = null;

function createSseConnection(url) {
    cleanup();

    eventSource = new EventSource(url);

    eventSource.onmessage = (event) => {
        lastMessageTime = Date.now();
        console.log('Received:', event.data);
    };

    eventSource.onerror = () => {
        console.warn('EventSource error, triggering reconnection...');
        scheduleReconnect(url);
    };

    // 心跳检测
    const heartbeatCheck = setInterval(() => {
        if (Date.now() - lastMessageTime > HEARTBEAT_TIMEOUT) {
            console.warn('No messages received in timeout period, forcing reconnect');
            eventSource?.close();
            scheduleReconnect(url);
        }
    }, 10000);

    // 清理函数绑定
    function cleanup() {
        if (reconnectTimeout) clearTimeout(reconnectTimeout);
        if (eventSource) {
            eventSource.close();
            eventSource = null;
        }
        if (heartbeatCheck) clearInterval(heartbeatCheck);
    }
}
    

四、指数退避重连策略实现

固定间隔重连在高并发或服务雪崩场景下会加剧系统压力。采用指数退避可有效缓解：

• 初始重连延迟：1秒
• 每次失败后延迟翻倍
• 设置最大延迟（如30秒）
• 加入随机抖动避免“重连风暴”

JavaScript 实现如下：

let retryCount = 0;
const MAX_RETRY_DELAY = 30000;
const BASE_DELAY = 1000;

function scheduleReconnect(url) {
    const delay = Math.min(BASE_DELAY * Math.pow(2, retryCount) + Math.random() * 1000, MAX_RETRY_DELAY);
    reconnectTimeout = setTimeout(() => {
        console.log(`Attempting reconnect #${retryCount + 1} after ${delay}ms`);
        createSseConnection(url);
        retryCount++;
    }, delay);
}

function resetRetryCount() {
    retryCount = 0;
}
    

五、高级容错与可观测性增强

为进一步提升可靠性，可集成以下能力：

• 错误分类：通过try/catch包装EventSource初始化，捕获CORS、DNS等前置错误
• 多地址 fallback：配置备用SSE端点，主节点不可用时自动切换
• 离线缓存：结合IndexedDB暂存关键事件，防止消息丢失
• 埋点上报：记录连接中断频率、重连成功率，用于监控告警
• 动态retry配置：根据服务端Header动态调整重连策略

六、完整状态机流程图（Mermaid）

stateDiagram-v2
            [*] --> INIT
            INIT --> CONNECTING : start()
            CONNECTING --> OPEN : onopen
            CONNECTING --> RECONNECTING : onerror
            OPEN --> RECONNECTING : heartbeat timeout
            RECONNECTING --> CONNECTING : exponential backoff
            RECONNECTING --> FAILED : max retries exceeded
            FAILED --> CONNECTING : manual restart
            OPEN --> CLOSED : close()
            RECONNECTING --> CLOSED : close()

七、实际部署建议

在微服务架构中，建议配合以下措施保障SSE链路稳定性：

层级	优化措施	技术实现
客户端	心跳+指数退避	封装EventSource类
传输层	启用TCP keep-alive	Nginx配置proxy_send_timeout
服务端	发送空注释保活	定期write(":\n")
网关层	调整超时策略	ALB/SLB连接空闲超时>60s
监控	端到端可用性检测	Prometheus + Grafana
降级	HTTP轮询兜底	fallbackPolling()