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

NuxtJS

https:/nuxtjs.org/

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のインストール

npm i nuxt-socket-io

使用方法

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

nuxt.config.js

// nuxt.config.js
{
  modules: [
    ['nuxt-socket-io']
  ],

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

サーバ側

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

server/io.js

export const middlewares = {
  something(socket, next) {
    // do something
    next()
  },
}

// io.of("/")のio

export function setIO(io) {
  // ioオブジェクト生成後に呼ばれるフック
}

export default function(socket, io) {
  // connectionイベントで呼ばれるフック
  return Object.freeze({
    hello(data) {
      // acknowledgeのcallbackに渡される ack(return value)
      return data + 'world'
    },
  })
}
  • middlewareは、io.useに渡されます。
  • setIOは、ioオブジェクトの生成後に呼ばれるフックです。
  • default functionは、socket.onのハンドラになります。関数名がイベント名になります。返り値は、ackに渡されます。

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

server/io.js

export default function(socket, io) {
  socket.on('hello', (data, ack) => {
    ack(data + ' world')
  })
  return {} // socket.onで定義して、ここでは空のオブジェクトを返す
}

クライアント側

page/index.vue

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      socket: null,
      message: '',
    } 
  },

  mounted() {
    this.socket = this.$nuxtSocket({ channel: '/' })

    this.socket.emit('hello', 'hello', (resp) => {
      this.message = resp
    })
  },
}
</script>

チャネル

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

server/io/chat.js

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

export const middlewares = {
  something(socket, next) {
    // do something
    next()
  },
}

// io.of('/chat')
export function setIO(io) {
  // do something
}

export default function Svc(socket, io) {
  return Object.freeze({
    hello(data) {
      // acknowledge
      return data + 'world'
    },
  })
}

page/index.vue

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      socket: null,
      message: '',
    }
  },

  mounted() {
    this.socket = this.$nuxtSocket({ channel: '/chat' })

    this.socket.emit('hello', 'hello', (resp) => {
      this.message = resp
    })
  },
}
</script>

参考リンク

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

byebyehaikikyou

日記やIT系関連のネタ、WordPressに関することなど様々な事柄を書き付けた雑記です。ITエンジニア経験があるのでプログラミングに関することなどが多いです。

シェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントする

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