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

  • 企业所得税如何做分录
  • 特许权使用费所得包括
  • 税盘维护费抵扣
  • 土地交易服务费属于非税收入吗
  • 其他应付款包括哪些内容口诀
  • 其他应收款的对方科目有哪些
  • 签证费没有发票可以入账吗
  • 税务系统 受理
  • 存货核算与销售核算直接联系的是
  • 原始凭证的主要类型
  • 报销业务招待费用主题
  • 当留底税额大于退税额会计分录怎么写?
  • 计提税金与缴纳有差额
  • 哪些情形可以补胎
  • 售后回租 出租方
  • 销售已使用的固定资产简易计税
  • 特种设备年检费怎么开具发票
  • 一般纳税人兼营不同税率的货物或应税劳务
  • 怎么在安全模式下卸载更新
  • 联想y400怎么装win10
  • commandlineoptionsyntaxerror翻译详情
  • windows无法访问共享文件夹
  • 苹果手机系统更新在哪里找
  • 预付账款是企业销售过程中形成的一种非货币形式的债权
  • 不能抵扣的费用
  • 营业外支出是否需要发票
  • 公司换基本户需要多久
  • 研发费用没有发票可以加计扣除吗
  • 油费餐费入什么科目
  • 办理不动产证需要什么手续及证件
  • 担保公司代偿账户是什么
  • 什么公司可以开专票
  • 备用金需要发票吗?收据可以报销吗
  • code particle
  • 我的第一次作文400字左右
  • 无需本地部署的软件
  • flex布局用法
  • route命令的作用
  • nohup命令挂不上 每次都直接退出
  • 织梦栏目描述调用
  • 香港公司代收国际汇款税务怎么处理
  • 购买汽车抵扣增值税
  • 会议费可以开餐费吗
  • 差旅费可以抵扣嘛
  • 新会计准则规定
  • 如何恢复sql数据库
  • 所得税营业成本包括管理费用吗
  • 开具发票要注意的方面是有哪些?
  • 材料暂估入库时需要考虑增值税进项税吗
  • 暂估入库结转成本后如何冲红
  • 去年计提的费用今年取得发票 汇算清缴
  • 当天开具的发票当天不能勾选认证吗?
  • 主营业务利润率反映了企业的什么能力
  • 母子公司之间的借款利息支出增值税能否抵扣
  • 医保卡收到钱
  • 公司变更名字后,公账怎么办
  • 计提工会经费的工资总额包括五险一金吗
  • 发票找不到了怎么操作
  • 年底计提利息会计分录
  • 什么是递延所得税资产
  • 建账有哪些步骤,每个步骤有哪些注意事项
  • ios 数据库版本升级
  • mysql 5.6 从陌生到熟练之_数据库备份恢复的实现方法
  • windows7开机黑屏安全模式也进不去
  • win xp 系统
  • Mac借助其他电脑做系统
  • mac怎么共享网络给iphone
  • win7安装软件后所有打开变成记事本
  • debian怎么配置ip
  • win8使用教程和技能
  • 鼠标焦点离开触发查询
  • 批处理 删除指定文件
  • Node.js发送HTTP客户端请求并显示响应结果的方法示例
  • 交互式shell是什么意思
  • unity 断点
  • js实现滑动效果
  • js原型作用
  • 中国有多少人2022
  • 我们要什么行政执法监督机制和能力建设严格落实行政
  • 关于啤酒包装物押金,下列正确的是( )
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设