位置: 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)(埃托沙国家公园发展观兽旅游的优势条件)

  • 2023年享受六税两费减免吗
  • 外聘专家发生的差旅费
  • 税收缴款书现在还有吗
  • 出口退税转内销会计分录
  • 年金个税税率表
  • 没有纸质机票电子行程单电子版可以报销吗
  • 人力资源服务发票
  • 中小企业增值税税率
  • 高新技术企业如何查询
  • 公司支付保险公司保费怎么做账
  • 应付福利费直接计入未分配利润
  • 企业重组个人股东个人所得税
  • 委托加工的应税消费品收回后直接出售
  • 转账支票遗失能挂失吗
  • 车间报销费用的会计分录
  • 补交以前年度的社保账务处理
  • 增值税专票销货清单模板
  • 购买商标属于什么费用
  • 上年的费用支出包括哪些
  • 简易计税项目是所有发票都是普票吗
  • 个人公司转让协议怎么写
  • 拓展培训费如何开票
  • 监控设备的维修保养
  • 个人去税务局开劳务票 税点是多少
  • 税收协助
  • t3不能增加二级科目
  • 无租使用房产如何征收企业所得税
  • 投资公司如何确定收入
  • 公司员工结婚礼金规定
  • 年终一次性奖金个税计算
  • 新手会计入门
  • 网速保护功能介绍
  • cmd. exe 程序错误
  • 嵌套if怎么用
  • low是什么文件
  • 车间耗材管理办法
  • 图像质量评价制度及质量评价方案
  • 减免增值税会计处理
  • 汇算清缴补充公告
  • php自定义函数的语法格式
  • cd播放模式
  • linux用mv文件移动指定文件
  • 同事写了一个责任链模式,bug 无数...
  • phpcms多站点
  • 预付账款大幅增加说明
  • 政府会计应付职工薪酬明细科目
  • sql server2008中删除表中记录的命令
  • 制造企业预提短期借款利息的会计科目处理
  • 行政单位基建管理办法
  • 装修公司开专票的税点是多少
  • 暂估入库的商品作暂估冲红会计分录
  • 小规模公司销项发票税额记到哪里了
  • 员工出差报销补贴政策
  • 契税的计税金额是什么
  • 子公司的注册资金需要母公司股东出吗?
  • 账外资产处理
  • 走逃失联企业管理办法
  • 小规模纳税人免税政策2023年
  • 商业汇票的票样
  • 以前年度费用科目入错 不影响以前年度利润的账务处理
  • 对公账户汇款怎么原路退回
  • 暂估应付账款余额在贷方
  • mysql性能分析语句
  • windows server 2008 r2激活密钥
  • win7进bios设置启动盘
  • xp系统硬盘管理
  • 如何让电脑系统更快
  • win7系统玩游戏怎么样
  • win8.1开机进入桌面
  • gcc编译选项详解
  • Win10预览版桌面图标和任务栏不翼而飞怎么办?
  • nodejs json数据库
  • jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
  • 向境外付款需要代扣代缴所得税吗
  • 技术咨询服务费税率
  • 商标注册图形查询
  • 纳税信用等级在哪里查
  • 宁夏退休职工网上认证
  • 计提消费税的会计分录讲解
  • 郑州市国家税务局地址在哪里
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设