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，但前端需配合：
立即学习“Java免费学习笔记（深入）”；
- 每次收到
message事件后，同步保存e.lastEventId到localStorage - 创建新
EventSource时，URL 不需手动拼参——浏览器自动处理；但服务端必须严格解析该 header，并只推送 ID 严格大于它的数据 - 页面刷新后 ID 丢失，可 fallback 到服务端兜底：返回最近 N 条历史消息，或支持
?since=xxx查询参数辅助定位
UI 提示与功能降级保持体验连贯
断连恢复不是后台静默任务，而是用户可见的状态流转：
- 顶部固定 Toast 显示：“⚠️ 服务暂不可用，正在尝试恢复…”（带动态省略号），恢复后自动切换为“✅ 已恢复连接”
- 连续 3 次重连失败后，升级提示：“❌ 服务异常，请稍后重试”，并显示“立即重试”按钮，点击后重置计数器并新建
EventSource - 禁用依赖实时数据的操作（如“发送消息”、“刷新列表”），按钮加
disabled+title="服务暂不可用"
