useEventSource

EventSource または Server-Sent-Events インスタンスは、HTTPサーバーへの持続的な接続を開き、text/event-stream 形式でイベントを送信します。

使用法

import { useEventSource } from '@vueuse/core'

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

詳細なオプションについては、型宣言を参照してください。

名前付きイベント

2番目のパラメータで名前付きイベントを定義できます。

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

immediate

デフォルトで有効。

このコンポーザブルが呼び出されたときに、すぐに接続を確立します。

autoConnect

デフォルトで有効。

url が ref として提供される場合、url が変更されると自動的に新しい url に再接続します。

エラー時の自動再接続

エラー時に自動的に再接続します（デフォルトでは無効）。

import { useEventSource } from '@vueuse/core'
// ---cut---
const { status, data, close } = useEventSource(
  'https://event-source-url',
  [],
  {
    autoReconnect: true,
  }
)

または、その動作をより詳細に制御する場合：

import { useEventSource } from '@vueuse/core'
// ---cut---
const { status, data, close } = useEventSource(
  'https://event-source-url',
  [],
  {
    autoReconnect: {
      retries: 3,
      delay: 1000,
      onFailed() {
        alert('3回の再試行後にEventSourceへの接続に失敗しました')
      },
    },
  }
)

データのシリアライズ

シリアライズ関数を使用して、受信データにカスタム変換を適用します。

import { useEventSource } from '@vueuse/core'
// ---cut---
const { data } = useEventSource(
  'https://event-source-url',
  [],
  {
    serializer: {
      read: rawData => JSON.parse(rawData),
    },
  }
)

// サーバーが送信する場合: '{"name":"John","age":30}'
// data.value は次のようになります: { name: 'John', age: 30 }