sse连接在网页切后台时会被系统挂起或中断,需主动关闭并重建;切后台时应显式调用close()释放资源,切回前台后先探测服务端可达性再重建连接,并缓存关键状态以弥补数据丢失,后台保活应使用web push而非sse。

网页切后台时,SSE 连接不会自动暂停,而是被系统挂起或中断——浏览器会停止接收数据、丢弃事件,甚至直接关闭底层 TCP 连接。这不是“暂停”,而是不可靠的中断。前端无法真正“暂停并恢复”一个已断开的 SSE 流,但可以做到:切后台时不浪费资源,切回前台时快速验证并重建连接,同时保障关键状态不丢失。
切后台时主动释放连接,避免无效占用
单页应用中,用户切换标签页或 App 切到后台,EventSource 实例仍存活,服务端照常推送,客户端却收不到或堆积事件。这既耗带宽又占内存。
必须在路由离开或页面隐藏时显式关闭连接:
- React 中,在
useEffect清理函数里调用eventSource?.close() - Vue 2 用
beforeDestroy,Vue 3 用onBeforeUnmount - 同时监听
document.visibilitychange,当document.hidden === true时关闭当前 SSE 实例
不要依赖浏览器自动回收——它不保证及时性,也不通知服务端。
切回前台后不盲目重连,先验证服务端可达性
重建连接后,不能等 open 事件自然触发(可能卡住),需主动探测服务端是否就绪:
- 连接建立后,立即发一次轻量 HTTP GET 请求(如
/health?ts=${Date.now()}) - 若请求失败或超时(建议阈值 3–5 秒),说明服务端尚未恢复,暂不启用 SSE
- 若
EventSource.readyState在 8 秒内未变为1(OPEN),视为连接失败,可临时降级为低频轮询(如每 30 秒查一次)
这样避免“连上了却收不到消息”的假成功状态。
Java JDK 25 来自 OpenJDK 官方归档,版本为 JDK 25,本条下载地址已指向官方 Windows x64 zip 安装包直链,适合调试旧项目或兼容旧版 Java 运行环境。
本地缓存关键状态,弥补切后台期间的数据丢失
切后台期间可能丢失若干条事件(尤其是订单变更、未读数更新等),需业务层兜底:
- 收到每条 SSE 消息时,将核心字段(如
orderStatus、unreadCount)写入localStorage或IndexedDB - 页面重新聚焦时,对比本地缓存与当前服务端快照(可通过一次 GET 接口拉取最新状态)
- 对不一致项做合并或覆盖,确保 UI 显示最终一致结果
例如:用户切后台前看到“未读消息:3”,回来后发现服务端已是“5”,则更新为 5 并标记新消息为未读。
不依赖 SSE 做后台保活,该用 Web Push 就用 Web Push
SSE 本质依赖活跃页面上下文,标签页关闭或长期后台后必然失效。若需“关页后仍触达用户”,唯一合规方案是 Web Push + Service Worker:
- 页面在线时:用 SSE 推送高频、实时内容(聊天、进度条)
- 页面关闭后:由后端判断是否需强提醒,走 Web Push 发送系统级通知
- iOS/Safari 暂不支持 Web Push,需引导用户添加到主屏幕(PWA),或接受离线无通知的事实
SSE 不是后台通道,别把它当常驻服务用。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










