VueUse 中文网

主题

useEventSource ​

EventSource 或 服务器发送的事件 实例打开与 HTTP 服务器的持久连接，该服务器以文本/事件流格式发送事件。

¥An EventSource or Server-Sent-Events instance opens a persistent connection to an HTTP server, which sends events in text/event-stream format.

用法 ​

¥Usage

js
import { useEventSource } from '@vueuse/core'

const { status, data, error, close } = useEventSource('https://event-source-url')

请参阅 类型声明 了解更多选项。

¥See the Type Declarations for more options.

命名事件 ​

¥Named Events

你可以使用第二个参数定义命名事件

¥You can define named events with the second parameter

ts
import { useEventSource } from '@vueuse/core'

const { event, data } = useEventSource('https://event-source-url', ['notice', 'update'] as const)
js
import { useEventSource } from '@vueuse/core'
const { event, data } = useEventSource('https://event-source-url', [
  'notice',
  'update',
])

immediate ​

默认启用。

¥Enable by default.

调用可组合函数时立即建立连接。

¥Establish the connection immediately when the composable is called.

autoConnect ​

默认启用。

¥Enable by default.

如果 url 作为 ref 提供，则当 url 发生更改时，它会自动重新连接到新的 url。

¥If url is provided as a ref, when the url changes, it will automatically reconnect to the new url.

发生错误时自动重新连接 ​

¥Auto Reconnection on Errors

出现错误时自动重新连接（默认禁用）。

¥Reconnect on errors automatically (disabled by default).

js
const { status, data, close } = useEventSource('https://event-source-url', [], {
  autoReconnect: true,
})

或者对其行为进行更多控制：

¥Or with more controls over its behavior:

js
const { status, data, close } = useEventSource('https://event-source-url', [], {
  autoReconnect: {
    retries: 3,
    delay: 1000,
    onFailed() {
      alert('Failed to connect EventSource after 3 retries')
    },
  },
})