ServerSentEvent连接中断后如何自动重连？

Question

在使用Server-Sent Events (SSE)时，如何实现连接中断后的自动重连是一个常见的技术问题。尽管SSE规范内置了重连机制，但实际应用中可能遇到网络波动或服务器端异常导致连接丢失。此时，开发者需要明确设置`EventSource`对象的`reconnectInterval`属性，以定义重连间隔时间。然而，默认重连逻辑可能无法满足复杂场景需求，例如指数退避策略或最大重连次数限制。因此，如何自定义重连逻辑并处理重连失败后的降级方案（如切换到轮询或WebSocket）成为关键挑战。此外，还需注意重连期间的数据一致性与事件丢失问题，合理利用`Last-Event-ID`响应头和客户端缓存机制可有效缓解这些问题。

Answer 1

1. SSE连接中断自动重连基础

SSE（Server-Sent Events）是一种允许服务器向客户端推送实时更新的技术。尽管SSE规范内置了简单的重连机制，但实际应用中可能会遇到网络波动或服务器端异常导致的连接丢失问题。

默认情况下，`EventSource`对象会通过`reconnectInterval`属性定义重连间隔时间。例如：

const eventSource = new EventSource('/events');

如果连接中断，浏览器会根据内置逻辑尝试重新连接。然而，这种默认机制可能无法满足复杂的业务需求。

2. 自定义重连逻辑

为了应对复杂场景，开发者可以自定义重连逻辑。以下是实现步骤：

1. 监听`error`事件以检测连接中断。
2. 使用指数退避策略动态调整重连间隔。
3. 设置最大重连次数限制以避免无限重试。

以下代码展示了如何实现指数退避策略：

let retryCount = 0;
const maxRetries = 5;
const eventSource = new EventSource('/events');

eventSource.onerror = () => {
    if (retryCount < maxRetries) {
        const delay = Math.min(1000 * Math.pow(2, retryCount), 30000);
        setTimeout(() => {
            eventSource.close();
            eventSource = new EventSource('/events');
            retryCount++;
        }, delay);
    } else {
        console.error('Max retries reached.');
    }
};
    

3. 数据一致性和事件丢失处理

在重连期间，数据一致性与事件丢失是常见问题。为解决这些问题，可以利用`Last-Event-ID`响应头和客户端缓存机制：

• `Last-Event-ID`：服务器可以在每次发送事件时附加一个唯一标识符，客户端会在重连时将该标识符发送回服务器，以便恢复断点。
• 客户端缓存：在重连成功前，客户端可以缓存未接收到的事件，并在连接恢复后进行同步。

以下是服务端响应示例：

HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

id: 12345
data: {"message": "Hello, world!"}
    

4. 降级方案设计

当SSE重连失败时，可以选择降级到其他技术，如轮询或WebSocket：

技术	优点	缺点
轮询	简单易实现	效率低，可能导致延迟
WebSocket	双向通信，高效	实现复杂度较高

以下是切换到WebSocket的流程图：

graph TD
    A[连接中断] --> B{是否达到最大重试？}
    B --是--> C[切换到WebSocket]
    B --否--> D[继续重连]