Websockets 是允许客户端和服务器之间的双向通信的强大方法,而 socket.io 是简化与 websockets 和替代交通工具的连接处理的领先库之一。
安装
首先,让我们使用 Yarn 或 NPM 安装 socket.io-client 和 vue-socket.io。
1# Yarn
2$ yarn add socket.io-client vue-socket.io
3# NPM
4$ npm install socket.io-client vue-socket.io --save
使用
对于本指南的目的,我们将假设您已经有一个服务器在本地运行 socket.io,比如,端口 4113。
首先,在您的应用程序启动文件中启用 vue-socket.io 插件:
1[label main.js]
2import Vue from 'vue';
3import socketio from 'socket.io';
4import VueSocketIO from 'vue-socket.io';
5
6export const SocketInstance = socketio('http://localhost:4113');
7
8Vue.use(VueSocketIO, SocketInstance)
9
10// The usual app stuff goes here.
11...
现在,我们可以直接在我们的组件中连接到接口事件:
1[label IListenToSockets.vue]
2<template>
3 <div>
4 <p v-if="isConnected">We're connected to the server!</p>
5 <p>Message from server: "{{socketMessage}}"</p>
6 <button @click="pingServer()">Ping Server</button>
7 </div>
8</template>
9
10<script>
11export default {
12 data() {
13 return {
14 isConnected: false,
15 socketMessage: ''
16 }
17 },
18
19 sockets: {
20 connect() {
21 // Fired when the socket connects.
22 this.isConnected = true;
23 },
24
25 disconnect() {
26 this.isConnected = false;
27 },
28
29 // Fired when the server sends something on the "messageChannel" channel.
30 messageChannel(data) {
31 this.socketMessage = data
32 }
33 },
34
35 methods: {
36 pingServer() {
37 // Send the "pingServer" event to the server.
38 this.$socket.emit('pingServer', 'PING!')
39 }
40 }
41}
42</script>
Vuex 集成
如果您使用的是 Vuex,则可以在接口渠道接收消息时启动存储突变,只需在 main.js 中将 Vuex 存储添加到插件初始化。
1[label main.js]
2...
3import { MyVuexStore } from './my-vuex-store.js'
4
5Vue.use(VueSocketIO, SocketInstance, MyVuexStore)
6...
所有由插件触发的突变都是由 SOCKET_ 预先定义的。
例如,如果您的频道被称为 messageChannel,则相应的 Vuex 突变将是 SOCKET_MESSAGECHANNEL。
1[label my-vuex-store.js]
2
3import Vue from 'vue';
4import Vuex from 'vuex';
5
6Vue.use(Vuex);
7
8export default new Vuex.Store({
9 state: {
10 isConnected: false,
11 socketMessage: ''
12 },
13
14 mutations:{
15 SOCKET_CONNECT(state) {
16 state.isConnected = true;
17 },
18
19 SOCKET_DISCONNECT(state) {
20 state.isConnected = false;
21 },
22
23 SOCKET_MESSAGECHANNEL(state, message) {
24 state.socketMessage = message
25 }
26 }
27})
不是坏的吧?
有关详细信息,请参阅 vue-socket.io和 socket.io的文档。