位置: 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年税率
  • 已认证的发票对公司影响
  • 如何使用u盘安装win11
  • 怎么认定是否为党员
  • win10开机黑屏几秒
  • 请问王者荣耀是谁发明的
  • 任务栏音量图标点击无反应
  • scureapp.exe - scureapp是什么进程 有什么用
  • 偷税漏税的会计要负什么责任
  • 建筑企业安装费计入什么科目
  • 公司要交什么税个人卖给公司的二手车
  • 预付购买材料款属于什么会计科目
  • 公司土地被政府占用
  • php框架开发教程
  • 非盈利组织盈利怎么办
  • 增值税检查的内容
  • 现在用yii框架的人还多么
  • javaweb重点知识总结
  • pyqt5如何安装
  • php跨域提交表单
  • md5 linux
  • 装修费摊销的分录是什么
  • 织梦模板安装完整教程
  • 借款合同 印花
  • 其他收益算主营业务收入吗
  • 原材料结转成本有几种方法
  • 社保代扣代缴的规定
  • 不抵扣的进项税为什么要交税
  • mysql在表中添加一个新的属性
  • 免征增值税政策的政策有哪些?
  • 外购商品用于宣传需要缴纳增值税吗
  • 小规模不开票怎么做账
  • 银行承兑汇票是什么意思
  • 损益类科目有哪些借贷方向
  • 基本户收到零余额转款怎么做分录
  • 子公司提的盈余公积合并时如何抵消
  • 银行承兑个人可以用吗
  • 公司对外投资企业与行政许可的区别是什么
  • 政府补助的房子叫什么
  • 发票失控进项转出所得税
  • 收到进项税发票
  • 来料加工和进料加工的相同之处
  • 银行利息为什么用红字
  • 专用发票怎么网上申领
  • mysql慢查询日志在哪里
  • mysql修改默认端口方法
  • fedora23安装
  • Android游戏开发案例教程小小弹球
  • UNITY开发数字孪生
  • java物流管理系统
  • 如何给图像应用css滤镜处理效果
  • 单页图片和文字怎么设置
  • express.js教程
  • Android5.1 SystemUI 启动流程
  • shell脚本中调用外部c程序
  • Jquery中巧用Ajax的beforeSend方法
  • unity资源库
  • 云南省低保查询网上查询
  • 账本遗失征管法处罚
  • 国税和地税是什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设