在前端开发中，Server-Sent Events (SSE) 是一种极其轻量且强大的技术，用于实现服务器向客户端推送实时数据（如股票行情、AI 流式生成内容、即时通知等）。然而，原生的 EventSource API 虽然好用，但在处理断线重连和状态保持时往往显得过于简单。如果网络波动导致连接断开，我们需要更智能的策略来恢复连接，而不是盲目地立即重试。今天，我们通过一段 TypeScript 代码，来看看如何封装一个具备自动重连、断点续传以及指数退避算法的健壮 SSE 客户端。核心代码实现以下是我们封装的 SSEClient 类。它不仅仅是一个连接器，更是一个懂得“自我保护”的智能客户端。class SSEClient { // 1. 核心连接对象与状态变量 private eventSource: EventSource | null = null; private lastEventId: string = ''; // 记录最后收到的消息 ID private retryCount = 0; // 当前重试次数 private maxRetries = 5; // 最大允许重试次数 private retryDelay = 1000; // 初始重试延迟（毫秒） /** 建立连接的主方法 @param url 服务端 SSE 接口地址 */ connect(url: string) { const eventSourceInitDict: EventSourceInit = {}; // 【关键点】断点续传：如果有上次记录的 ID，告诉服务器从那里开始 if (this.lastEventId) { eventSourceInitDict.lastEventId = this.lastEventId; } // 初始化 EventSource this.eventSource = new EventSource(url, eventSourceInitDict); // 2. 监听消息成功接收 this.eventSource.onmessage = (event)
在前端开发中，Server-Sent Events (SSE) 是一种极其轻量且强大的技术，用于实现服务器向客户端推送实时数据（如股票行情、AI 流式生成内容、即时通知等）。然而，原生的 EventSource API 虽然好用，但在处理断线重连和状态保持时往往显得过于简单。如果网络波动导致连接断开，我们需要更智能的策略来恢复连接，而不是盲目地立即重试。今天，我们通过一段 TypeScript 代码，来看看如何封装一个具备自动重连、断点续传以及指数退避算法的健壮 SSE 客户端。核心代码实现以下是我们封装的 SSEClient 类。它不仅仅是一个连接器，更是一个懂得“自我保护”的智能客户端。class SSEClient { // 1. 核心连接对象与状态变量 private eventSource: EventSource | null = null; private lastEventId: string = ''; // 记录最后收到的消息 ID private retryCount = 0; // 当前重试次数 private maxRetries = 5; // 最大允许重试次数 private retryDelay = 1000; // 初始重试延迟（毫秒） /** 建立连接的主方法 @param url 服务端 SSE 接口地址 */ connect(url: string) { const eventSourceInitDict: EventSourceInit = {}; // 【关键点】断点续传：如果有上次记录的 ID，告诉服务器从那里开始 if (this.lastEventId) { eventSourceInitDict.lastEventId = this.lastEventId; } // 初始化 EventSource this.eventSource = new EventSource(url, eventSourceInitDict); // 2. 监听消息成功接收 this.eventSource.onmessage = (event)
