useWebSocket

リアクティブな WebSocket クライアント。

使用法

import { useWebSocket } from '@vueuse/core'

const { status, data, send, open, close } = useWebSocket('ws://websocketurl')

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

immediate

デフォルトで有効。

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

autoConnect

デフォルトで有効。

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

autoClose

デフォルトで有効。

beforeunload イベントがトリガーされたときや、関連するエフェクトスコープが停止されたときに自動的に close() を呼び出します。

autoReconnect

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

import { useWebSocket } from '@vueuse/core'
// ---cut---
const { status, data, close } = useWebSocket('ws://websocketurl', {
  autoReconnect: true,
})

または、動作をより細かく制御する場合：

import { useWebSocket } from '@vueuse/core'
// ---cut---
const { status, data, close } = useWebSocket('ws://websocketurl', {
  autoReconnect: {
    retries: 3,
    delay: 1000,
    onFailed() {
      alert('3回の再試行後にWebSocketの接続に失敗しました')
    },
  },
})

明示的に close() を呼び出すと、自動再接続はトリガーされません。

heartbeat

接続をアクティブに保つために、一定時間ごとに小さなメッセージ（ハートビート）を送信するのが一般的です。この関数では、それを行うための便利なヘルパーを提供します：

import { useWebSocket } from '@vueuse/core'
// ---cut---
const { status, data, close } = useWebSocket('ws://websocketurl', {
  heartbeat: true,
})

または、より細かい制御を行う場合：

import { useWebSocket } from '@vueuse/core'
// ---cut---
const { status, data, close } = useWebSocket('ws://websocketurl', {
  heartbeat: {
    message: 'ping',
    interval: 1000,
    pongTimeout: 1000,
  },
})

サブプロトコル

使用する1つ以上のサブプロトコルのリスト。この場合、soapとwampです。

import { useWebSocket } from '@vueuse/core'
// ---cut---
const { status, data, send, open, close } = useWebSocket('ws://websocketurl', {
  protocols: ['soap'], // ['soap', 'wamp']
})