页面级精准推送需按路由启停eventsource：进入页面时初始化带上下文参数的连接，离开时主动关闭；按事件类型订阅，支持url变更时重连或复用。
直接用 EventSource 监听全局通知，再结合路由守卫或组件生命周期控制连接启停，就能实现页面级精准推送——不浪费资源，也不漏消息。
页面加载时建立 SSE 连接
在进入需要通知的页面（比如订单详情页、消息中心）时，初始化 EventSource。避免全局常驻连接，防止用户切换到无关页面后还在接收无用事件。
- 推荐在 Vue Router 的
onBeforeRouteEnter或 React Router 的useEffect（依赖路由参数）中创建连接 - URL 带上当前页面上下文，例如：
/api/notify/stream?target=order-12345，后端可据此过滤推送范围 - 设置
withCredentials: true（如需携带 Cookie 登录态），并处理跨域响应头（Access-Control-Allow-Origin+Access-Control-Allow-Credentials）
路由离开时主动关闭连接
连接未关闭会导致内存泄漏，还可能在后台页面继续触发 UI 更新，造成状态错乱。
- Vue 中可在
beforeUnmount或onBeforeRouteLeave调用eventSource.close() - React 中在
useEffect清理函数里关闭：return () => eventSource?.close() - 注意：不要只依赖浏览器自动断开，主动关闭更可控；关闭后将
eventSource置为null，避免重复调用
按页面类型区分事件处理逻辑
同一个 SSE 流可能推送多种事件（orderStatus、paymentResult、comment），不同页面只关心其中一部分。
- 利用
eventSource.addEventListener('orderStatus', handler)订阅特定事件名，而非全量监听message - 在订单页只处理
orderStatus和shippingUpdate；在评论页只响应newComment - 服务端发送时明确指定
event: orderStatus，前端解耦清晰，维护成本低
支持路由参数变更下的连接复用或重建
比如从 /order/1001 切换到 /order/1002，是否要重连？取决于业务需求。
- 若两个订单互不影响，建议关闭旧连接、新建带新 ID 的连接（URL 参数更新）
- 若后端已支持按用户聚合推送，且前端能通过
data中的orderId过滤，则可复用连接，仅更新本地监听逻辑 - 注意：URL 变更后
EventSource不会自动重连，必须手动close()+ 新建实例
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
