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

  • 平凡的世界读后记(平凡的世界读后感2000字大学生)

    平凡的世界读后记(平凡的世界读后感2000字大学生)

  • 如何升级win10(电脑win7如何升级win10)

    如何升级win10(电脑win7如何升级win10)

  • qq漫游聊天记录怎么恢复(qq漫游聊天记录删了怎么恢复找回来)

    qq漫游聊天记录怎么恢复(qq漫游聊天记录删了怎么恢复找回来)

  • oppo手机怎么改图标名字(oppo手机怎么改图标图片)

    oppo手机怎么改图标名字(oppo手机怎么改图标图片)

  • 手机一下子收到几十条验证码怎么办(手机一下子收到很多验证码是怎么回事)

    手机一下子收到几十条验证码怎么办(手机一下子收到很多验证码是怎么回事)

  • 段前间距不显示(为什么标题段前间距不显示)

    段前间距不显示(为什么标题段前间距不显示)

  • dwl文件可以恢复成cad文件么(dwl2文件可以恢复成cad文件么)

    dwl文件可以恢复成cad文件么(dwl2文件可以恢复成cad文件么)

  • 贴吧此用户已被屏蔽啥意思(贴吧此用户已被屏蔽怎么解封)

    贴吧此用户已被屏蔽啥意思(贴吧此用户已被屏蔽怎么解封)

  • stp格式用什么软件打开(stp文件用什么软件做的)

    stp格式用什么软件打开(stp文件用什么软件做的)

  • 抖音速推能上热门吗(抖音速推上热门别人能看到花钱了吗)

    抖音速推能上热门吗(抖音速推上热门别人能看到花钱了吗)

  • 手机屏幕变黄如何恢复

    手机屏幕变黄如何恢复

  • qq通话怎么可以录音(qq通话怎么可以录对方的声音)

    qq通话怎么可以录音(qq通话怎么可以录对方的声音)

  • 卡贴用一次就不能用了吗(卡贴使用一次就不能用了吗?)

    卡贴用一次就不能用了吗(卡贴使用一次就不能用了吗?)

  • 进程的静态实体由什么组成(进程的静态实体包括)

    进程的静态实体由什么组成(进程的静态实体包括)

  • 三星手机4g开关在哪里(三星手机4g开关怎么打开)

    三星手机4g开关在哪里(三星手机4g开关怎么打开)

  • 免打扰模式怎么设置(免打扰模式怎么设置微信提醒)

    免打扰模式怎么设置(免打扰模式怎么设置微信提醒)

  • oppor11s听筒声音小

    oppor11s听筒声音小

  • 华为mate30pro是2k屏吗(mate30pro支持2k吗)

    华为mate30pro是2k屏吗(mate30pro支持2k吗)

  • wolte通话是什么意思(什么叫v0lte通话)

    wolte通话是什么意思(什么叫v0lte通话)

  • 人人影视怎么播放(人人影视app怎么用)

    人人影视怎么播放(人人影视app怎么用)

  • 苹果x录音怎么没声音(苹果x录音怎么剪辑)

    苹果x录音怎么没声音(苹果x录音怎么剪辑)

  • 怎样申请抖音号小号(怎样申请抖音号不用手机号)

    怎样申请抖音号小号(怎样申请抖音号不用手机号)

  • 小米6触屏失灵一招解(小米6触屏失灵怎么关机)

    小米6触屏失灵一招解(小米6触屏失灵怎么关机)

  • 机械师笔记本是哪国的(机械师笔记本是几线)

    机械师笔记本是哪国的(机械师笔记本是几线)

  • 小米8如何连接电脑(小米8如何连接手机)

    小米8如何连接电脑(小米8如何连接手机)

  • 大数据-你投的简历真的是你认为的工作么?(大数据投资发展有限公司)

    大数据-你投的简历真的是你认为的工作么?(大数据投资发展有限公司)

  • 个人所得税红利20%
  • 退回以前年度教育附加费
  • 结转完工入库产品成本计算
  • 支付宝支付高速公路发票怎么打印
  • 个人所得税申报操作流程
  • 养老险的基数
  • 企业所得税大白话解释
  • 发票已缴销什么意思
  • 员工拓展培训进度怎么写
  • 出口商品一定要有条形码吗
  • 生产企业电费要不要计提?
  • 小微 小型微利
  • 一次性收取跨年租金房产税怎么交
  • 开了发票未收款
  • 分公司筹备方案
  • 苗木免税票能随便开吗
  • 车辆购置税会计科目怎么做账
  • 企业给学校捐款的申请怎么写
  • 销售折扣单独开票
  • 未分配利润分配利润分录
  • 报销伙食费的会计分录
  • 合并范围外关联方交易是否抵消
  • 本期用于购建不动产的扣税凭证怎么填
  • 在建工程进项税额转出
  • 代发工资如何合理避税
  • 赡养老人支出如果有四个子女都要填吗
  • 路由器和交换机用什么线连接
  • 苹果14数据线
  • 如何进行抵债资金管理
  • 古罗马广场意大利
  • 蒙特雷景点
  • 琼斯的大海怪
  • 编译安装php8
  • 月收入10万以下免增值税
  • php批量删除文件
  • 哪里能找到前端练手项目教程
  • 返还土地出让金违法吗?
  • 公司员工餐费会计分录
  • 织梦使用手册
  • 织梦添加文章如何修改高级参数
  • 进项发票抵扣税率
  • 软件企业主营业务活动说明范文
  • 扣供应商货款怎么入账
  • 暂估入账的原材料有成本差异吗
  • sql连接查询中AB
  • sqlserver怎么把数据库导出来
  • 设计公司成本核算分录
  • 以前年度损益调整会计分录
  • 工商年报纳税总额从哪看
  • 当月计提的工资,次月申报吗
  • 发出商品 会计科目
  • 抵账房买卖流程
  • 用信用卡消费扣谁的手续费
  • 偷税漏税追溯年限怎么算
  • 固定资产计提折旧的原则
  • 预付物业费会计分录
  • 平均增长率计算公式怎么算
  • 公司发放员工工资不走账
  • 编制合并财务报表的依据是纳入合并
  • sqlserver升级到2016
  • mysql缓冲区
  • guest怎么用
  • rpm命令的作用是什么
  • centos如何删除用户
  • mysql服务器的安装与配置
  • win10安全问题
  • 怎么用windows
  • python rgb转cmyk
  • html用div来写表格
  • 链接的链
  • js字符串的操作方法
  • httprequst向服务端发送请求错误
  • python错误和异常处理
  • 陷阱类过关游戏
  • 哈尔滨二手房交易流程
  • 百望电子发票查询下载
  • 铁岭医保网上怎么交费
  • 国家税务局机打发票可以报销吗
  • 生产企业出口退税申报流程操作
  • 2019年十堰市高中录取分数线
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设