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

  • 热水器怎么清洗视频教程全过程(热水器怎么清洗)(燃气热水器怎么清洗)

    热水器怎么清洗视频教程全过程(热水器怎么清洗)(燃气热水器怎么清洗)

  • 华为nova4是几核(华为nova4e处理器)

    华为nova4是几核(华为nova4e处理器)

  • 苹果xr怎么退出正在运行的程序(苹果xr怎么退出恢复模式)

    苹果xr怎么退出正在运行的程序(苹果xr怎么退出恢复模式)

  • oppor15咋取消耳机模式(oppor15手机怎么取消耳机模式)

    oppor15咋取消耳机模式(oppor15手机怎么取消耳机模式)

  • iphone12什么时候上市有什么功能(iphone12什么时候正式发售)

    iphone12什么时候上市有什么功能(iphone12什么时候正式发售)

  • 什么是VNP?(什么是VNP)

    什么是VNP?(什么是VNP)

  • 华为鲲鹏产业是什么(华为鲲鹏公司)

    华为鲲鹏产业是什么(华为鲲鹏公司)

  • 哔哩哔哩转正用户是什么意思(哔哩哔哩转正入口在哪)

    哔哩哔哩转正用户是什么意思(哔哩哔哩转正入口在哪)

  • 华为单声道音频要开吗(华为单声道音频怎么关闭)

    华为单声道音频要开吗(华为单声道音频怎么关闭)

  • lxe是什么文件(lxe是什么文件格式)

    lxe是什么文件(lxe是什么文件格式)

  • a1443是苹果几的充电器(a1432是苹果几)

    a1443是苹果几的充电器(a1432是苹果几)

  • 电脑没网怎么连接手机热点(电脑没网怎么连接打印机)

    电脑没网怎么连接手机热点(电脑没网怎么连接打印机)

  • 苹果换手机怎么把手机所有东西导出(苹果换手机怎么把微信聊天记录转移)

    苹果换手机怎么把手机所有东西导出(苹果换手机怎么把微信聊天记录转移)

  • 怎么用手机下载歌到mp3(怎么用手机下载歌曲到内存卡)

    怎么用手机下载歌到mp3(怎么用手机下载歌曲到内存卡)

  • 抖音直播怎么放电影(抖音直播怎么放图片在屏幕上)

    抖音直播怎么放电影(抖音直播怎么放图片在屏幕上)

  • 酷我音乐盒怎么k歌(酷我音乐盒怎么下载mp3格式的歌曲?)

    酷我音乐盒怎么k歌(酷我音乐盒怎么下载mp3格式的歌曲?)

  • 高逾数丈的意思是什么(高逾数丈的读音)

    高逾数丈的意思是什么(高逾数丈的读音)

  • 怎么关闭qq头像分享(怎么关闭qq头像同步到空间)

    怎么关闭qq头像分享(怎么关闭qq头像同步到空间)

  • 京东商家不退款咋办(京东商家不退款,怎么申请平台介入)

    京东商家不退款咋办(京东商家不退款,怎么申请平台介入)

  • ADSL MODEM安装好无线路由器后无法上网怎么办(安装adsl modem必须安装什么协议)

    ADSL MODEM安装好无线路由器后无法上网怎么办(安装adsl modem必须安装什么协议)

  • CSDN独家原创|YOLOv5改进、YOLOv7改进、YOLOv8改进、YOLOX改进目录一览|YOLO改进模型全系列目录(芒果书系列) | 人工智能专家老师联袂推荐(csdn创作)

    CSDN独家原创|YOLOv5改进、YOLOv7改进、YOLOv8改进、YOLOX改进目录一览|YOLO改进模型全系列目录(芒果书系列) | 人工智能专家老师联袂推荐(csdn创作)

  • 为员工集中购买医疗保险
  • 购入交通运输设备计入什么科目
  • 注册资本印花税按年申报还是按次申报
  • 金税盘技术维护费怎么申报
  • 未达起征点的增值税怎么账务处理
  • 返利平台可信吗
  • 物业公司支付出的费用
  • 政策减免是什么意思
  • 银行开户许可证什么时候开始取消的
  • 普通发票打歪了可以用吗
  • 小规模纳税人代收水电费税率
  • 城建税税收减免政策
  • 公司将自产产品奖励员工
  • 电子商务出纳的岗位职责
  • 小规模专票普票区别
  • 税率16降到13什么时候实施
  • 固定资产处置流程
  • 免税收入和不征税收入有哪些?怎么记忆
  • 笔记本windows10截屏
  • 债券类资产的远期合约是什么
  • 笔记本电脑按键掉了怎么修
  • win7右键设置方法
  • win7系统还原系统保护关闭
  • 固定资产出租需交什么税
  • 支付代销手续费缴纳增值税吗
  • 题管理录入新内容
  • 视同销售行为的涉税处理?
  • 劳务报酬怎么做帐
  • vite配置详解
  • 购买材料支出明细表
  • 长期待摊费用的摊销分录
  • 科技推广和应用服务业属于第几产业
  • elemental ui
  • 用html语言完成以下内容
  • 若依框架前端改造
  • span标签中的字符串怎么获取
  • vue环境搭建的几种方法
  • 联营单位投入的资金属于资产吗
  • 史上伟大电影
  • 代扣代缴境外增值税税率是多少
  • 增值税补交还有没有责任
  • c语言中使用指针的好处
  • springcloud分布式微服务组件
  • sql server 判断数据是否存在
  • 收回以前年度多发奖金分录
  • 小企业会计准则适用于哪些企业
  • 去年企业所得税多计提怎么调整
  • 残疾人就业保障金会计分录怎么做
  • 递延所得税会计处理全过程
  • 销售货物的流程
  • 新公司期初余额怎么算
  • 广告费用怎么做账
  • 哪些资产减值损失一经计提不得转回
  • 新公司初始建账
  • mysql表字段设置默认值
  • sql数据库对象
  • sqlserver substring函数使用方法小结
  • 蓝屏service
  • Ubuntu Kylin 14.10默认的屏幕分辨率怎么更改?
  • linux lxd
  • 装win7提示失败怎么办
  • vi编辑器是干什么的
  • 磁盘限制
  • win8命令提示符怎么运行命令
  • win7保存桌面不见了怎么办
  • 未知类型的文件怎么打开
  • perl脚本教程视频
  • js动态创建元素链接
  • 代码的历史
  • 用nodejs做的项目
  • js展示
  • nodejs基础
  • 单向链表的基本操作
  • android中的几种动画
  • eclipse项目导入后有红叉
  • 广西公安厅有几个处长
  • 河北国家税务局发票查询系统
  • 企业房产税公式
  • 化妆品的消费税税率为15%的比例税率
  • 企业收到上一年增值税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设