Vue.jsとSocket.ioの統合
Websocketは、クライアントとサーバー間の双方向通信を可能にする強力な方法です。 socket.io は、WebSocketおよび代替トランスポートとの接続処理を簡素化する主要なライブラリの1つです。 コンポーネントでsocket.ioを直接使用できるように、Vueと組み合わせてみましょう。
インストール
まず、YarnまたはNPMを使用してsocket.io-clientとvue-socket.ioをインストールしましょう。
# Yarn
$ yarn add socket.io-client vue-socket.io
# NPM
$ npm install socket.io-client vue-socket.io --save
使用法
このガイドでは、 socket.io がローカルで実行されているサーバー(たとえば、ポート)が既に存在することを前提としています。 4113
.
まず、アプリのスタートアップファイルでvue-socket.ioプラグインを有効にします。
main.js
import Vue from 'vue';
import socketio from 'socket.io';
import VueSocketIO from 'vue-socket.io';
export const SocketInstance = socketio('http://localhost:4113');
Vue.use(VueSocketIO, SocketInstance)
// The usual app stuff goes here.
...
これで、コンポーネントで直接ソケットイベントにバインドできます。
IListenToSockets.vue
<template>
<div>
<p v-if="isConnected">We're connected to the server!</p>
<p>Message from server: "{{socketMessage}}"</p>
<button @click="pingServer()">Ping Server</button>
</div>
</template>
<script>
export default {
data() {
return {
isConnected: false,
socketMessage: ''
}
},
sockets: {
connect() {
// Fired when the socket connects.
this.isConnected = true;
},
disconnect() {
this.isConnected = false;
},
// Fired when the server sends something on the "messageChannel" channel.
messageChannel(data) {
this.socketMessage = data
}
},
methods: {
pingServer() {
// Send the "pingServer" event to the server.
this.$socket.emit('pingServer', 'PING!')
}
}
}
</script>
Vuex統合
Vuex を使用している場合は、 main.js のプラグイン初期化にVuexストアを追加するだけで、ソケットチャネルがメッセージを受信したときにストアミューテーションを発生させることができます。
main.js
...
import { MyVuexStore } from './my-vuex-store.js'
Vue.use(VueSocketIO, SocketInstance, MyVuexStore)
...
ソケットによってトリガーされるすべてのミューテーションには、SOCKET_というプレフィックスが付きます。
したがって、たとえば、チャネルの名前が messageChannel の場合、対応するVuexミューテーションはSOCKET_MESSAGECHANNELになります。 ストア構成では、次のようになります。
my-vuex-store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
isConnected: false,
socketMessage: ''
},
mutations:{
SOCKET_CONNECT(state) {
state.isConnected = true;
},
SOCKET_DISCONNECT(state) {
state.isConnected = false;
},
SOCKET_MESSAGECHANNEL(state, message) {
state.socketMessage = message
}
}
})
悪くないね?
詳細については、vue-socket.ioおよびsocket.ioのドキュメントを参照してください。