vue3使用websocket

开启(具体是什么时候开启根据项目需求来决定)

let websocket = null;

const connectWebSocket = info => {
  // 如果已经存在连接,则先关闭
  if (websocket) {
    websocket.close();
  }
  console.log(info);
  const wsUrl = `ws://your url`;
  // 创建新的 WebSocket 连接
  websocket = new WebSocket(wsUrl);

  websocket.onopen = () => {
    console.log("WebSocket 连接成功");
  };

  websocket.onmessage = event => {
  // 处理收到的消息
  //event.data则是接口返回数据,需要根据接口格式自己去替换然后转成json。我这边暂时是这样处理的
    const val = event.data.replace(/'/g, '"');
    const data = JSON.parse(val);
    message.value = data;
  };

  websocket.onerror = error => {
    console.error("WebSocket 出现错误:", error);
  };

  websocket.onclose = () => {
    console.log("WebSocket 连接关闭");
    // 可以在此处设置重连逻辑
  };
};

关闭

// 一般是组件卸载时断开 WebSocket 连接
onUnmounted(() => {
  if (websocket) {
    websocket.close();
  }
});

疑问

因为websocket是一个不间断的请求,那么会一直存数据,好像会造成浏览器很大的内存影响。这个暂时没想到好的解决办法

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/953765.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ESP-IDF学习记录(5) 画一块esp32-c3 PCB板

最近看了半个多月,趁着嘉立创官方活动,研究esp32-c3规格书,白嫖PCB 和元器件。原本计划按照官方推荐的搞个四层板,结果打样太贵,火速改成双层板,用了官方的券。小于10*10,也可以使用嘉立创的免费打样。 下面…

nginx 实现 正向代理、反向代理 、SSL(证书配置)、负载均衡 、虚拟域名 ,使用其他中间件监控

我们可以详细地配置 Nginx 来实现正向代理、反向代理、SSL、负载均衡和虚拟域名。同时,我会介绍如何使用一些中间件来监控 Nginx 的状态和性能。 1. 安装 Nginx 如果你还没有安装 Nginx,可以通过以下命令进行安装(以 Ubuntu 为例&#xff0…

Netty 入门学习

前言 学习Spark源码绕不开通信,Spark通信是基于Netty实现的,所以先简单学习总结一下Netty。 Spark 通信历史 最开始: Akka Spark 1.3: 开始引入Netty,为了解决大块数据(如Shuffle)的传输问题 Spark 1.6&…

鸿蒙报错Init keystore failed: keystore password was incorrect

报错如下: > hvigor ERROR: Failed :entry:defaultSignHap... > hvigor ERROR: Tools execution failed. 01-13 16:35:55 ERROR - hap-sign-tool: error: Init keystore failed: keystore password was incorrect * Try the following: > The key stor…

IDEA的Git界面(ALT+9)log选项不显示问题小记

IDEA的Git界面ALT9 log选项不显示问题 当前问题idea中log界面什么都不显示其他选项界面正常通过命令查询git日志正常 预期效果解决办法1. 检查 IDEA 的 Git 设置2. 刷新 Git Log (什么都没有大概率是刷新不了)3. 检查分支和日志是否存在4. 清理 IDEA 缓存 (我用这个成功解决)✅…

ffmpeg硬件编码

使用FFmpeg进行硬件编码可以显著提高视频编码的性能,尤其是在处理高分辨率视频时。硬件编码利用GPU或其他专用硬件(如Intel QSV、NVIDIA NVENC、AMD AMF等)来加速编码过程。以下是使用FFmpeg进行硬件编码的详细说明和示例代码。 1. 硬件编码支…

65.在 Vue 3 中使用 OpenLayers 绘制带有箭头的线条

前言 在现代的前端开发中,地图已经成为许多项目的核心功能之一。OpenLayers 是一个强大的开源地图库,它提供了丰富的功能和高度的定制化支持。在本篇文章中,我将向大家展示如何在 Vue 3 中使用 OpenLayers 绘制带有箭头的线条。 我们将实现…

C++内存泄露排查

内存泄漏是指程序动态分配的内存未能及时释放,导致系统内存逐渐耗尽,最终可能造成程序崩溃或性能下降。在C中,内存泄漏通常发生在使用new或malloc等分配内存的操作时,但没有正确地使用delete或free来释放这块内存。 在日常开发过程…

Ubuntu上,ffmpeg如何使用cuda硬件解码、编码、转码加速

本文使用 Ubuntu 环境。Ubuntu 直接使用 APT 安装的就支持 CUDA 加速。本文使用这样下载的版本进行演示,你自己编译或者其他源的版本可能会不同。 ffmpeg 的一些介绍,以及 macOS 版本的 ffmpeg 硬件加速请见《macOS上如何安装(不需要编译安装…

linux: 文本编辑器vim

文本编辑器 vi的工作模式 (vim和vi一致) 进入vim的方法 方法一:输入 vim 文件名 此时左下角有 "文件名" 文件行数,字符数量 方法一: 输入 vim 新文件名 此时新建了一个文件并进入vim,左下角有 "文件名"[New File] 灰色的长方形就是光标,输入文字,左下…

调用企业微信新建日程 API 报 api forbidden 的解决方案

报错详细信息: {"errcode":48002,"errmsg":"api forbidden, hint: [1266719663513970651415782], from ip: xxx.xxx.xxx.xxx, more info at https://open.work.weixin.qq.com/devtool/query?e48002" } 解决方案: 1. 登…

rtthread学习笔记系列(4/5/6/7/15/16)

文章目录 4. 杂项4.1 检查是否否是2的幂 5. 预编译命令void类型和rt_noreturn类型的区别 6.map文件分析7.汇编.s文件7.1 汇编指令7.1.1 BX7.1.2 LR链接寄存器7.1.4 []的作用7.1.4 简单的指令 7.2 MSR7.3 PRIMASK寄存器7.4.中断启用禁用7.3 HardFault_Handler 15 ARM指针寄存器1…

微软与腾讯技术交锋,TRELLIS引领3D生成领域多格式支持新方向

去年 11 月,腾讯推出 Hunyuan3D 生成模型,是业界首个同时支持文字和图像生成 3D 的开源大模型。紧接着不到一个月,微软便发布了全新框架 TRELLIS,加入 3D 资产生成领域的竞争中。TRELLIS 支持多格式输出,包括辐射场、3…

【C++】类与对象(中上)(难点部分)

目录 💕1.类的默认成员函数 💕2.构造函数 💕3.析构函数 💕4.缺省值 💕5.拷贝构造函数 (最新更新时间——2025.1.14) 这世间没有绝境 只有对处境绝望的人 💕1.类的默认成员函数 默…

Apache Hop从入门到精通 第三课 Apache Hop下载安装

1、下载 官方下载地址:https://hop.apache.org/download/,本教程是基于apache-hop-client-2.11.0.zip进行解压,需要jdk17,小伙伴们可以根据自己的需求下载相应的版本。如下图所示 2、下载jdk17(https://www.microsoft…

springboot房屋租赁管理系统

Spring Boot房屋租赁管理系统是一种基于Spring Boot框架构建的,旨在解决传统租房市场中房源信息更新不及时、虚假信息泛滥、交易流程繁琐等问题的信息化解决方案。 一、系统背景与目的 随着城市化进程的加快和人口流动性的增强,租房市场需求急剧增长。…

计算机网络 (35)TCP报文段的首部格式

前言 计算机网络中的TCP(传输控制协议)报文段的首部格式是TCP协议的核心组成部分,它包含了控制TCP连接的各种信息和参数。 一、TCP报文段的结构 TCP报文段由首部和数据两部分组成。其中,首部包含了控制TCP连接的各种字段&#xff…

鸿蒙-页面和自定义组件生命周期

页面生命周期,即被Entry装饰的组件生命周期,提供以下生命周期接口: onPageShow:页面每次显示时触发一次,包括路由过程、应用进入前台等场景。onPageHide:页面每次隐藏时触发一次,包括路由过程、…

道旅科技借助云消息队列 Kafka 版加速旅游大数据创新发展

作者:寒空、横槊、娜米、公仪 道旅科技:科技驱动,引领全球旅游分销服务 道旅科技 (https://www.didatravel.com/home) 成立于 2012 年,总部位于中国深圳,是一家以科技驱动的全球酒店资源批发商…

【HarmonyOS NEXT】鸿蒙跳转华为应用市场目标APP下载页

【HarmonyOS NEXT】鸿蒙跳转华为应用市场目标APP下载页 一、问题背景: 如今,大家都离不开各种手机应用。随着鸿蒙系统用户越来越多,大家都希望能在鸿蒙设备上快速找到想用的 APP。华为应用市场里有海量的 APP,但之前从鸿蒙设备进…