NuxtJS

Nuxt.jsでsocket.ioを使うー nuxt-socket-ioライブラリ

Nuxt.jsでsocket.ioを使ったアプリケーションを作る続きです。

前回、Nuxt.jsでsocket.ioライブラリを使うやり方について整理してみました。socket.ioライブラリを直接使う方法で、3つのアプローチで試してみました。

Nuxt.jsでsocket.ioを使うやり方

今回は、Nuxt.jsでsocket.ioライブラリをすぐにアプリ内から使うことができる『nuxt-socket-io』というライブラリを使ってみたいと思います。

外部ページ(nuxt-socket-io):https://nuxt-socket-io.netlify.app

nuxt-socket-io

nuxt-socket-ioライブラリは、socket.ioを使ったサーバ側、クライアント側のプログラムを実装しやすくするためのインターフェースを提供してくれています。具体的には、以下の特徴があるようです(公式Docより)。

  • 複数のio socketのconfiguration
  • socket毎のnamespaceに対応したconfiguration
  • socket.ioのサーバ定義の自動登録
  • socket ioステータス
  • 自動エラーハンドリング
  • デバッグロギング
  • 自動teardown
  • vuexモジュール機能
  • ダイナミックAPIサポート
  • Nuxtライタイムconfigのサポート
  • ミドルウェアの自動登録

nuxt-socket-ioライブラリのサーバ側は内部的にはNuxtのlistenフックを使って実装されているようです。自分でlistenフックを使って実装するのもよいと思いますが、ライブラリを使うとconfiurationや利用が少し楽になるかと思います。

nuxt-socket-ioのインストール

使用方法

最小限の設定は以下のような感じになるかと思います。

nuxt.config.js

  • modulesでnuxt-socket-ioを定義します。これにより、プラグインとして$nuxtSocketが使えるようになるとともに、サーバ側でのsocket.ioライブラリの利用が可能になります。
  • 設定は、modulesのオプション、または、io: {} 、または、RuntimeConfig、$nuxtSocketの引数で渡せます。サーバ側の定義は、modulesのオプションまたはioで定義します。

サーバ側

サーバ側の定義は、デフォルトで以下のパスに定義ファイルを置くことになっています。このパスは、io: { servers: ... } オプションで変えることができます。server/io.jsはデフォルトのネームスペースを指しています。

server/io.js

  • middlewareは、io.useに渡されます。
  • setIOは、ioオブジェクトの生成後に呼ばれるフックです。
  • default functionは、socket.onのハンドラになります。関数名がイベント名になります。返り値は、ackに渡されます。

socketに対して自分でハンドラ定義をしたい場合は、以下のようにすると可能ではありますが、基本はreturnで関数定義が返されることを期待されている?ようです。

server/io.js

クライアント側

page/index.vue

チャネル

異なるネームスペースを使用する場合の例です。

server/io/chat.js

定義はメインネームスペース(/)の場合と同じです。

page/index.vue

参考リンク

  • https://nuxt-socket-io.netlify.app
  • https://www.npmjs.com/package/nuxt-socket-io
  • https://github.com/richardeschloss/nuxt-socket-io

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください