单页应用中SSE连接必须与路由生命周期严格对齐，核心是在路由离开前主动调用close()关闭；React在useEffect清理函数、Vue2在beforeDestroy、Vue3在onBeforeUnmount中执行；需按路由上下文精准管理多个实例，服务端应配合感知连接关闭并终止推送。
单页应用中，SSE 连接必须和路由生命周期严格对齐——它不会随页面切换自动销毁，不手动关就会持续收数据、占带宽、耗内存。核心动作就一个：路由离开前主动 close，而不是等浏览器或服务端“帮忙”。
组件卸载时显式关闭 EventSource
SSE 实例是长连接，不是普通变量，只要没调 .close()，它就一直活着。React、Vue 等框架的组件卸载并不等于连接释放。
- React：在
useEffect清理函数里调用eventSource?.close() - Vue 2：在
beforeDestroy钩子中关闭；Vue 3：用onBeforeUnmount - 不要把
EventSource声明在模块顶层或全局对象里，否则无法绑定到具体页面的生命周期
按路由上下文精准管理多个 SSE 实例
一个应用常有多个 SSE 流（如通知、订单、聊天），不能只靠“关掉所有”，得知道关的是哪个。
HISUI 前端框架开发指南（IRIS版）
下载
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
- 创建时打标记：
es.__routeContext = '/dashboard' - 路由守卫中（如
router.beforeEach）遍历已存在实例，对__routeContext匹配旧路径的执行.close() - 更健壮的做法是用
WeakMap存储route → eventSource映射，避免强引用阻碍垃圾回收
服务端配合做连接感知与推送终止
前端关了，服务端若还往这个连接发数据，就是无效带宽+资源浪费。需要双向协同：
立即学习“Java免费学习笔记（深入）”；
- 客户端关闭前可发轻量终结请求（如
POST /api/sse/close?session=xxx），服务端据此清掉对应会话和推送任务 - 服务端监听底层响应流的
close事件（如 Node.js 的res.on('close')），及时释放内存和连接池资源 - 每个 SSE 请求带上
X-Route-Path或Referer，服务端按当前活跃路由动态过滤推送内容
防止重复连接与重连失控
快速来回切换路由容易触发多次新建连接，旧连接还没关，新连接又建起来。
- 封装 SSE 工厂函数，内部用
Map缓存按路径或类型区分的实例，优先复用已有连接 - 设置最小重连间隔（如
eventSource.readyState === 0时延迟 2s 再尝试），避免网络抖动或路由频繁跳转引发雪崩式重连 - 避免在组件渲染函数或响应式依赖中直接 new EventSource，应放在初始化或副作用逻辑里
