跳到主要内容

useEventSource

useEventSource 是一个 hook，允许您订阅 EventSource 并实时接收更新。

实时编辑器
function Demo() {
  const { status, data, error, close, open } = useEventSource(
    "https://sse.dev/test",
    [],
    {
      immediate: false,
    }
  );

  return (
    <div>
      <div>Status: {status}</div>
      <div>Data: {JSON.stringify(data)}</div>
      <div>Error: {error}</div>
      <button onClick={open}>open</button>
      <button onClick={close}>Close</button>
    </div>
  );
}
结果
Loading...

API​

UseEventSourceOptions​

参数名描述类型默认值
immediate立即打开连接, 默认打开boolean-
autoReconnect连接断开时自动重连UseEventSourceAutoReconnectOptions-

UseEventSourceAutoReconnectOptions​

参数名描述类型默认值
retries重试次数，如果是函数，会调用来判断是否重试number | (() => boolean)-
delay重连前的延迟时间number-
onFailed重连失败时的回调() => void-

UseEventSourceReturn​

参数名描述类型默认值
eventSourceRefEventSource 实例React.MutableRefObject<EventSource | null> (必填)-
data接收到的数据string | null (必填)-
error发生的错误Event | null (必填)-
status连接的状态EventSourceStatus (必填)-
lastEventId最后的事件 IDstring | null (必填)-
event事件名string | null (必填)-
close关闭连接() => void (必填)-
open打开连接() => void (必填)-

EventSourceStatus​

export type EventSourceStatus = 'CONNECTING' | 'CONNECTED' | 'DISCONNECTED';