在 React 中使用 EventSource 消费 SSE 流

new EventSource(url) 会创建到指定 URL 的 SSE 连接。浏览器会立即发起一个带有 Accept: text/event-stream 标头的 HTTP GET 请求。服务器会保持该连接打开并持续发送事件。EventSource 是浏览器原生 API，基本使用无需任何库。

EventSource 有三种 ready 状态：0 (CONNECTING)——正在建立或重新建立连接；1 (OPEN)——连接已建立，事件正在传输；2 (CLOSED)——连接已关闭，且不会重新连接。请检查 eventSource.readyState 以确定当前状态。

对于没有显式事件类型的服务器事件，eventSource.onmessage 处理程序会被触发（服务器发送不包含 event: 字段的 data: ...）。处理程序会接收一个事件对象，其中 event.data 是字符串形式的负载。服务器通常会使用 JSON.stringify 将数据转换为字符串，因此您接收后需要使用 JSON.parse 对其进行解析。

服务器可以发送命名事件：event: userJoined data: {"userId": "123"} 。在浏览器中，请使用 eventSource.addEventListener('userJoined', handler) 进行监听。这样可以在一条 SSE 连接上复用多种事件类型——每种事件类型都有自己的处理程序，使代码更加清晰有序。

SSE 数据以字符串形式到达。对于结构化数据，服务器发送 JSON.stringify(payload)，客户端进行解析：const data = JSON.parse(event.data)。请务必将 JSON.parse 放在 try/catch 中，以便优雅地处理服务器发送的格式错误 JSON，记录错误日志并跳过格式错误的事件。

请在 useEffect 中创建和关闭 EventSource：组件挂载时创建连接，附加事件处理程序，并返回一个调用 eventSource.close() 的清理函数。如果没有清理函数，组件卸载、用户离开当前页面或 effect 因依赖项变化而重新运行时，连接就会泄露。

在 eventSource.onmessage 处理程序中，更新 React 状态以反映新数据：setMessages(prev => [...prev, JSON.parse(event.data)])。请使用 setState 的函数式形式来避免闭包获取旧状态的问题——事件处理程序会捕获初始状态值，而函数式更新可以确保您始终基于最新状态进行更新。

EventSource 会在连接因网络错误或服务器重启而断开时自动重新连接。浏览器会等待一小段时间（通常为 3 秒，可由服务器通过流中的 retry: 3000 进行配置），然后重新连接。您无需实现重连逻辑——该功能已内置于 EventSource 接口中。

EventSource 会跟踪最近接收的事件 ID（服务器通过流中的 id: 123 进行设置）。重新连接时，浏览器会自动在 Last-Event-ID HTTP 请求头中发送此 ID。设计完善的服务器会利用此 ID 重放遗漏的事件，确保重连期间不会丢失任何事件。

EventSource 不直接支持自定义请求头。进行身份验证时，请使用 Cookie（new EventSource(url, { withCredentials: true }) 会发送 Cookie），或将身份验证令牌作为 URL 查询参数传入。如果需要授权请求头，请改用获取接口，并使用 ReadableStream 手动处理服务器发送事件响应。

EventSource 遇到错误时，错误处理程序会触发。readyState 将为 CONNECTING（如果会重试）或 CLOSED（如果不会重试）。在错误处理程序中，请检查 readyState，以区分临时网络错误（会自动重试）和永久性失败（服务器返回了非 200 状态）。对于永久性错误，请关闭连接并通知用户。

当 EventSource 连接因网络错误而断开时，会发生什么？

new EventSource(url) 会创建一个服务器发送事件连接，其 readyStates 为 CONNECTING、OPEN 和 CLOSED。消息处理程序负责处理通用事件；addEventListener 负责处理命名事件类型。JSON.parse(event.data) 用于提取结构化载荷。在 useEffect 中创建并清理 EventSource。自动重连功能已经内置——EventSource 会在网络错误后重试，并通过最后事件 ID 机制重放遗漏的事件。您可以通过 Cookie（withCredentials）或 URL 查询参数进行身份验证。