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

  • 红米k30pro整机重量是多少(红米k30pro整机重量)

    红米k30pro整机重量是多少(红米k30pro整机重量)

  • 企业支付宝提现到个人(企业支付宝提现要手续费吗)

    企业支付宝提现到个人(企业支付宝提现要手续费吗)

  • 路由器搜不到wifi(路由器搜不到wifi怎么办)

    路由器搜不到wifi(路由器搜不到wifi怎么办)

  • 苹果6s手机怎么清理内存空间不足(苹果6s手机怎么开机)

    苹果6s手机怎么清理内存空间不足(苹果6s手机怎么开机)

  • 华为nova7多少hz(华为nova7多少赫兹)

    华为nova7多少hz(华为nova7多少赫兹)

  • 一键锁屏有什么用(一键锁屏华为在哪里设置)

    一键锁屏有什么用(一键锁屏华为在哪里设置)

  • 苹果11与11pro的区别(苹果11与11pro的参数)

    苹果11与11pro的区别(苹果11与11pro的参数)

  • 爱奇艺怎么看播放量(爱奇艺怎么看播放历史)

    爱奇艺怎么看播放量(爱奇艺怎么看播放历史)

  • 亚马逊开店怎样发货(亚马逊开店怎么弄)

    亚马逊开店怎样发货(亚马逊开店怎么弄)

  • 格力空调制热外机声音大怎么回事(格力空调制热外机漏水是正常现象吗)

    格力空调制热外机声音大怎么回事(格力空调制热外机漏水是正常现象吗)

  • 运算器和什么的集合cpu(运算器和什么的集合体称为cpu)

    运算器和什么的集合cpu(运算器和什么的集合体称为cpu)

  • 华为手机怎么超级快充设置(华为手机怎么超频cpu)

    华为手机怎么超级快充设置(华为手机怎么超频cpu)

  • qq号被盗了怎么找回来手机号码换了(qq号被盗了怎么办手机号换了)

    qq号被盗了怎么找回来手机号码换了(qq号被盗了怎么办手机号换了)

  • 华为荣耀20s带nfc不(华为荣耀20S带红外遥控吗)

    华为荣耀20s带nfc不(华为荣耀20S带红外遥控吗)

  • vivo手机怎么连蓝牙耳机(vivo手机怎么连接蓝牙耳机)

    vivo手机怎么连蓝牙耳机(vivo手机怎么连接蓝牙耳机)

  • 竖排文档如何调整字间距(文档变竖排)

    竖排文档如何调整字间距(文档变竖排)

  • 京东我的预约怎么取消(京东我的预约怎么抢比较快)

    京东我的预约怎么取消(京东我的预约怎么抢比较快)

  • 第一台计算机的操作系统(第一台计算机的英文缩写)

    第一台计算机的操作系统(第一台计算机的英文缩写)

  • 怎么把视频分三层(怎么样把视频分三屏)

    怎么把视频分三层(怎么样把视频分三屏)

  • 苹果6sid锁能不能破解(苹果6pid锁)

    苹果6sid锁能不能破解(苹果6pid锁)

  • 不退群如何拒收信息(不退群如何拒收红包)

    不退群如何拒收信息(不退群如何拒收红包)

  • 数字锁定键是什么(数字锁定键什么用于数字小键盘使用)

    数字锁定键是什么(数字锁定键什么用于数字小键盘使用)

  • 苹果xr电池百分比在哪里设置(苹果XR电池百分比)

    苹果xr电池百分比在哪里设置(苹果XR电池百分比)

  • 全民k歌怎么发起约唱(全民k歌怎么发布录好的视频)

    全民k歌怎么发起约唱(全民k歌怎么发布录好的视频)

  • 2021.7最新win10专业版/企业版激活密钥推荐 附激活工具+教程(win10专业版19042.630)

    2021.7最新win10专业版/企业版激活密钥推荐 附激活工具+教程(win10专业版19042.630)

  • 前端LayUI框架快速上手详解(一)(前端框架源码)

    前端LayUI框架快速上手详解(一)(前端框架源码)

  • js中Array构造器的处理方式(js array)

    js中Array构造器的处理方式(js array)

  • 企业税收收入怎么计算
  • 国家税务总局操作指引
  • 经营用的电饭锅有哪些
  • 个体工商户个人所得税怎么申报
  • 建筑安装项目要求有哪些
  • 外贸业务收境外人民币
  • 增值税税率调整时间17变16
  • 资金周转率计算公式期初占用资金
  • 核定征收是每个月都要交税吗
  • 进口增值税关税怎么付
  • 货物运输时发生车祸
  • 预收货款属于资金投入吗
  • 递延收益的所得税影响
  • 风险纳税人原因查询
  • 财税〔2017〕39号
  • 注册资本 变更
  • 结转出租包装物的成本
  • 行政单位对固定资产购买保险
  • 进项税额能抵扣的几种情形
  • 小规模付增值税怎么做账
  • 社保已申报但未缴费有什么影响
  • 承兑汇票如何背书转让
  • 使窗口最小化的快捷键
  • 权益法核算下的顺流交易
  • 前期费用会计分录
  • 如何查询公司有没有报个税
  • 小规模纳税人增值税免税政策
  • 持有待售的非流动资产或处置组不再
  • 股东不用上班吗
  • 电脑管家系统异常要修复吗
  • 年终奖发放与补发的区别
  • 小米路由器开启ssh后怎么安装插件
  • win11系统怎么删除账户
  • php字符串赋值
  • 固定资产的折旧怎么算
  • 购买财务软件会有操作流程吗
  • 如何确定销售数量
  • thinkphp import
  • thinkphp count
  • 所有者权益变动表范本
  • react框架结构
  • php获取post请求参数
  • php短信验证免费接口配置
  • 图文详解一本通
  • vue3动态路由权限
  • vue3.0路由配置
  • vue前端面试官常问的问题
  • php常用的打印函数
  • java enum tostring
  • 视同销售在纳税明细表中怎么填
  • 哪些费用专票是免税的
  • 哪些情况可以开立基本账户
  • 开票软件服务费全额抵扣怎么做账
  • 上月暂估成本次月用冲回吗
  • 自产货物赠送客户账务处理
  • 单身租房子
  • 人力资源差额税率
  • 维护费要交税吗
  • 私产公产企业产
  • mssql server 2012(SQL2012)各版本功能对比
  • sql server如何重启
  • mysql jsonb
  • SQL语句查询数据量
  • mysql alter table命令修改表结构实例
  • 微软 win7
  • fedora最新版
  • Win10预览版怎么变回正式版
  • debian glibc
  • win7开始菜单在哪个文件夹
  • 无法打开文件exe
  • 在Linux下HTTPie工具的使用教程
  • unity3d c语言
  • angularjs内置了很多有用的服务
  • js 文件分割
  • jqueryattrprop区别
  • numpy使用心得
  • unity-gain
  • 死循环代码
  • 北京通个人认证
  • 内蒙古一般纳税人查询网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设