Nuxt.jsでWebSocketを使ってみる。
バックエンドはexpress-templateを使ってExpressで用意する。(Nuxt.jsはWebSocketのクライアントとして使う)
サーバ側
nuxt-expressテンプレートを使っていることを前提とする。
ExpressでWebSocketを使えるように、 express-ws
を追加する。
$ npm install --save express-ws
WebSocket用のエンドポイントを用意する。
server/index.js
を修正。
import express from 'express' import { Nuxt, Builder } from 'nuxt' // expressWsを使う import expressWs from 'express-ws' const app = express() const host = process.env.HOST || '127.0.0.1' const port = process.env.PORT || 3000 // WebSocket用のエンドポイントを追加 expressWs(app) app.ws('/ws', function(ws, req) { ws.on('message', function(msg) { console.log('from server: ' + msg) }) }) // Nuxtのビルド周りは省略 // 起動 app.listen(port, host) console.log('Server listening on ' + host + ':' + port)
クライアント側
クライアント側はWebSocket-Nodeを使ってみた。
$ npm install --save websocket
実際にやりとりするpageとして pages/ws/index.vue
を作成。
画面を表示するとWebSocket接続、ボタン押下でメッセージを送信するようにしている。
<template> <div> <textarea v-model="message"></textarea> <br/> <button v-on:click="send">送信</button> <p>You recieved message: <b>{{answer}}</b></p> </div> </template> <script> import { w3cwebsocket } from 'websocket' const W3CWebSocket = w3cwebsocket export default { data: function() { return { // WebSocketクライアントの生成 socket: new W3CWebSocket('ws://localhost:3000/ws'), // クライアントから送る値(textarea) message: '', // サーバから受け取る値 answer: '' } }, // createdライフサイクルで、Vueインスタンスが作成されたら // イベントリスナーを登録しておく created: function() { // イベントリスナーからVueコンポーネントに値を渡すために一度selfで変数化しておく const self = this self.socket.onmessage = function(e) { if (typeof e.data === 'string') { self.answer = e.data } } }, methods: { send: function() { // ボタン押下でサーバに値を送る this.socket.send(this.message) } } } </script>