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

  • 电脑怎么切换另一个界面(电脑怎么切换另一个用户登录)

    电脑怎么切换另一个界面(电脑怎么切换另一个用户登录)

  • 滴滴历史订单保存多久(滴滴历史订单保留多久)

    滴滴历史订单保存多久(滴滴历史订单保留多久)

  • ios12.4为什么安装不了(ios12.4.9安装不了)

    ios12.4为什么安装不了(ios12.4.9安装不了)

  • 半导体封测是什么(半导体封测概念)

    半导体封测是什么(半导体封测概念)

  • 小米盒子开机卡死进不了系统界面怎么办(小米盒子开机卡住)

    小米盒子开机卡死进不了系统界面怎么办(小米盒子开机卡住)

  • 微信电脑和手机能同时视频么(微信电脑和手机信息不同步怎么办)

    微信电脑和手机能同时视频么(微信电脑和手机信息不同步怎么办)

  • 电信卡网速慢怎么办(电信卡网速慢怎么提速)

    电信卡网速慢怎么办(电信卡网速慢怎么提速)

  • oppoace2是曲面屏吗(opporenoace2是曲面屏吗)

    oppoace2是曲面屏吗(opporenoace2是曲面屏吗)

  • 苹果7p能连上wifi却不能上网(苹果7p为什么连上无线网却不能用)

    苹果7p能连上wifi却不能上网(苹果7p为什么连上无线网却不能用)

  • u盘可以下大型游戏吗(u盘可以下什么)

    u盘可以下大型游戏吗(u盘可以下什么)

  • ios越狱是什么意思(iphone越狱是什么意思啊)

    ios越狱是什么意思(iphone越狱是什么意思啊)

  • 快手新号容易上热门吗(快手号新号容易热门吗)

    快手新号容易上热门吗(快手号新号容易热门吗)

  • 世界上第一台计算机的电子元器件是什么(世界上第一台计算机的电子元器件主要是)

    世界上第一台计算机的电子元器件是什么(世界上第一台计算机的电子元器件主要是)

  • 抖音头像怎么设置全图(抖音头像怎么设置透明头像)

    抖音头像怎么设置全图(抖音头像怎么设置透明头像)

  • 华为nova6防不防水(华为nova6的防误触在哪)

    华为nova6防不防水(华为nova6的防误触在哪)

  • 怎样修改软件图标(怎么修改软件图)

    怎样修改软件图标(怎么修改软件图)

  • 手机上怎么显示拼音(手机上怎么显示海拔多少米)

    手机上怎么显示拼音(手机上怎么显示海拔多少米)

  • 手机qq浏览器收藏找回(手机QQ浏览器收藏的网址找不到了)

    手机qq浏览器收藏找回(手机QQ浏览器收藏的网址找不到了)

  • 外置内存卡怎么用(外置内存卡怎么在手机上使用)

    外置内存卡怎么用(外置内存卡怎么在手机上使用)

  • 图片ps怎么弄(图片ps怎么弄光滑反光)

    图片ps怎么弄(图片ps怎么弄光滑反光)

  • 探探花钱才能聊天吗(探探交钱才能聊天?)

    探探花钱才能聊天吗(探探交钱才能聊天?)

  • 荣耀20如何设置熄屏时间(荣耀20如何设置桌面时间)

    荣耀20如何设置熄屏时间(荣耀20如何设置桌面时间)

  • vivox27pro有没有计步器(vivoX27Pro有没有红外)

    vivox27pro有没有计步器(vivoX27Pro有没有红外)

  • postgres.exe是什么进程  postgres进程查询

    postgres.exe是什么进程 postgres进程查询

  • 小规模纳税人取得专票和普票区别
  • 税控盘没有清卡,反写怎么办
  • 小规模入账的收入分录
  • 个税里的累计专票是什么
  • 出资人和法人承担责任
  • 小规模个税每月限免额是多少
  • 成本收入不配比的风险有哪些
  • 计提社保公积金的会计分录
  • 手机专票 一般纳税人能抵扣吗
  • 长期股权投资成本法转权益法追溯调整
  • 增值税进项税额转出的账务处理
  • 盈余公积要是提多了能转回么
  • 收到投资担保公司的担保费发票的账务处理
  • 公司固定资产丢失谁负责
  • 跨省的分公司亏损需要缴纳所得税吗?
  • 施工分包分为哪些
  • 在文具公司工作怎么样
  • 增值税专用发票和普通发票的区别
  • 作为一名新手
  • 接手新公司涉税问题分析
  • 金蝶增加银行存款账户,期间不对
  • 普通发票税收
  • 软件企业销售服务符合增值税即征即退吗
  • 小规模手撕发票申报填在哪
  • 为什么有的发票没有发票章
  • ami bios怎么设置u盘启动
  • win11家庭版怎么激活
  • 公司之间往来借款利息怎么记账
  • php实现搜索的方式
  • 奖金发放的原则
  • 支付货款怎么做凭证
  • 收到借款金额
  • 连接云服务器超时
  • 出现又离开
  • 萤火虫发光器的用途
  • idea安装vue.js
  • 销售材料账务处理
  • JavaScript | 1000个判断条件难道要写了1000个 if ? 一文教你如何实现分支优化
  • 会计打印发票请求怎么写
  • 论文导读怎么做
  • 公司租赁个人车辆账务处理
  • 微信公众号认证主体是什么意思
  • python进行统计分析
  • 2022年最新公务接待用餐标准
  • 残保金补申报后处罚会自动取消吗
  • 企业财务报表有附注吗
  • MySQL数据库存储引擎
  • 基于stm32的毕业设计
  • 弥补以前年度亏损后怎么交所得税
  • mysql恢复备份文件
  • 用mysql的小技巧
  • 解决问题
  • 权益法转其他权益工具
  • 预缴增值税可以抵扣销项税吗
  • 集团公司向下属发评先奖金合法吗
  • 原材料结转下年怎么记
  • 投资收益的主要来源有
  • 在建工程预付款怎么做账
  • 私企做会计风险大吗
  • sqlserver增删改查执行语句
  • mysql5.7安装版下载
  • MySQL5.7中 performance和sys schema中的监控参数解释(推荐)
  • win8安装程序在哪里
  • cmd命令符大全
  • win8系统蓝屏后无法修复
  • /usr/bin/install: 无法创建一般文件‘/usr/local/man/man1/cjpeg.1’: 没有那个文件
  • cocos 2d x
  • ext.grid.gridpanel
  • js表单验证代码Email
  • 常用的批处理文件
  • 用python做
  • jqueryif判断
  • unity3d鼠标点击移动
  • java script怎么学
  • 税控盘如何查询上报汇总成功
  • 卷烟批发环节的消费税
  • 成品油消费税税目
  • 云南省税务局网上办税服务厅官网
  • 基本账号信息
  • 省级税务机关是什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设