介绍
怎么在Vue中通过配置WebSocket实现群聊功能?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
<强>安装依赖
vue-native-websocket安装
| #,yarn npm 安装
yarn add vue-native-websocket |, npm install vue-native-websocket ——拯救 
<强>安装成功
配置插件
在主要。js中进行导入
<代码>从& # 39;进口VueNativeSock vue-native-websocket& # 39;
使用VueNativeSock插件,并进行相关配置
//, main.js//,base.lkWebSocket为你服务端websocket地址
Vue.use (VueNativeSock base.lkWebSocket, {
,//启用Vuex集成,存储的值为你的Vuex
,存储:存储,
,//数据发送/接收使用使用json格式
,格式:“json",
,//开启自动重连
,重新连接:没错,
,//尝试重连的次数
,reconnectionAttempts: 5
,//重连间隔时间
3000年,reconnectionDelay:
,//将数据进行序列化,由于启用了json格式的数据传输这里需要进行重写
,passToStoreHandler: function (eventName,事件),{
(!,if eventName.startsWith (& # 39; SOCKET_& # 39;)), {, return }
,let method =, & # 39;提交# 39;;
,let target =, eventName.toUpperCase ();
,let msg =,事件;
,if (this.format ===, & # 39; json # 39;,,,, event.data), {=,,msg JSON.parse (event.data);
,if (msg.mutation), {=,target [msg.namespace | |, & # 39; & # 39;,, msg.mutation] .filter ((e),=祝辞,! ! e) . join (& # 39;/& # 39;);
,}else if (msg.action), {=,method & # 39;派遣# 39;;=,target [msg.namespace | |, & # 39; & # 39;,, msg.action] .filter ((e),=祝辞,! ! e) . join (& # 39;/& # 39;);
,}
,}
,this.store[方法](目标,,味精);=,this.store.state.socket.message 、味精;
,}
}); vuex的相关配置:突变和行动添加相关函数
//, vuex配置文件
import Vue 得到& # 39;vue # 39;
import Vuex 得到& # 39;vuex& # 39;
Vue.use (Vuex);
export default new Vuex.Store ({
,状态:{
,令牌:““,
,用户标识:““,
,//用户头像
,profilePicture:““,
,套接字:{
,//连接状态
,与一:假的,
,//消息内容
,信息:& # 39;& # 39;
,//重新连接错误
,reconnectError:假的
,}
},
,突变:{
,SOCKET_ONOPEN (状态,事件),{
,//连接打开触发的函数
Vue.prototype。socket 美元;=,event.currentTarget;
state.socket.isConnected =, true
},
,SOCKET_ONCLOSE (状态,事件),{
,//连接关闭触发的函数=,state.socket.isConnected 假;
,console.log(事件);
},
,SOCKET_ONERROR (状态,事件),{
,//连接发生错误触发的函数
,console.error(状态,事件)
},
,SOCKET_ONMESSAGE (状态,,消息),{
,//收到消息时触发的函数
state.socket.message =,消息
},
,SOCKET_RECONNECT(状态,,计数),{
,//重新连接触发的函数
,console.info(状态,计算)
},
,SOCKET_RECONNECT_ERROR(状态),{
,//重新连接失败触发的函数=,state.socket.reconnectError 真实;
},
},
,行动:{
,customerAdded (上下文),{
,//新连接添加函数
,console.log (& # 39; action 接受:,customerAdded& # 39;);
,console.log(上下文)
,}
},
,模块:{
,}
}) 至此vue-native-websocket配置结束,如需了解更多配置方法,请移步npm仓库
<强>使用插件并实现群聊
在消息发送接收组件中添加>//,监听消息接收
这options.sockets.onmessage 美元;=,(res)=祝辞{
,//res.data为服务端返回的数据
,const data =, JSON.parse (res.data);
,//200为服务端连接建立成功时返回的状态码(此处根据真实后端返回值进行相应的修改)
,如果(data.code===200) {
,//连接建立成功
,console.log (data.msg);
,其他}{
,//获取服务端推送的消息
,const msgObj =, {
,味精:data.msg,
,avatarSrc: data.avatarSrc,
,用户标识:data.userID
,};
,//渲染页面:如果msgArray存在则转json
,如果(lodash.isEmpty (localStorage.getItem (“msgArray"))) {
,this.renderPage ([] msgObj 0);
,其他}{
,this.renderPage (JSON.parse (localStorage.getItem (“msgArray")), msgObj, 0);
,}
,}
};
