在单页应用里，SSE 连接不能“开了就不管”，必须和页面或路由的生命周期主动绑定，并在退出时显式关闭。

放到具体框架里看，React 通常通过 useEffect 的清理函数处理，Vue2 对应 beforeDestroy，Vue3 则是 onBeforeUnmount。

如果项目里存在多实例场景，还得结合路由上下文做更精确的管理。与此同时，服务端也要同步配合：监听连接关闭事件，及时终止推送，这一步不能省。

单页应用里管理 SSE 连接生命周期，关键不是“等它自己断”，而是主动控制——连接必须和当前页面/路由的存续状态严格绑定。

不手动关，它就在后台一直收数据、占内存、发请求，哪怕用户早已离开那个页面。

路由切换前必须显式关闭 EventSource

EventSource 不会随组件卸载自动销毁，浏览器也不会替你清理。

只要没调 .close()，它就持续活着。

• React：在 useEffect 清理函数 中执行 eventSource.close()
• Vue 2：在 beforeDestroy 钩子中关闭
• Vue 3：用 onBeforeUnmount 执行关闭逻辑
• 避免把 EventSource 声明在模块顶层或全局对象里，否则无法绑定到具体页面生命周期

按路由上下文精准管理多个实例

一个应用常有多个 SSE 流，如通知、订单、聊天。

这时不能笼统“全关掉”，而要明确当前关的是哪个实例。

• 创建时打标记：es.__routeContext = '/dashboard'
• 路由守卫中，如 router.beforeEach，遍历已存在实例，对 __routeContext 匹配旧路径 的执行 .close()
• 更健壮的做法是用 WeakMap 存储 route → eventSource 映射，避免强引用阻碍垃圾回收

服务端配合感知连接关闭并终止推送

前端关了，服务端若还往这个连接发数据，就是无效带宽 + 资源浪费。

前后端必须双向协同。

• 客户端关闭前可发轻量终结请求，如 POST /api/sse/closesession=xxx，服务端据此清掉对应会话和推送任务
• 服务端监听底层响应流的 close 事件，如 Node.js 的 res.on('close')，及时释放内存和连接池资源
• 每个 SSE 请求带上 X-Route-Path 或 Referer，服务端按当前活跃路由动态过滤推送内容

防止重复连接与重连失控

快速来回切换路由，容易触发多次新建连接。

常见情况是旧连接还没关，新连接又建起来。

• 封装工厂函数，用 Map 缓存按路径/业务类型区分的实例，确保每次只启一个、关一个
• 加最小重连间隔，如 1.5 秒，防止因状态混乱触发高频重建
• 在 visibilitychange 事件中判断页面是否进入后台，后台时不主动重建，前台恢复时再检查连接状态并按需重连

核心结论

单页应用中的 SSE 生命周期管理，重点不是被动等待断开，而是主动绑定页面或路由状态。

• 前端要在组件卸载、页面退出、路由切换时显式关闭连接
• 多实例场景下要结合路由上下文精确管理
• 服务端也要监听连接关闭事件，及时终止推送

只有前后端同时做好连接回收，才能避免后台持续收数据、重复连接、资源浪费等问题。

《夸克》非常好用的免费AI浏览器

下载APP查看