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

  • 笔记本f12键怎么打开(笔记本f12功能键怎么打开)

    笔记本f12键怎么打开(笔记本f12功能键怎么打开)

  • 华硕电脑怎么进入安全模式(华硕电脑怎么进入修复模式)

    华硕电脑怎么进入安全模式(华硕电脑怎么进入修复模式)

  • 小红书怎么拉黑对方(小红书怎么拉黑粉丝啊)

    小红书怎么拉黑对方(小红书怎么拉黑粉丝啊)

  • 小天才怎么取消禁用视频通话(小天才怎么取消呼叫限制)

    小天才怎么取消禁用视频通话(小天才怎么取消呼叫限制)

  • 锂电池长期不用怎么保存(锂电池长期不用容量会变小吗)

    锂电池长期不用怎么保存(锂电池长期不用容量会变小吗)

  • 微信一秒钟语音怎么播放很长的音乐(微信一秒钟语音时间很长)

    微信一秒钟语音怎么播放很长的音乐(微信一秒钟语音时间很长)

  • 天猫退款几天可以到账(天猫退款最长时间)

    天猫退款几天可以到账(天猫退款最长时间)

  • 存储单位从小到大的关系(存储单位从小到大的换算)

    存储单位从小到大的关系(存储单位从小到大的换算)

  • 底噪和电流声怎么区别(底噪会随音量增大吗)

    底噪和电流声怎么区别(底噪会随音量增大吗)

  • 苹果手机没电了还可以查位置吗(苹果手机没电了怎样快速恢复电量)

    苹果手机没电了还可以查位置吗(苹果手机没电了怎样快速恢复电量)

  • 待机快捷键按哪个(待机键是什么键)

    待机快捷键按哪个(待机键是什么键)

  • 手机怎么把照片变透明(手机怎么把照片弄成一寸)

    手机怎么把照片变透明(手机怎么把照片弄成一寸)

  • 手机如何设置紧急联系人(手机如何设置紧急报警电话)

    手机如何设置紧急联系人(手机如何设置紧急报警电话)

  • word无法修改内容(word无法修改内容怎么办)

    word无法修改内容(word无法修改内容怎么办)

  • 趣步人脸认证失败为什么(趣步注册中身份证被使用怎么办)

    趣步人脸认证失败为什么(趣步注册中身份证被使用怎么办)

  • 美团订房怎么联系商家(美团订房怎么联系美团客服电话)

    美团订房怎么联系商家(美团订房怎么联系美团客服电话)

  • zar是什么牌子(hm是什么牌子)

    zar是什么牌子(hm是什么牌子)

  • p30支持防水吗(华为p30p可以防水吗)

    p30支持防水吗(华为p30p可以防水吗)

  • 如何消除华为弹出广告(如何消除华为弹窗提示)

    如何消除华为弹出广告(如何消除华为弹窗提示)

  • 苹果8p发烫很严重怎么办(苹果8p手机发烫正常吗)

    苹果8p发烫很严重怎么办(苹果8p手机发烫正常吗)

  • wifi可使用wps是什么(wifi可使用wps是什么意思怎么连)

    wifi可使用wps是什么(wifi可使用wps是什么意思怎么连)

  • 如何使用ghost win10任务栏连接到wifi无法访问互联(如何使用ChapGPT)

    如何使用ghost win10任务栏连接到wifi无法访问互联(如何使用ChapGPT)

  • 前端微信小程序开发基础(前端微信小程序支付功能怎么实现)

    前端微信小程序开发基础(前端微信小程序支付功能怎么实现)

  • 汽车保养 美容
  • 购买财务软件做什么科目
  • 财产租赁所得怎么计算个人所得税
  • 发给员工的福利费可以全部税前抵扣吗
  • 开的税票必须过期怎么办
  • 员工单独购买工伤保险可以吗
  • 公司代缴个税分录
  • 发票遗失如何报销
  • 个人独资企业处罚听证的标准
  • 补提以前年度折旧
  • 公司委托收款该怎么办
  • 银行承兑汇票到期日后多久可以承兑
  • 高管培训费不能税前列支
  • 行政单位在建工程入账
  • 发行股票购买资产并募集是利好吗
  • 建安企业工资占比标准
  • 海运费需要代扣代缴吗
  • 不能抵扣的进项税怎么做账
  • 旅游业税率是多少,企业税是按季度缴纳吗
  • 关于增值税的问题有哪些
  • 企业购车可以一次性扣除吗
  • 收到财政补助资金怎么办
  • 小规模纳税人的增值税计入成本吗
  • 服务,不动产和无形资产扣除项目明细
  • 车辆 以旧换新
  • 投资企业流程
  • 房屋租赁进项税
  • 苹果电脑进入安全模式按什么键
  • php数组函数输出《咏雪》里有多少"片"字
  • php判断文件上传类型
  • 父子之间房屋赠与费用
  • framework core
  • 永续债进什么科目
  • 用友的应付单和付款单的区别各是什么时候填制
  • bert获取中文词向量
  • vscode安装选项
  • js实现功能
  • 承租人经营租赁账务处理
  • 定额发票需要交契税吗
  • 在建工程明细科目有土地使用权摊销吗
  • 收到购置税完税通知书
  • 社保退回的款怎么继承
  • 车间购买办公用品
  • 公司银行销户钱转到哪里去
  • 合并报表调整分录理解
  • 房开企业会计分录
  • sql server 2008数据库文件
  • 个税如何确认申报
  • 固定资产减值损失计入
  • 车辆购置税 购置
  • 减资如何账务处理
  • 城镇土地使用税减免税政策
  • 公司一般户需要纳税吗
  • 以前年度房租付了没计提
  • 投资的信托基金有哪些
  • 将税后利润首先用于增加投资
  • 出口退税对应的进项不能抵扣对吗
  • 旅行社代订的机票可以抵扣吗
  • 跨年度退货可以不退款吗
  • 免征增值税进项税额不得抵扣
  • 红字发票怎样记账
  • mysql 5.7.13 winx64安装配置方法图文教程
  • sqlserver存储过程在哪里
  • 简单介绍linux系统有哪些主要特点?
  • windows蓝屏代码大全及解决方案
  • 如何解决win10系统用户名有中文
  • win7虚拟xp系统怎么安装
  • qbupdate.exe - qbupdate是什么进程 有什么作用
  • win10开机cpu占用率100%
  • excel打开csv文件数据有丢失
  • SCHDPL32.EXE - SCHDPL32是什么进程 有什么用
  • 进程 电脑
  • windows7桌面背景怎么设置
  • node.js cookie-parser 中间件介绍
  • Ver、Vol、Ctty命令的使用教程
  • js正则检验手机号
  • androidstudio快捷生成代码
  • 开票系统开不了票
  • 济阳二七大集
  • 残疾人个人所得税减免政策2023
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设