Vue通过配置WebSocket并实现群聊功能(2)

// 渲染页面函数 renderPage: function(msgArray,msgObj,status){ if(status===1){ // 页面第一次加载，如果本地存储中有数据则渲染至页面 let msgArray = []; if(localStorage.getItem("msgArray")!==null){ msgArray = JSON.parse(localStorage.getItem("msgArray")); for (let i = 0; i<msgArray.length;i++){ const thisSenderMessageObj = { "msgText": msgArray[i].msg, "msgId": i, "avatarSrc": msgArray[i].avatarSrc, "userID": msgArray[i].userID }; // 解析并渲染 this.messageParsing(thisSenderMessageObj); } } }else{ // 判断本地存储中是否有数据 if(localStorage.getItem("msgArray")===null){ // 新增记录 msgArray.push(msgObj); localStorage.setItem("msgArray",JSON.stringify(msgArray)); for (let i = 0; i <msgArray.length; i++){ const thisSenderMessageObj = { "msgText": msgArray[i].msg, "msgId": i, "avatarSrc": msgArray[i].avatarSrc, "userID": msgArray[i].userID, }; // 解析并渲染 this.messageParsing(thisSenderMessageObj); } }else{ // 更新记录 msgArray = JSON.parse(localStorage.getItem("msgArray")); msgArray.push(msgObj); localStorage.setItem("msgArray",JSON.stringify(msgArray)); const thisSenderMessageObj = { "msgText": msgObj.msg, "msgId": Date.now(), "avatarSrc": msgObj.avatarSrc, "userID": msgObj.userID }; // 解析并渲染 this.messageParsing(thisSenderMessageObj); } } }

实现消息解析

// 消息解析 messageParsing: function(msgObj){ // 解析接口返回的数据进行渲染 let separateReg = /(\/[^/]+\/)/g; let msgText = msgObj.msgText; let finalMsgText = ""; // 将符合条件的字符串放到数组里 const resultArray = msgText.match(separateReg); if(resultArray!==null){ for (let item of resultArray){ // 删除字符串中的/符号 item = item.replace(/\//g,""); for (let emojiItem of this.emojiList){ // 判断捕获到的字符串与配置文件中的字符串是否相同 if(emojiItem.info === item){ const imgSrc = require(`../assets/img/emoji/${emojiItem.hover}`); const imgTag = `<img src="https://www.jb51.net/${imgSrc}" alt="${item}">`; // 替换匹配的字符串为img标签:全局替换 msgText = msgText.replace(new RegExp(`/${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来判断当前消息是否为对方发送

<!--消息显示--> <div ref="messagesContainer"> <div v-for="item in senderMessageList" :key="item.msgId"> <!--发送者消息样式--> <div v-if="item.userID===userID"> <!--消息--> <div> <!--消息尾巴--> <div> <svg aria-hidden="true"> <use xlink:href="#icon-zbds30duihuakuangyou" ></use> </svg> </div> <!--消息内容--> <p v-html="item.msgText"/> </div> <!--头像--> <div> <img :src="item.avatarSrc" alt=""> </div> </div> <!--对方消息样式--> <div v-else> <!--头像--> <div> <img :src="item.avatarSrc" alt=""> </div> <!--消息--> <div> <!--消息尾巴--> <div> <svg aria-hidden="true"> <use xlink:href="#icon-zbds30duihuakuangzuo" ></use> </svg> </div> <!--消息内容--> <p v-html="item.msgText"/> </div> </div> </div> </div>

总结

以上所述是小编给大家介绍的Vue通过配置WebSocket并实现群聊功能，希望对大家有所帮助！

您可能感兴趣的文章: