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

  • ai文件是什么(AI文件是什么文件)

    ai文件是什么(AI文件是什么文件)

  • 用户讨厌你做营销,不如试试这4种方法(用户反感)

    用户讨厌你做营销,不如试试这4种方法(用户反感)

  • 自动熄屏是什么意思(自动熄灭屏幕)

    自动熄屏是什么意思(自动熄灭屏幕)

  • 微信里视频号怎么关闭(微信里视频号怎么发短视频)

    微信里视频号怎么关闭(微信里视频号怎么发短视频)

  • 电脑d盘格式化对电脑有影响吗(电脑d盘格式化后还能找回资料吗)

    电脑d盘格式化对电脑有影响吗(电脑d盘格式化后还能找回资料吗)

  • 华为手机喇叭进水了声音变小了怎么办(华为手机喇叭进水了声音小怎么办)

    华为手机喇叭进水了声音变小了怎么办(华为手机喇叭进水了声音小怎么办)

  • 抖音评论怎么变夜间模式(抖音评论怎么变绿色)

    抖音评论怎么变夜间模式(抖音评论怎么变绿色)

  • 共享id能看到对方在浏览什么(共享id能看到对方位置吗)

    共享id能看到对方在浏览什么(共享id能看到对方位置吗)

  • b250主板支持9代cpu吗(b250主板能上8代u吗)

    b250主板支持9代cpu吗(b250主板能上8代u吗)

  • 拼多多电子面单要不要开通(拼多多电子面单多少钱一单)

    拼多多电子面单要不要开通(拼多多电子面单多少钱一单)

  • 淘宝卖家手机版是什么软件(淘宝卖家手机版下载)

    淘宝卖家手机版是什么软件(淘宝卖家手机版下载)

  • vivoy85什么时候上市的(vivoy85a什么时候上市)

    vivoy85什么时候上市的(vivoy85a什么时候上市)

  • 手机已用空间包括哪些内容(手机已用空间包括那些软件)

    手机已用空间包括哪些内容(手机已用空间包括那些软件)

  • 钉钉消息不提醒怎么办(三星钉钉消息不提醒)

    钉钉消息不提醒怎么办(三星钉钉消息不提醒)

  • 怎么将标题设置为艺术字(怎么将标题设置为页眉)

    怎么将标题设置为艺术字(怎么将标题设置为页眉)

  • ps扭曲置换怎么用(ps扭曲效果在哪里)

    ps扭曲置换怎么用(ps扭曲效果在哪里)

  • 华为mate30屏占比多少(华为mate30屏幕比例几比几)

    华为mate30屏占比多少(华为mate30屏幕比例几比几)

  • 怎么把jpg照片内存变小(怎么把jpg照片内存变小到10k)

    怎么把jpg照片内存变小(怎么把jpg照片内存变小到10k)

  • 三星note10+和s10+的区别(三星note10和s10+哪个好一点呢)

    三星note10+和s10+的区别(三星note10和s10+哪个好一点呢)

  • 金正电视怎么连接手机(金正电视怎么连接苹果手机投屏)

    金正电视怎么连接手机(金正电视怎么连接苹果手机投屏)

  • oppor17对比vivox23(oppor17对比vivoy50)

    oppor17对比vivox23(oppor17对比vivoy50)

  • 抖音聊天记录删了还可以恢复吗(抖音聊天记录删除怎么恢复回来)

    抖音聊天记录删了还可以恢复吗(抖音聊天记录删除怎么恢复回来)

  • 华为手机怎么开QQ音乐通知栏(华为手机怎么开启5g)

    华为手机怎么开QQ音乐通知栏(华为手机怎么开启5g)

  • qq怎么设闺蜜空间(在qq怎么设置闺蜜空间)

    qq怎么设闺蜜空间(在qq怎么设置闺蜜空间)

  • 小米手环可以测血压吗(小米手环可以测血氧吗)

    小米手环可以测血压吗(小米手环可以测血氧吗)

  • GNSS算法相关开源代码(含多传感器融合相关项目)(简述gnss数据处理流程)

    GNSS算法相关开源代码(含多传感器融合相关项目)(简述gnss数据处理流程)

  • 对标ChatGPT的开源中文方案(对标是啥)

    对标ChatGPT的开源中文方案(对标是啥)

  • 律师事务所个人所得税如何计算
  • 厂部固定资产折旧属于什么费用
  • 资本公积和盈余公积怎么提取
  • 增值税发票抵扣是什么意思
  • 分公司撤销跨区域转固定资产到总公司
  • 企业所得税成本没有发票怎么处理
  • 没有发票的费用可以抵扣企业所得税吗
  • 销售预付卡纳税税率
  • 小企业遵循什么会计准则
  • 以前年度损益调整借贷方向
  • 分公司非独立核算是什么意思
  • 残疾人一次性奖金
  • 发票一定要填数量吗
  • 计提长期债券利息分录怎么做
  • 个税速算扣除数是怎么计算出来的
  • 当期免抵税额和当期免抵退税额
  • 个人开劳务发票几个点
  • 工资个税合理避税
  • 出口退税申报显示疑点跳过可以转正式申报吗
  • 房地产土地成本计算公式
  • 国税申报纳税调整项目怎么填的?
  • 日记账的填制
  • 员工福利没有发票
  • 怎么查询企业的注册资金
  • 申请银行汇票手续费记账凭证
  • 公司有残疾人员怎么办
  • 实收资本怎么用
  • 预计负债属于什么类
  • 银行退回手续费的账务处理
  • php-ml
  • 固定资产内部抵消
  • PHP:pg_connection_busy()的用法_PostgreSQL函数
  • 国税0申报如何网上申报
  • 企业常用的成本核算方法有哪些
  • 社保申报已扣款还能作废吗
  • 毕业设计基于Linux系统的NFS服务器搭建
  • axios是干嘛的
  • vue-router + element-plus实现面包屑导航栏和路由标签栏
  • mksysb命令
  • 新法典离职
  • 其他应收款坏账处理
  • 营业执照更换法人需要哪些手续
  • mongodb介绍
  • 销货清单是否必须备案
  • 房地产企业购买礼品赠送客户
  • 跨年度冲收入,冲成本分录如何做?
  • 持有至到期投资和债权投资的区别
  • 会计的三个结转是什么
  • 商业承兑背书后怎么办
  • 应收账款的金额包括增值税吗
  • 收到上年度企业所得税退税怎么做账
  • 工业企业成本占比多少合适
  • 固定资产的残值率是什么意思
  • 小公司用什么财务软件做账
  • mysql事物的作用
  • sql server 数据库介绍
  • mysql处理海量数据
  • ubuntu怎么编辑文件
  • 电脑网页字体设置
  • 怎么提高xp系统运行速度
  • 苹果系统声音怎么设置方法
  • xp系统如何优化
  • window10 系统安装
  • Win10 Mobile 10586.312提前体验
  • 深入理解rcu
  • HttpURLConnection连接 详解
  • linux awk命令使用实例
  • js 根据时间排序
  • vue左侧菜单栏实现
  • android反编译apk
  • Unity3D&&TexturePacker
  • js校验密码复杂度
  • js实现的倒计时怎么用
  • 开票资料?
  • 完税证明和发票的关系
  • 办理授权税务事项有哪些
  • 如何开具分包发票流程
  • 重庆国税官网网址
  • 黄金增值税管理难点
  • 怎么登陆国税网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设