Nuxt3でwebsocketを使う

NuxtJS
https://pixabay.com/images/id-1452987/
この記事は約3分で読めます。

Nuxt3のリリースを見ると、SummerからAutumnになっていましたね。リリースが待ち遠しい。。

さて、Nuxt3でwebsocketを使うにはどうするかを調べていたところ、Nuxt2とは少し異なるようでした。本記事では、Nuxt3でwebsockt(今回はsocket.io)を使う方法について書きます。

注:記事作成時点ではRC版で開発も活発なため(githubにもwebsocktについてのissueがある)内容は変わる可能性がありますのでご注意ください。

 本記事作成時、Nuxt3はまだベータリリースのため動作が変わる可能性もあります。

Nuxtとsocket.ioのインストール

まずは、最新のnuxtとsocket.ioをインストールします。

今回の環境は以下のようになっています。

  • macOS 10.15.7
  • NodeJS 16.15.0
  • npm 8.19.2
  • nuxt3 rc11
    • builder vite
    • preset node-server
    • ssr
  • socket.io 4.5.2

socket.ioの初期化ポイント

nuxt2と異なり、nuxt3ではlistenフックが開発モード時にしか呼ばれないようです。ビルドするとnitroのpresetのエントリーポイントが生成されますが、node-serverプリセットには探す限りlistenフックなるものが見あたりませんでした。よって、本番用ビルドでは別のsocket.ioの初期化ポイントを模索する必要がありそうです。

以下のdiscussionsが参考になります。

Socket.io implementation (temporary) · Discussion #1189 · nuxt/framework
Since we don't have access to the Nuxt instance as we did in Nuxt 2, here's a working example if you're not gonna deploy into a serverless platform:...

上記のdiscussionsを見ると、productionモードではAPIのミドルウェアの中で初期化できそうだとなっているように見えます(ここについては今後変わる可能性もありそうなのでご注意ください)。

以下、presetはnode-serverとして試してみます。

ビューの準備

App.vueを以下のように準備します。

簡素ですが、今回作成するビューは以下のような見た目になります。

devモード時

devモード時はlistenフックが効くので、moduleでlistenフックを使って初期化してみます。以下のようにしてみます。

続いてnuxt.config.tsでモジュールのロードを設定します。

productionモード時

こちらはグローバルにアクセスできるオブジェクト参照としてglobalThisを使うこととします。

参考リンク

コメント

タイトルとURLをコピーしました