Vue通過配置WebSocket并實現(xiàn)群聊功能

更新時間：2019年12月31日 09:02:21 作者：神奇的程序員

本篇文章將與各位開發(fā)者分享下 vue-native-websocket 庫的使用以及配置，通過實例代碼給大家分享Vue通過配置WebSocket并實現(xiàn)群聊功能，需要的朋友可以參考下

原文鏈接：https://juejin.im/post/5e08d53a6fb9a0162b7f4bad

寫JQuery項目時，使用websocket很簡單，不用去考慮模塊化，組件之間的訪問問題，面向文檔編程即可，在Vue項目中使用時，遠遠沒有想象中的那么簡單，需要考慮很多場景，本篇文章將與各位開發(fā)者分享下 vue-native-websocket 庫的使用以及配置，用其實現(xiàn)群聊功能。先看下最終實現(xiàn)的效果

安裝依賴

本文中對于 vue-native-websocket 庫的講解，項目中配置了vuex，對其不了解的開發(fā)者請移步官方文檔，如果選擇繼續(xù)閱讀本篇文章會比較吃力。

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 插件，并進行相關(guān)配置

// main.js
// base.lkWebSocket為你服務端websocket地址
Vue.use(VueNativeSock,base.lkWebSocket,{
 // 啟用Vuex集成,store的值為你的vuex
 store: store,
 // 數(shù)據(jù)發(fā)送/接收使用使用json格式
 format: "json",
 // 開啟自動重連
 reconnection: true,
 // 嘗試重連的次數(shù)
 reconnectionAttempts: 5,
 // 重連間隔時間
 reconnectionDelay: 3000,
 // 將數(shù)據(jù)進行序列化，由于啟用了json格式的數(shù)據(jù)傳輸這里需要進行重寫
 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的相關(guān)配置：mutations和actions添加相關(guān)函數(shù)

// vuex配置文件
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
 state: {
 token:"",
 userID:"",
 // 用戶頭像
 profilePicture: "",
 socket: {
 // 連接狀態(tài)
 isConnected: false,
 // 消息內(nèi)容
 message: '',
 // 重新連接錯誤
 reconnectError: false
 }
 },
 mutations: {
 SOCKET_ONOPEN (state, event) {
 // 連接打開觸發(fā)的函數(shù)
 Vue.prototype.$socket = event.currentTarget;
 state.socket.isConnected = true
 },
 SOCKET_ONCLOSE (state, event) {
 // 連接關(guān)閉觸發(fā)的函數(shù)
 state.socket.isConnected = false;
 console.log(event);
 },
 SOCKET_ONERROR (state, event) {
 // 連接發(fā)生錯誤觸發(fā)的函數(shù)
 console.error(state, event)
 },
 SOCKET_ONMESSAGE (state, message) {
 // 收到消息時觸發(fā)的函數(shù)
 state.socket.message = message
 },
 SOCKET_RECONNECT(state, count) {
 // 重新連接觸發(fā)的函數(shù)
 console.info(state, count)
 },
 SOCKET_RECONNECT_ERROR(state) {
 // 重新連接失敗觸發(fā)的函數(shù)
 state.socket.reconnectError = true;
 },
 },
 actions: {
 customerAdded (context) {
 // 新連接添加函數(shù)
 console.log('action received: customerAdded');
 console.log(context)
 }
 },
 modules: {
 }
})

至此 vue-native-websocket 配置結(jié)束，如需了解更多配置方法，請移步 npm倉庫

使用插件并實現(xiàn)群聊

在消息發(fā)送接收組件中添加 onmessage 監(jiān)聽(mounted生命周期中)

