JavaScript 中 SSE 怎么配合状态管理更新实时UI-js教程-PHP中文网

sse仅负责服务端到浏览器的单向数据推送，不管理状态；前端需主动将接收的数据与状态关联并触发ui更新。推荐用自定义hook封装连接、解析与错误处理，并通过回调注入状态更新逻辑，结合react/vue响应式机制或状态库统一管理。

javascript 中 sse 怎么配合状态管理更新实时ui

SSE 本身不管理状态，它只负责把服务端推送的数据“送过来”。真正让 UI 实时更新的，是前端把收到的数据和当前状态关联起来，并触发视图刷新。关键不在“怎么接数据”，而在于“接完后怎么用”。

明确 SSE 的角色边界

SSE 是一个单向通道：服务端 → 浏览器。它不保存状态、不处理冲突、也不决定 UI 怎么变。它的职责就是稳定地把 JSON 消息（比如 {"type":"progress","value":65} 或 {"type":"done","result":"xxx"}）推送到前端。

所以状态管理必须由你主动设计——要么用 React/Vue 的响应式机制，要么用 Zustand、Pinia、Jotai 等状态库，要么用原生 useState + useEffect 组合。

在 React 中用 Hook 封装 SSE 并联动状态

推荐封装一个自定义 Hook，把连接、解析、错误处理、重连都收拢，再通过参数把状态更新逻辑注入进去：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

Hook 内部用 useRef 存 EventSource 实例，避免重复创建
接收一个 onMessage 回调，由外部传入状态更新函数（如 setState 或 store.update）
消息到达后，统一解析为对象，再交由回调处理，不直接操作 DOM 或 state
监听 onerror 和 onopen，可选地暴露连接状态供 UI 显示“重连中…”

示例片段：

function useSSE(url, onMessage) {
  const esRef = useRef(null);

  useEffect(() => {
    const es = new EventSource(url);
    esRef.current = es;

    es.onmessage = (event) => {
      try {
        const data = JSON.parse(event.data);
        onMessage(data); // ✅ 交给业务逻辑决定怎么更新状态
      } catch (e) {
        console.warn('Invalid SSE message:', event.data);
      }
    };

    return () => es.close();
  }, [url, onMessage]);

  return esRef.current;
}

// 在组件中使用
function TaskProgress() {
  const [progress, setProgress] = useState(0);
  const [status, setStatus] = useState('pending');

  useSSE('/api/task/123', (data) => {
    if (data.type === 'progress') setProgress(data.value);
    if (data.type === 'done') {
      setStatus('success');
      setProgress(100);
    }
  });

  return <div>进度：{progress}% — {status}</div>;
}