nuxt3で Websocket / SSE(Server-sent events) client 実装

nuxt3で、サーバーと常時接続通信であるwebsocketやsseのclient実装

結論として、@vueuse/core を使うことで、メチャクチャ簡単かつシンプルに実装できました。
これまで、ごちゃごちゃと分かりづらくなりがちだった部分なので、感動しました。

公式参照：
https://vueuse.org/core/useWebSocket/
https://vueuse.org/core/useEventSource/

@vueuse/coreを入れる

npm i -D @vueuse/core

websocketの例

これまでwebsocket実装のとき、
onXXXXで、再接続やエラー時のリカバリ処理を書いたり、サーバー側で死活監視を行うためにサーバーへ一定間隔でメッセージを送信するping処理を自分で書くことが多かったですが、
optionにパラメータを記述することで、全部自動でやってくれます！

openやcloseを手動で行うためのメソッドもuseWebSocketから取得できるので、
必要に応じて手動の処理を追加も可能です。

index.vue

<script setup>
import { useWebSocket } from '@vueuse/core';

const socketHandler = {
  autoReconnect: true,
  heartbeat: {
    message: 'ping',
    interval: 5000,
    pongTimeout: 5000,
  },
  onOpen: (e, open) => {
    console.log('onOpen: ', e, open);
  },
  onMessage: (e, msg) => {
    console.log('onMessage: ', e, msg.data);
  },
  onError: (e, err) => {
    console.log('onError: ', e, err);
  },
  onClose: (e, close) => {
    console.log('onClose: ', e, close);
  },
};
const {status, data, send, open, close } = useWebSocket(WEBSOCKET_URL, socketHandler);
</script>

<template>
<div>
  <div>
    <div>status: {{ status }}</div>
    <div>data: {{ data }}</div>
  </div>
</div>
</template>

sseの例

sseは、websocketと違って規格自体に再接続の機構などが備わっているので、
もう少しシンプルになります。

これだけで、勝手に再接続処理もやってくれます。
手動で操作するときは、closeメソッドを使うことで実装可能です。

index.vue

<script setup>
import { useEventSource } from '@vueuse/core';
const { status, data, error, close } = useEventSource('https://event-source-url');
</sciript>

<template>
<div>
  <div>
    <div>status: {{ status }}</div>
    <div>data: {{ data }}</div>
    <div>error: {{ error }}</div>
  </div>
</div>
</template>