Vue通过配置WebSocket并实现群聊功能
原文链接：https://juejin.im/post/5e08d53a6fb9a0162b7f4bad
写JQuery项目时，使用websocket很简单，不用去考虑模块化，组件之间的访问问题，面向文档编程即可，在Vue项目中使用时，远远没有想象中的那么简单，需要考虑很多场景，本篇文章将与各位开发者分享下vue-native-websocket库的使用以及配置，用其实现群聊功能。先看下最终实现的效果
安装依赖
本文中对于vue-native-websocket库的讲解，项目中配置了vuex，对其不了解的开发者请移步官方文档，如果选择继续阅读本篇文章会比较吃力。
vue-native-websocket安装 #yarn|npm安装 yarnaddvue-native-websocket|npminstallvue-native-websocket--save
安装成功
配置插件
在main.js中进行导入
importVueNativeSockfrom'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}
letmethod='commit';
lettarget=eventName.toUpperCase();
letmsg=event;
if(this.format==='json'&&event.data){
msg=JSON.parse(event.data);
if(msg.mutation){
target=[msg.namespace||'',msg.mutation].filter((e)=>!!e).join('/');
}elseif(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配置文件
importVuefrom'vue'
importVuexfrom'vuex'
Vue.use(Vuex);
exportdefaultnewVuex.Store({
state:{
token:"",
userID:"",
//用户头像
profilePicture:"",
socket:{
//连接状态
isConnected:false,
//消息内容
message:'',
//重新连接错误
reconnectError:false
}
},
mutations:{
SOCKET_ONOPEN(state,event){
//连接打开触发的函数
Vue.prototype.$socket=event.currentTarget;
state.socket.isConnected=true
},
SOCKET_ONCLOSE(state,event){
//连接关闭触发的函数
state.socket.isConnected=false;
console.log(event);
},
SOCKET_ONERROR(state,event){
//连接发生错误触发的函数
console.error(state,event)
},
SOCKET_ONMESSAGE(state,message){
//收到消息时触发的函数
state.socket.message=message
},
SOCKET_RECONNECT(state,count){
//重新连接触发的函数
console.info(state,count)
},
SOCKET_RECONNECT_ERROR(state){
//重新连接失败触发的函数
state.socket.reconnectError=true;
},
},
actions:{
customerAdded(context){
//新连接添加函数
console.log('actionreceived:customerAdded');
console.log(context)
}
},
modules:{
}
})
至此vue-native-websocket配置结束，如需了解更多配置方法，请移步npm仓库
使用插件并实现群聊
在消息发送接收组件中添加onmessage监听(mounted生命周期中)
//监听消息接收
this.$options.sockets.onmessage=(res)=>{
//res.data为服务端返回的数据
constdata=JSON.parse(res.data);
//200为服务端连接建立成功时返回的状态码(此处根据真实后端返回值进行相应的修改)
if(data.code===200){
//连接建立成功
console.log(data.msg);
}else{
//获取服务端推送的消息
constmsgObj={
msg:data.msg,
avatarSrc:data.avatarSrc,
userID:data.userID
};
//渲染页面:如果msgArray存在则转json
if(lodash.isEmpty(localStorage.getItem("msgArray"))){
this.renderPage([],msgObj,0);
}else{
this.renderPage(JSON.parse(localStorage.getItem("msgArray")),msgObj,0);
}
}
};
实现消息发送
//消息发送函数
sendMessage:function(event){
if(event.keyCode===13){
//阻止编辑框默认生成div事件
event.preventDefault();
letmsgText="";
//获取输入框下的所有子元素
letallNodes=event.target.childNodes;
for(letitemofallNodes){
//判断当前元素是否为img元素
if(item.nodeName==="IMG"){
msgText+=`/${item.alt}/`;
}
else{
//获取text节点的值
if(item.nodeValue!==null){
msgText+=item.nodeValue;
}
}
}
//消息发送:消息内容、状态码、当前登录用户的头像地址、用户id
this.$socket.sendObj({msg:msgText,code:0,avatarSrc:this.$store.state.profilePicture,userID:this.$store.state.userID});
//清空输入框中的内容
event.target.innerHTML="";
}
}
实现页面渲染
//渲染页面函数
renderPage:function(msgArray,msgObj,status){
if(status===1){
//页面第一次加载，如果本地存储中有数据则渲染至页面
letmsgArray=[];
if(localStorage.getItem("msgArray")!==null){
msgArray=JSON.parse(localStorage.getItem("msgArray"));
for(leti=0;i
实现消息解析
//消息解析
messageParsing:function(msgObj){
//解析接口返回的数据进行渲染
letseparateReg=/(\/[^/]+\/)/g;
letmsgText=msgObj.msgText;
letfinalMsgText="";
//将符合条件的字符串放到数组里
constresultArray=msgText.match(separateReg);
if(resultArray!==null){
for(letitemofresultArray){
//删除字符串中的/符号
item=item.replace(/\//g,"");
for(letemojiItemofthis.emojiList){
//判断捕获到的字符串与配置文件中的字符串是否相同
if(emojiItem.info===item){
constimgSrc=require(`../assets/img/emoji/${emojiItem.hover}`);
constimgTag=``;
//替换匹配的字符串为img标签:全局替换
msgText=msgText.replace(newRegExp(`/${item}/`,'g'),imgTag);
}
}
}
finalMsgText=msgText;
}else{
finalMsgText=msgText;
}
msgObj.msgText=finalMsgText;
//渲染页面
this.senderMessageList.push(msgObj);
//修改滚动条位置
this.$nextTick(function(){
this.$refs.messagesContainer.scrollTop=this.$refs.messagesContainer.scrollHeight;
});
}
DOM结构
通过每条消息的userID和vuex中的存储的当前用户的userID来判断当前消息是否为对方发送