Nuxt.js で Socket.IO を使う

kingyo222

6年前

Toggle

はじめに

本投稿では、Nuxt.js で Socket.IO を使ってサーバと通信するサンプルを作成します。
Nuxt.js とサーバ側は同一のエンドポイントで動作する物となりますので皆さんの参考になればと思います。

サンプルの確認

世の中便利なものですでにサンプルを作成してくれている方がいらっしゃいます。
以下のサンプルは、Nuxt.js、Express、Socket.io のサンプルになりますのでついでに Rest.API の実装も行えます。

Git 取得

git clone https://github.com/alexitaylor/Nuxt-Express-Socket.io-Template
cd Nuxt-Express-Socket.io-Template

依存関係解決

$ npm install --save pinkie
$ npm install --save axios
$ npm install

以下のようなエラーが出たため、事前に pinkie / axios を入れています。

npm ERR! code E404
npm ERR! 404 Not Found: pinkie@https://registry.npmjs.org/pinkie/-/pinkie-2.0.5.tgz

 ERROR  Failed to compile with 1 errors                                                                         18:14:44

This dependency was not found:

* axios in ./plugins/axios.js

To install it, you can run: npm install --save axios

サンプル実行

npm run dev

以下のような画面が表示されればサーバが起動。

 DONE  Compiled successfully in -5297ms

画面表示

ブラウザから「 http://localhost:3000/ 」にアクセスしてください。

「CHAT」を選択して画面遷移

適当に文字を入力すると、Socket.IO を使ったチャットのサンプルが実行できます。

複数ブラウザ立ち上げて、各ブラウザで入力すれば動作確認できますので是非お試しください。

ソースコードを読み解く

サーバ側

以下、ソースコードにて Socket.IO との通信部分が実装されています。

「socket.on(‘last-messages’」の部分が、画面初期表示時に履歴５０件を取得する部分
「socket.on(‘send-message’」の部分が、各クライアントが入力したメッセージを、すべてのクライアントにブロードキャストする部分

“`javascript:server/server.js
// Socket.io
var messages = []
io.on('connection', (socket) => {
socket.on('last-messages', function (fn) {
fn(messages.slice(-50))
})
socket.on('send-message', function (message) {
messages.push(message)
socket.broadcast.emit('new-message', message)
})
})

<pre><code><br />## クライアント側

– 以下が、初期表示時にメッセージを５０件取得して画面に表示する部分

“`javascript:pages/chat/inedx.vue
socket.emit(‘last-messages’, function (messages) {
callback(null, {
messages,
message: ”
})
})

以下が、メッセージを入力してサーバに送信する部分

“`javascript:pages/chat/inedx.vue
socket.emit('send-message', message)

<pre><code><br />- 以下が、サーバからメッセージを受信して画面に表示する部分

“`javascript:pages/chat/inedx.vue
socket.on(‘new-message’, (message) => {
this.messages.push(message)
})

所感（まとめ）

Templateを作っていただけてる方に感謝、５分ほどで確認できるので環境構築の手間が短縮化できてよいですね。
自力で必要なコンポーネントを組み込むのは大変なので活用していければよいかと思いますね。

Nuxt.js に関しては Nuxt-Community が様々なテンプレートを出しているのでどんな物があるのか知っていると便利ですね。
https://github.com/nuxt-community