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

  • 支付宝信用分最高分是多少(怎么看信用分)

    支付宝信用分最高分是多少(怎么看信用分)

  • 苹果x没有指纹锁吗(苹果13有没有指纹)

    苹果x没有指纹锁吗(苹果13有没有指纹)

  • 控制幻灯片放映的三种方式(自动播放幻灯片怎么设置)

    控制幻灯片放映的三种方式(自动播放幻灯片怎么设置)

  • 苹果手机有没有应用分身功能(苹果手机有没有隐藏软件的功能)

    苹果手机有没有应用分身功能(苹果手机有没有隐藏软件的功能)

  • 获取系统步数失败什么原因(获取运动步数失败是什么原因)

    获取系统步数失败什么原因(获取运动步数失败是什么原因)

  • 微信反复点赞会反复提醒吗(微信点赞会自动取消吗)

    微信反复点赞会反复提醒吗(微信点赞会自动取消吗)

  • 手机能连上wifi但是不能上网(手机能连上wifi电脑连上却不能上网)

    手机能连上wifi但是不能上网(手机能连上wifi电脑连上却不能上网)

  • cpu开盖什么意思(cpu开盖干什么)

    cpu开盖什么意思(cpu开盖干什么)

  • 微信拉黑了怎么发信息给对方(微信拉黑了怎么恢复好友)

    微信拉黑了怎么发信息给对方(微信拉黑了怎么恢复好友)

  • 能不能异地帮别人叫顺风车(能不能异地帮别人买医保)

    能不能异地帮别人叫顺风车(能不能异地帮别人买医保)

  • 华为nova7上面的孔是什么(华为nova7上面的灯)

    华为nova7上面的孔是什么(华为nova7上面的灯)

  • oppo手机突然关机打不开(OPPO手机突然关机)

    oppo手机突然关机打不开(OPPO手机突然关机)

  • 电脑供电不足会出现什么情况(电脑供电不足会卡顿吗)

    电脑供电不足会出现什么情况(电脑供电不足会卡顿吗)

  • 微脉圈是什么(微脉圈是什么情况)

    微脉圈是什么(微脉圈是什么情况)

  • 二维码收款多久到账(二维码收款多久有效)

    二维码收款多久到账(二维码收款多久有效)

  • ipad wifi版是什么意思(apple平板wifi版是什么意思)

    ipad wifi版是什么意思(apple平板wifi版是什么意思)

  • 京东订单已再投是什么意思(京东订单已再投原因集约地址)

    京东订单已再投是什么意思(京东订单已再投原因集约地址)

  • ios12如何清理数据(ios12怎么清理内存)

    ios12如何清理数据(ios12怎么清理内存)

  • qq空间扩列功能在哪里(qq扩列功能2021)

    qq空间扩列功能在哪里(qq扩列功能2021)

  • 小度在家远程监控对方知道吗(小度在家远程监控有声音吗)

    小度在家远程监控对方知道吗(小度在家远程监控有声音吗)

  • led power supply是什么意思

    led power supply是什么意思

  • 8gb+128gb是什么意思(8gb+128gb是多少)

    8gb+128gb是什么意思(8gb+128gb是多少)

  • 华为p30有nfc吗(p30有没有nfc功能)

    华为p30有nfc吗(p30有没有nfc功能)

  • Echarts地图的基本使用方法(echarts地图参数设置)

    Echarts地图的基本使用方法(echarts地图参数设置)

  • 【Web后端架构】2022年10个最佳Web开发后端框架(web后端开发框架有哪些)

    【Web后端架构】2022年10个最佳Web开发后端框架(web后端开发框架有哪些)

  • 公司给员工代办失业证
  • 增值税税控系统产品及维护服务价格
  • 工商税收是什么意思啊
  • 退回以前年度费用怎么做帐
  • 清算期间作为纳税年度
  • 公司代个人收承兑汇票
  • 苗木发票抵扣公式
  • 交通运输业安全心得体会范文
  • 诉讼管辖分为
  • 附加税里包括地税吗
  • 收购粮食怎么做账
  • 资产减值损失属于什么科目借方增加还是减少
  • 税收的凭证有哪几种
  • 企业如何增加净资产
  • 企业购入土地如何处理
  • 购买公司付款会计分录
  • 缴纳个人所得税会计分录
  • 售后服务对客户满意度的影响论文
  • win8电脑一键还原怎么操作
  • php中数组的常用函数及用法
  • 如何显示或隐藏编辑标记
  • 代扣个人缴纳社保费
  • 进口应税消费品会计分录
  • 企业合并分立
  • 存货非正常损失的所得税处理
  • vue app打包
  • 门面出租赚钱吗
  • 控制层框架
  • 多表关联join
  • vue调用同一个组件
  • 开源项目有什么用
  • 坏账准备收不回来怎么办
  • 《设计模式》
  • 小企业会计制度和企业会计制度的区别
  • 研发费用没有发票怎么做账
  • 织梦如何使用
  • 企业通讯费报销要求
  • 成立一般纳税人公司流程
  • sql server提示不允许保存更改
  • 公司房租只有房东交吗
  • 土地使用权转让法律规定
  • 个体户是什么样的
  • 研发人员差旅费可以资本化吗
  • 村委会靠什么赚钱
  • 重分类调整的内容包括什么
  • 收到员工交来的宿舍费
  • 通行费电子发票进项税额如何填报
  • 小规模没有销售额如何申报
  • 产品销售的账务处理办法
  • 销售货物时发票多开了金额如何处理?
  • 房地产业营改增税收政策与企业应对策略课后测试
  • 补交增值税税款怎么做账
  • 发票跨年冲红怎么做账
  • 转让专利权的使用权
  • 蔬菜销售方式
  • 劳务分包企业收入怎么算
  • 企业备用金怎么做账
  • 简单的辞职报告
  • mysql增删改查实例
  • win8 更新
  • 将IBM ServeRAID 8i卡的驱动整合到Win2003安装光盘里
  • win10执行数据保护如何开启
  • ubuntu常用操作
  • ntfs硬盘分区整数
  • xp系统登陆界面切换用户
  • mac声音怎么调大
  • win 8系统怎么样
  • 如何检测电脑能否上网
  • win7网络连接不显示
  • iptables: Unknown error 4294967295问题解决方法
  • babel es6转es5原理
  • bat 截取字符串
  • shell数据处理
  • django forms.py
  • Android网络(4):HttpClient必经之路----使用线程安全的单例模式HttpClient,及HttpClient和Application的融合
  • python 字典的字典
  • android性能测试
  • js模拟点击事件onclick
  • 税收征收管理与税收大数据分析
  • 小微企业企业所得税率
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设