// 監(jiān)聽消息接收
this.$options.sockets.onmessage = (res)=>{
 // res.data為服務端返回的數(shù)據(jù)
 const data = JSON.parse(res.data);
 // 200為服務端連接建立成功時返回的狀態(tài)碼(此處根據(jù)真實后端返回值進行相應的修改)
 if(data.code===200){
 // 連接建立成功
 console.log(data.msg);
 }else{
 // 獲取服務端推送的消息
 const msgObj = {
 msg: data.msg,
 avatarSrc: data.avatarSrc,
 userID: data.userID
 };
 // 渲染頁面:如果msgArray存在則轉(zhuǎn)json
 if(lodash.isEmpty(localStorage.getItem("msgArray"))){
 this.renderPage([],msgObj,0);
 }else{
 this.renderPage(JSON.parse(localStorage.getItem("msgArray")),msgObj,0);
 }
 }
};

實現(xiàn)消息發(fā)送

// 消息發(fā)送函數(shù)
sendMessage: function (event) {
 if (event.keyCode === 13) {
 // 阻止編輯框默認生成div事件
 event.preventDefault();
 let msgText = "";
 // 獲取輸入框下的所有子元素
 let allNodes = event.target.childNodes;
 for(let item of allNodes){
 // 判斷當前元素是否為img元素
 if(item.nodeName==="IMG"){
 msgText += `/${item.alt}/`;
 }
 else{
 // 獲取text節(jié)點的值
 if(item.nodeValue!==null){
 msgText += item.nodeValue;
 }
 }
 }
 // 消息發(fā)送: 消息內(nèi)容、狀態(tài)碼、當前登錄用戶的頭像地址、用戶id
 this.$socket.sendObj({msg: msgText,code: 0,avatarSrc: this.$store.state.profilePicture,userID: this.$store.state.userID});
 // 清空輸入框中的內(nèi)容
 event.target.innerHTML = "";
 }
}

實現(xiàn)頁面渲染

// 渲染頁面函數(shù)
renderPage: function(msgArray,msgObj,status){
 if(status===1){
 // 頁面第一次加載，如果本地存儲中有數(shù)據(jù)則渲染至頁面
 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{
 // 判斷本地存儲中是否有數(shù)據(jù)
 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);
 }
 }
}

實現(xiàn)消息解析

// 消息解析
messageParsing: function(msgObj){
 // 解析接口返回的數(shù)據(jù)進行渲染
 let separateReg = /(\/[^/]+\/)/g;
 let msgText = msgObj.msgText;
 let finalMsgText = "";
 // 將符合條件的字符串放到數(shù)組里
 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="${imgSrc}" width="28" height="28" 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結(jié)構(gòu)

通過每條消息的userID和vuex中的存儲的當前用戶的userID來判斷當前消息是否為對方發(fā)送

<!--消息顯示-->
<div class="messages-panel" ref="messagesContainer">
 <div class="row-panel" v-for="item in senderMessageList" :key="item.msgId">
 <!--發(fā)送者消息樣式-->
 <div class="sender-panel" v-if="item.userID===userID">
 <!--消息-->
 <div class="msg-body">
 <!--消息尾巴-->
 <div class="tail-panel">
 <svg class="icon" aria-hidden="true">
 <use xlink:href="#icon-zbds30duihuakuangyou" rel="external nofollow" ></use>
 </svg>
 </div>
 <!--消息內(nèi)容-->
 <p v-html="item.msgText"/>
 </div>
 <!--頭像-->
 <div class="avatar-panel">
 <img :src="item.avatarSrc" alt="">
 </div>
 </div>
 <!--對方消息樣式-->
 <div class="otherSide-panel" v-else>
 <!--頭像-->
 <div class="avatar-panel">
 <img :src="item.avatarSrc" alt="">
 </div>
 <!--消息-->
 <div class="msg-body">
 <!--消息尾巴-->
 <div class="tail-panel">
 <svg class="icon" aria-hidden="true">
 <use xlink:href="#icon-zbds30duihuakuangzuo" rel="external nofollow" ></use>
 </svg>
 </div>
 <!--消息內(nèi)容-->
 <p v-html="item.msgText"/>
 </div>
 </div>
 </div>
</div>

總結(jié)

以上所述是小編給大家介紹的Vue通過配置WebSocket并實現(xiàn)群聊功能，希望對大家有所幫助！

您可能感興趣的文章: