写JQuery项目时，使用websocket很简单，不用去考虑模块化，组件之间的访问问题，面向文档编程即可，在Vue项目中使用时，远远没有想象中的那么简单，需要考虑很多场景，本篇文章将与各位开发者分享下 vue-native-websocket 库的使用以及配置，用其实现群聊功能。先看下最终实现的效果
安装依赖
本文中对于 vue-native-websocket 库的讲解，项目中配置了vuex，对其不了解的开发者请移步官方文档，如果选择继续阅读本篇文章会比较吃力。
vue-native-websocket安装
# yarn | npm 安装
yarn add vue-native-websocket | npm install vue-native-websocket --save
安装成功
配置插件
在 main.js 中进行导入
import VueNativeSock from 'vue-native-websocket'使用 VueNativeSock 插件，并进行相关配置
// main.js
// base.lkWebSocket为你服务端websocket地址
Vue.use(VueNativeSock,base.lkWebSocket,{
// 启用Vuex集成,store的值为你的vuex
store: store,
// 数据发送/接收使用使用json格式
format: "json",
// 开启自动重连
reconnection: true,
// 尝试重连的次数
reconnectionAttempts: 5,
// 重连间隔时间
reconnectionDelay: 3000,
// 将数据进行序列化，由于启用了json格式的数据传输这里需要进行重写
passToStoreHandler: function (eventName, event) {
if (!eventName.startsWith('SOCKET_')) { return }
let method = 'commit';
let target = eventName.toUpperCase();
let msg = event;
if (this.format === 'json' && event.data) {
msg = JSON.parse(event.data);
if (msg.mutation) {
target = [msg.namespace || '', msg.mutation].filter((e) => !!e).join('/');
} else if (msg.action) {
method = 'dispatch';
target = [msg.namespace || '', msg.action].filter((e) => !!e).join('/');
}
}
this.store[method](target, msg);
this.store.state.socket.message = msg;
}
});vuex的相关配置：mutations和actions添加相关函数
// vuex配置文件
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex);
export default new Vuex.Store({
state: {
token:"",
userID:"",
// 用户头像
profilePicture: "",
socket: {
// 连接状态
isConnected: false,
// 消息内容
message: '',
// 重新连接错误
reconnectError: false
