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

  • 苹果手机饿了么怎么取消会员自动续费(苹果手机饿了么怎么选择到店自取)

    苹果手机饿了么怎么取消会员自动续费(苹果手机饿了么怎么选择到店自取)

  • vivox70pro+指纹图标怎么设置(vivo x70 pro+指纹)

    vivox70pro+指纹图标怎么设置(vivo x70 pro+指纹)

  • 微信删了对方还能看到我朋友圈吗(微信删了对方还能发消息过来)

    微信删了对方还能看到我朋友圈吗(微信删了对方还能发消息过来)

  • opporeno4支持的防水级别是多少(opporeno4pro有防窥膜吗)

    opporeno4支持的防水级别是多少(opporeno4pro有防窥膜吗)

  • 淘宝怎么网上购物(如何在淘宝上网购)

    淘宝怎么网上购物(如何在淘宝上网购)

  • 刚办的手机卡可以注销吗(刚办的手机卡可以改银行卡预留手机号吗)

    刚办的手机卡可以注销吗(刚办的手机卡可以改银行卡预留手机号吗)

  • 手机耳机有杂音滋滋(手机耳机有杂音滋滋怎么办)

    手机耳机有杂音滋滋(手机耳机有杂音滋滋怎么办)

  • 驱动精灵检测不到声卡(驱动精灵检测不到显卡)

    驱动精灵检测不到声卡(驱动精灵检测不到显卡)

  • PowerPoint2010演示文稿的扩展名是(powerpoint 20104)

    PowerPoint2010演示文稿的扩展名是(powerpoint 20104)

  • 手机信号上出现HD是怎么回事(手机信号上出现h+是什么意思)

    手机信号上出现HD是怎么回事(手机信号上出现h+是什么意思)

  • ipad能读取u盘吗(ipad可以读取u盘吗)

    ipad能读取u盘吗(ipad可以读取u盘吗)

  • 小米cc9e支持无线快充吗(小米cc9e支持5gwifi)

    小米cc9e支持无线快充吗(小米cc9e支持5gwifi)

  • 苹果11怎么开防抖(苹果11怎么开防抖模式)

    苹果11怎么开防抖(苹果11怎么开防抖模式)

  • 怎样增加淘宝的心级(怎样增加淘宝的流量)

    怎样增加淘宝的心级(怎样增加淘宝的流量)

  • 佳能打印机三灯闪5下(佳能打印机三灯齐闪是什么问题)

    佳能打印机三灯闪5下(佳能打印机三灯齐闪是什么问题)

  • 微信红包企业皮肤怎么设置(微信红包 企业)

    微信红包企业皮肤怎么设置(微信红包 企业)

  • word设置页面纸张大小16开(word设置页面纸型)

    word设置页面纸张大小16开(word设置页面纸型)

  • 喵喵机如何使用(喵喵机如何使用云盘)

    喵喵机如何使用(喵喵机如何使用云盘)

  • 运算器能进行什么运算(运算器进行什么运算)

    运算器能进行什么运算(运算器进行什么运算)

  • psm是什么意思(空调psm是什么意思)

    psm是什么意思(空调psm是什么意思)

  • airpods可以换电池吗(airpods能更换电池吗)

    airpods可以换电池吗(airpods能更换电池吗)

  • 华为nemal00什么型号(华为ne0-al00)

    华为nemal00什么型号(华为ne0-al00)

  • 微信接口2次开发是什么意思(微信二次开发能做哪些功能)

    微信接口2次开发是什么意思(微信二次开发能做哪些功能)

  • tof3d立体摄像头是什么(3d立体摄像机)

    tof3d立体摄像头是什么(3d立体摄像机)

  • 小米手机有没有红包助手(小米手机有没有应用隐藏功能)

    小米手机有没有红包助手(小米手机有没有应用隐藏功能)

  • 苹果xr用的什么基带(苹果xr用的什么处理器)

    苹果xr用的什么基带(苹果xr用的什么处理器)

  • m3和i5的区别(m3与i5有什么区别)

    m3和i5的区别(m3与i5有什么区别)

  • 抖音可以自动播放下一条吗(抖音怎么下载视频到手机)

    抖音可以自动播放下一条吗(抖音怎么下载视频到手机)

  • 2016年最受欢饮的Linux发行版排行榜曝光(2016年最佳歌曲)

    2016年最受欢饮的Linux发行版排行榜曝光(2016年最佳歌曲)

  • 普票和增值税发票的区别
  • 发票在系统里作用大吗
  • 应纳税所得额为什么要减去60000
  • 其他收益科目是否征收企业所得税
  • 企业所得税年度申报
  • 供暖企业收取的容量热价费怎么计入收入
  • 品牌对企业收益的影响
  • 向职工支付职工福利费
  • 增值税预缴税金交错了怎么办
  • 持有待售的固定资产减值可以转回吗
  • 分公司与总公司承担责任的法律规定
  • 物业公司收物业费如何入账
  • 银行理财产品赎回
  • 公司租土地建厂房合法吗
  • 保险的月缴纳可以调整么?
  • 企业申请增值税专用发票
  • 税收奖励需要纳税吗
  • 个人所得税申报错误如何更正申报
  • 纳税申报意思
  • 个人年终奖如何交税
  • 个人抬头的医药费可以进费用吗
  • 增值税附加税什么情况交
  • 电子发票隔月可以报销吗
  • 企业所得税视同销售的捐赠扣除
  • 代扣代缴的社保需要计提吗
  • 餐饮个体户税务登记需要什么资料
  • 服装工业企业成立时间
  • 苹果电脑开机声音怎么关
  • 应付职工薪酬账户结构
  • 信息技术费用如何做分录
  • 安全生产费用怎么支出
  • 局域网的工作模式及特点
  • vue打开窗口
  • wordpress如何使用
  • 调制解调器报告了一个错误怎么弄
  • linuxssh免密登录
  • 房产公司财务工作内容
  • wwwxxx域名选择(www.xxx.com或者.cn)
  • 本期进项税额转出会计分录
  • 取得短期借款会计科目
  • cannot read properties null
  • php swoole框架
  • blat命令
  • python处理mysql如何拿到表头
  • 应收账款出售给银行账务处理
  • 印花税缴纳方式不包括哪些
  • 百旺金赋服务费不交会怎么样?
  • 现金折扣属于什么
  • 暂缓收缴工会经费申请
  • mysql语句性能优化
  • 限定性净资产是资产类科目吗
  • 高新企业奖励金怎么开票
  • 增值税发票过期一年未认证怎么办
  • 当月无销售要计提工资吗
  • 视同销售收入涉及税务如何做账?
  • 快递费属于办公费吗
  • 注册资金多少对公司有什么影响
  • 物流运输业务
  • 新收入准则要求
  • mysql的优化有哪几种
  • 32位的win7和64位的win7要选择哪个呢?它们有什么区别?
  • 在linux2.4.0版本中
  • centos7权限管理
  • freebsd使用
  • linux防御
  • centos如何删除bond
  • kb4012212安装失败
  • win10开机绿色
  • mac版本itunes
  • centos n1
  • dos命令行怎么打开
  • bat ping批处理
  • vue中使用类class
  • js文字循环滚动代码
  • jquery valid()
  • js类库编写
  • 点击电子税务局里的税务数字账户不跳转怎么回事
  • 社保申报截止日期每月2023年
  • 出口退税申报系统反馈读入
  • 顺德中学校徽图片大全1998年
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设