Nuxt.jsでWebSocketを使ってみる #nuxtjs #vuejs

Nuxt.jsでWebSocketを使ってみる。

バックエンドはexpress-templateを使ってExpressで用意する。(Nuxt.jsはWebSocketのクライアントとして使う)

su-kun1899.hatenablog.com

サーバ側

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>

参考

github.com github.com github.com qiita.com qiita.com