关键在于状态与事件流自然对齐：SSE负责稳定推送，状态库驱动UI并保证更新可预测；二者通过生命周期、事件解析、状态更新三者解耦联动实现协同。

关键不在“接数据”，而在“怎么让状态和事件流自然对齐”。SSE 负责稳定推送，状态管理库负责响应式驱动 UI 并保证更新路径可预测。两者协同的核心是连接生命周期、事件解析、状态更新三者解耦又联动。

封装可管理的 EventSource 实例

避免直接 new EventSource()，否则容易引发重复连接、监听器残留或 setState on unmounted component 等问题：

• 用类或自定义 Hook 封装，内部用 useRef / ref 保存单例实例，确保整个应用只有一条 SSE 连接
• 统一监听 onopen、onmessage、onerror、onclose，并将 readyState 映射为 connectionStatus（如 'connecting' | 'connected' | 'failed'），同步到全局状态供 UI 消费
• 断开时主动调用 removeEventListener 清理所有监听器，尤其在 React 中需配合 useEffect cleanup
• 支持手动 close() 和重连控制（如 retryDelay、maxRetries），失败超限时触发降级逻辑（如切换轮询或禁用交互）

消息解析与状态更新严格分离

收到的 raw data 是字符串，不能直接塞进 store —— 必须先校验、转换、去重，再交由状态管理库处理：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• onmessage 回调里只做基础解析：trim、JSON.parse、检查 data 字段是否存在、过滤空值或重复时间戳
• 把解析逻辑抽成纯函数，例如 parseNotification(raw): NotificationItem，返回标准化对象，不依赖任何外部状态
• 高频事件（如进度条更新）建议节流或取最新一条合并，避免 store.dispatch 频繁触发 re-render
• dispatch 的 action 类型应明确语义，如 { type: 'NOTIFICATION_ADDED', payload: item }，便于调试和中间件拦截

状态库侧预留响应钩子，支持被动+主动双模式

SSE 推送本身不触发跳转、弹窗、滚动等副作用，这些必须由状态管理库承接并执行：

立即学习“Java免费学习笔记（深入）”；

• 在 Zustand 中用 subscribe 监听特定字段变化；在 Pinia 中用 $onAction 捕获 commit；在 Redux 中用中间件响应 action.type
• 定义副作用型 action，例如 onNewComment(comment)，内部既调用 store.setState 更新列表，也调用 document.getElementById('last').scrollIntoView()
• 对乐观更新场景（如发送后立即显示“已提交”），先本地变更状态 + 标记 pending，等 SSE 返回 confirm 事件后再修正为 success 或 error
• 所有副作用操作需判断当前组件是否仍挂载（尤其 React 中），避免内存泄漏或警告

暴露连接健康信号，让 UI 可见可反馈

用户不需要知道底层是 SSE 还是轮询，但必须感知连接是否可靠：

• 状态中维护 connectionStatus、lastEventTime、reconnectCount、isReconnecting 等元信息
• UI 层订阅 connectionStatus，显示“正在连接…”、“离线中，请稍候”或禁用提交按钮
• 连续失败 N 次后，自动切换 fallback 方案（如 fetch + exponential backoff），同时记录错误日志供排查
• 允许用户手动触发重连（如点击“重试”按钮），并重置重连计数器