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'
import expressWs from 'express-ws'
const app = express()
const host = process.env.HOST || '127.0.0.1'
const port = process.env.PORT || 3000
expressWs(app)
app.ws('/ws', function(ws, req) {
ws.on('message', function(msg) {
console.log('from server: ' + msg)
})
})
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 {
socket: new W3CWebSocket('ws://localhost:3000/ws'),
message: '',
answer: ''
}
},
created: function() {
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