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

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

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

Nuxt.jsでWebSocket、今回はsocket.ioを使う方法についての備忘録です。他によいアプローチがあるかもしれません。他の方の事例を参考にしながら、自分なりに整理してみました。以下の３つのアプローチで記述してみます。 mod...

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

外部ページ（nuxt-socket-io）：https://nuxt-socket-io.netlify.app

nuxt-socket-io
nuxt-socket-ioのインストール
使用方法
1. サーバ側
2. クライアント側
チャネル
参考リンク

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

1	npm i nuxt-socket-io

使用方法

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

nuxt.config.js

// nuxt.config.js
{
modules: [
['nuxt-socket-io']
],
io: {
sockets: [
{
url: 'http://localhost:3000',
},
],
}
}

// 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'
},
})
}

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で定義して、ここでは空のオブジェクトを返す
}

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>

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

</template>

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'
},
})
}

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>

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

</template>

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