侯体宗的博客
  • 首页
  • Hyperf2.1版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 2年前   460

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

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

 

安装依赖

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

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 插件,并进行相关配置

// 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

实现消息解析

// 消息解析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标签:全局替换 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来判断当前消息是否为对方发送

总结

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

您可能感兴趣的文章:

  • 基于vue和websocket的多人在线聊天室
  • vue 实现websocket发送消息并实时接收消息
  • Vue通过WebSocket建立长连接的实现代码
  • websocket在springboot+vue中的使用教程
  • vue发送websocket请求和http post请求的实例代码
  • vue使用websocket的方法实例分析
  • Django+Vue实现WebSocket连接的示例代码
  • 在vue中使用SockJS实现webSocket通信的过程
  • 基于node+vue实现简单的WebSocket聊天功能


  • 上一条:
    将木马拒之门外 设置电脑防止黑客入侵的技巧
    下一条:
    Restart.vbs源代码可以重启远程电脑的vbs
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • TP(3/5)
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • uni-app在详情页中给电话信息添加点击拨打电话的功能按钮(0个评论)
    • uni-app开发小程序搜索功能及添加搜索历史记录、添加热门搜索关键词功能demo(0个评论)
    • uni-app开发小程序使用uni.getLocation()实现页面即时获取当前定位信息demo(1个评论)
    • uni-app开发小程序实现列表页条件筛选显示功能demo(0个评论)
    • vue+elementui实现百度地图api滑上列表显示位置信息(0个评论)
    • 近期文章
    • Laravel 9.13版本发布(0个评论)
    • beego+GeoLite2免费数据库获取ip地址经纬度等定位归属信息(0个评论)
    • redis安全配置之修改端口、添加密码流程步骤及启动使用(0个评论)
    • PHP + Memcache实现简单的统计当前在线人数功能(0个评论)
    • Thinkphp5.1框架中实现Session+Redis会话共享流程步骤(0个评论)
    • go语言中使用Signbit()函数判断一个整数是正数或负数(0个评论)
    • 删库跑路之一链家程序员删除公司9TB数据被判7年,望各大码农警之!(0个评论)
    • Laravel角色和权限:拦截器Gates和策略Policies的解释(0个评论)
    • Laravel 9.12版本发布(0个评论)
    • go语言中实现把数据写入文件函数WriteFile()编写(0个评论)
    • 近期评论
    • 博主 在

      hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 @路过的靓仔:cdn静态资源被墙,已修复..
    • GGGGGGGGG 在

      layui框架常用输入框介绍中评论 写的很好解决问题..
    • 路过的靓仔 在

      hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 剩下好多 wait 状态的..
    • 激光豆芽 在

      为什么你不能安逸?国内996为什么没有国外955香?中评论 国内现在无意义的内卷太多了..
    • 激光豆芽 在

      阿里云香港服务器搭建自用vpn:Shadowsocks使用流程步骤中评论 厉害了..
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客