位置: IT常识 - 正文

Vue连接WebSocket后,监听消息并读取消息内容(onmessage事件),解决将内容赋值到data的属性失败的问题(vuecli websocket)

编辑:rootadmin
Vue连接WebSocket后,监听消息并读取消息内容(onmessage事件),解决将内容赋值到data的属性失败的问题 技术栈前端Vue (包括一些组件、中间件)后端分布式微服务

推荐整理分享Vue连接WebSocket后,监听消息并读取消息内容(onmessage事件),解决将内容赋值到data的属性失败的问题(vuecli websocket),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vuecli websocket,web socket vue,vue建立websocket连接,websocket在vue中怎么用,vue-websocket,vue.js websocket,vuecli websocket,vue.js websocket,内容如对您有帮助,希望把文章链接给更多的朋友!

这里就不再详述后端是怎么开发通信服务端的了,因为我主要是后端开发,前端开发花的时间几乎是后端的两倍还要多(其实比较简单,只是自己前端真的不得行🤪)

最近在开发项目里的一个IM(实时通信)模块功能的时候发现,通过服务端转发客户端消息的时候,前端组件的数据一直没办法正常刷新,耗了很久,去查结果发现网上都没有我想要的答案(都是千篇一律的答案),最后还是没解决,那好吧,只能🪜看看了

Vue连接WebSocket后,监听消息并读取消息内容(onmessage事件),解决将内容赋值到data的属性失败的问题(vuecli websocket)

好了,不废话了,直接上代码解决吧:

原来写法 socket.onmessage = function (event) {...} 新的写法 socket.onmessage = (event) => {...}

简单代码演示:

<template><div><p>{{tempContent}}</p></div></template><script>export default { name: "Test", data() { return { socket: null, // 这里定义一个变量,因为后面有其他方法也要用到这个socket通道通信 tempContent: 'Now is null' } }, method: {initWebSocket: function() { // 判断浏览器是否支持WebSocket if (window.WebSocket) { // this.GLOBAL.webSocketPath 这是一个全局变量,填的就是你的websocket的服务端通信地址 // 例子:this.GLOBAL.webSocketPath = ws://localhost:8080/socket this.socket = new WebSocket(this.GLOBAL.webSocketPath); // 监听消息,并将结果映射到对应标签 this.socket.onmessage = function (ev) { // 这里就自己注意转一下哈 console.log("==== onmessage ====") let objTemp = JSON.parse(ev.data); this.tempContent = objTemp.name console.log(objTemp) console.log(this.tempContent) } // 其他那些监听事件就先省略了 } else { console.log("当前浏览器不支持WebSocket"); } },},mounted() { this.initWebSocket(); },}</script>

运行后,触发监听事件,并没有赋值上

修改代码后

<template><div><p>{{tempContent}}</p></div></template><script>export default { name: "Test", data() { return { socket: null, // 这里定义一个变量,因为后面有其他方法也要用到这个socket通道通信 tempContent: 'Now is null' } }, method: {initWebSocket: function() { // 判断浏览器是否支持WebSocket if (window.WebSocket) { // this.GLOBAL.webSocketPath 这是一个全局变量,填的就是你的websocket的服务端通信地址 // 例子:this.GLOBAL.webSocketPath = ws://localhost:8080/socket this.socket = new WebSocket(this.GLOBAL.webSocketPath); // 监听消息,并将结果映射到对应标签 this.socket.onmessage = (ev) => { console.log("==== onmessage ====") let objTemp = JSON.parse(ev.data); this.tempContent = objTemp.name console.log(objTemp) console.log(this.tempContent) } // 其他那些监听事件就先省略了 } else { console.log("当前浏览器不支持WebSocket"); } },},mounted() { this.initWebSocket(); },}</script>

原来没有触发时的情况

触发之后

本文链接地址:https://www.jiuchutong.com/zhishi/288091.html 转载请保留说明!

上一篇:分享24个网页游戏源代码,总有一个是你想要的(十大网页游戏)

下一篇:埃托沙国家公园内一处水坑附近的跳羚,纳米比亚 (© Charlie Summers/Minden Pictures)(埃托沙国家公园发展观兽旅游的优势条件)

  • 长期待摊费用的账务处理
  • 无形资产计税基础怎么算
  • 建筑面积包括分摊建筑面积吗
  • 企业收到赞助费
  • 生产成本直接材料包括哪些
  • 与成本直接相关的工资怎么会计处理?
  • 多缴所得税返还现金流
  • 企业所得税怎么征收
  • 企业销售货物收入没有银行流水
  • 企业缴纳房产税的依据
  • 企业所得税营业税金及附加
  • 车船使用税是否必须交
  • 税务局代增值税专用发票盖什么章
  • 工会经费申报表的应税项应该怎样填写
  • 无偿划拨的资产怎么做资产卡片账簿
  • 已付款收到发票但没有做计提凭证
  • 固定资产销售账务处理的例题
  • 小规模季报还没报改了一般纳税人
  • 培训机构收一年费用合法吗
  • 固定资产达到使用状态时发生的安装费用
  • win10回退到以前版本失败
  • 房租没有发票,怎么入费用?
  • 委托人力资源代招合同
  • 上网的操作
  • 一帆风顺的养殖土壤用什么土
  • 购买税盘怎么做分录
  • 公司购监控设备入什么科目
  • php封装app
  • 城镇土地使用税纳税义务发生时间
  • 小微企业直接融资和间接融资
  • 毕业证原件掉了可以报考社工证吗
  • 上月未开发票的销项税,已经申报缴税,在本月开了票,应该如何填报?
  • 购买软件多大金额算违法
  • 现金流量表期初现金余额怎么计算
  • 固定资产折旧应计入什么费用
  • 收入的利息怎么记账
  • 如何做进项税额转出处理
  • 科技项目经费预算取费细则
  • 织梦面包屑导航最后的分隔符大于号去掉方法
  • python文档怎么查看
  • 汽车牌照费用是在哪里开的
  • 个体户餐饮服务包括哪些经营范围
  • sql语句自动执行
  • sqlserver怎么把数据库导出来
  • 长期资产的减值会影响CFO吗
  • 缴纳的工会经费现金流量表怎么记
  • 已执行新金融准则 本期金额
  • 工程物资残料价值
  • 发票审核中是什么意思
  • 长期待摊费用包含的内容
  • 折扣如何做账
  • 投标保证金退还
  • 基本生产成本科目应该按成本计算对象
  • 项目成本的估算与预算有什么区别和联系?考试资料网
  • 主营业务收入是什么意思
  • 总账建账要遵循的原则
  • 在windows 10
  • win8系统打开苹果系统文件
  • winxp密码忘了
  • win7环境变量在哪打开啊
  • win10系统如何给d盘加密
  • window102021年更新计划
  • linux groupdel命令详解
  • win8如何关闭杀毒软件
  • 安装双系统之后win10进不去
  • 优质安卓应用
  • 使用时间
  • jquery的心得
  • python求解析解
  • 运算符优先级由高到低的顺序
  • ip安全策略设置报错
  • jquery html5 视频播放控制代码
  • android手机屏幕采集触摸区域所有点
  • python安装基础教程
  • jquery字体设置
  • 代发工资法律依据
  • 劳保费如何入账
  • 环保信用评价等级分级情况
  • 发票专用章盖在哪里
  • 济南房产税如何计算公式
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设