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


Posted in Javascript onDecember 31, 2019

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

写JQuery项目时,使用websocket很简单,不用去考虑模块化,组件之间的访问问题,面向文档编程即可,在Vue项目中使用时,远远没有想象中的那么简单,需要考虑很多场景,本篇文章将与各位开发者分享下 vue-native-websocket 库的使用以及配置,用其实现群聊功能。先看下最终实现的效果

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

安装依赖

本文中对于 vue-native-websocket 库的讲解,项目中配置了vuex,对其不了解的开发者请移步官方文档,如果选择继续阅读本篇文章会比较吃力。

vue-native-websocket安装
# yarn | npm 安装
yarn add vue-native-websocket | npm install vue-native-websocket --save

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

安装成功

配置插件

在 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
 }
 },
 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('action received: customerAdded');
 console.log(context)
 }
 },
 modules: {
 }
})

至此 vue-native-websocket 配置结束,如需了解更多配置方法,请移步 npm仓库

使用插件并实现群聊

在消息发送接收组件中添加 onmessage 监听(mounted生命周期中)

// 监听消息接收
this.$options.sockets.onmessage = (res)=>{
 // res.data为服务端返回的数据
 const data = JSON.parse(res.data);
 // 200为服务端连接建立成功时返回的状态码(此处根据真实后端返回值进行相应的修改)
 if(data.code===200){
 // 连接建立成功
 console.log(data.msg);
 }else{
 // 获取服务端推送的消息
 const msgObj = {
 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();
 let msgText = "";
 // 获取输入框下的所有子元素
 let allNodes = event.target.childNodes;
 for(let item of allNodes){
 // 判断当前元素是否为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){
 // 页面第一次加载,如果本地存储中有数据则渲染至页面
 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="${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结构

通过每条消息的userID和vuex中的存储的当前用户的userID来判断当前消息是否为对方发送

<!--消息显示-->
<div class="messages-panel" ref="messagesContainer">
 <div class="row-panel" v-for="item in senderMessageList" :key="item.msgId">
 <!--发送者消息样式-->
 <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>
 <!--消息内容-->
 <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>
 <!--消息内容-->
 <p v-html="item.msgText"/>
 </div>
 </div>
 </div>
</div>

总结

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

Javascript 相关文章推荐
JavaScript 学习 - 提高篇
Feb 02 Javascript
Add a Table to a Word Document
Jun 15 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
Vue实现剪贴板复制功能
Dec 31 #Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 #Javascript
小程序外卖订单界面的示例代码
Dec 30 #Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 #Javascript
JS三级联动代码格式实例详解
Dec 30 #Javascript
JavaScript监听触摸事件代码实例
Dec 30 #Javascript
微信公众号服务器验证Token步骤图解
Dec 30 #Javascript
You might like
使用PHP数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
php目录操作函数之获取目录与文件的类型
2010/12/29 PHP
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
JavaScript中对象属性的添加和删除示例
2014/05/12 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
angularjs指令之绑定策略(@、=、&amp;)
2017/04/13 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
软件测试工程师笔试题带答案
2015/03/27 面试题
银行柜员应聘推荐信范文
2013/11/24 职场文书
半年思想汇报
2013/12/30 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
社区娱乐活动方案
2014/08/21 职场文书
国防教育标语
2014/10/08 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
Django migrate报错的解决方案
2021/05/20 Python