はじめに
こんにちは、のんびりエンジニアのたっつーです。
ブログを運営しているのでよろしければ見てください。
本投稿では、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'」の部分が、各クライアントが入力したメッセージを、すべてのクライアントにブロードキャストする部分
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)
})
})
クライアント側
- 以下が、初期表示時にメッセージを５０件取得して画面に表示する部分
pages/chat/inedx.vue
socket.emit('last-messages', function (messages) {
callback(null, {
messages,
message: ''
})
})
- 以下が、メッセージを入力してサーバに送信する部分
pages/chat/inedx.vue
socket.emit('send-message', message)
- 以下が、サーバからメッセージを受信して画面に表示する部分
pages/chat/inedx.vue
socket.on('new-message', (message) => {
this.messages.push(message)
})
所感（まとめ）
Templateを作っていただけてる方に感謝、５分ほどで確認できるので環境構築の手間が短縮化できてよいですね。
自力で必要なコンポーネントを組み込むのは大変なので活用していければよいかと思いますね。
Nuxt.js に関しては Nuxt-Community が様々なテンプレートを出しているのでどんな物があるのか知っていると便利ですね。
https://github.com/nuxt-community
よければ ブログ「初心者向けUnity情報サイト」の方にも色々記載しているのでぜひご参照いただければと思います。