javascript sse断线重连需主动控制:准确识别服务端崩溃(非首次失败)、节制重试(抖动+指数退避)、利用last-event-id续传、配合ui提示与功能降级保障体验。

JavaScript 中 SSE 的断线自动重连不能依赖浏览器默认行为,必须主动监听、判断、控制——核心是“识别真崩溃、节制重试、续传数据、保障体验”。
准确识别服务端异常断连
浏览器的 error 事件会触发多种情况:首次连接失败、网络中断、服务端进程崩溃等。只有后者才需恢复,其余应降级提示:
- 维护
isManuallyClosed标志,调用.close()前设为true,在error回调中跳过重连逻辑 - 若
eventSource.readyState === 0且已成功接收过带id的消息(说明曾连通),判定为服务端异常崩溃 - 首次连接就失败(如 502、超时、DNS 错误),显示“连接中…”而非“正在恢复”,避免误导用户
手动接管重连:抖动 + 指数退避
禁用浏览器默认 3 秒重连(易引发重连风暴),改用可控策略:
- 不设置
retry字段,彻底关闭自动重连 - 首次延迟:1 秒 ± 0.5 秒(0.5–1.5s),打散客户端请求时间点
- 后续延迟按
2ⁿ增长(2s → 4s → 8s),每次叠加当前值 50% 的随机偏移 - 设置最大重试次数(如 5 次)和上限间隔(如 30 秒);重连前检查
navigator.onLine,离线时暂停并提示
利用 Last-Event-ID 实现断点续传
只要服务端推送过带 id 的事件,浏览器会在重连请求头中自动携带 Last-Event-ID,但前端需配合:
- 每次收到
message事件后,同步保存e.lastEventId到localStorage - 创建新
EventSource时,URL 不需手动拼参——浏览器自动处理;但服务端必须严格解析该 header,并只推送 ID 严格大于它的数据 - 页面刷新后 ID 丢失,可 fallback 到服务端兜底:返回最近 N 条历史消息,或支持
?since=xxx查询参数辅助定位
UI 提示与功能降级保持体验连贯
断连恢复不是后台静默任务,而是用户可见的状态流转:
- 顶部固定 Toast 显示:“⚠️ 服务暂不可用,正在尝试恢复…”(带动态省略号),恢复后自动切换为“✅ 已恢复连接”
- 连续 3 次重连失败后,升级提示:“❌ 服务异常,请稍后重试”,并显示“立即重试”按钮,点击后重置计数器并新建
EventSource - 禁用依赖实时数据的操作(如“发送消息”、“刷新列表”),按钮加
disabled+title="服务暂不可用"
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











