WebSocket 的封装使用

import { ElMessage } from "element-plus";// 全局WebSocket实例   
let ws = null;   
let isConnected = false;   
let currentWsUrl = ''; // 用于存储当前的wsUrl   
let baseURL = 'ws://XXX.com:8081';const initWebSocket = (wsUrl, sendData) => {return new Promise((resolve, reject) => {// 检查wsUrl是否发生变化if (wsUrl!== currentWsUrl) {// 如果wsUrl发生变化,关闭已有的WebSocket连接if (ws) {ws.close();ws = null;isConnected = false;}currentWsUrl = wsUrl;// 创建新的WebSocket实例ws = new WebSocket(baseURL + wsUrl);}// 连接成功后的回调函数ws.onopen = function (params) {// console.log("客户端连接成功");isConnected = true;// 向服务器发送消息ws.send(JSON.stringify(sendData));};// 从服务器接受到信息时的回调函数ws.onmessage = function (e) {// console.log("收到服务器响应", e.data);var data = e.data;if (data!== undefined) {if (data.indexOf("{")!== -1) {try {let parsedData = JSON.parse(data);resolve(parsedData);} catch (error) {reject(error);}} else {reject(data);}}};// 连接关闭后的回调函数ws.onclose = function (e) {// console.log("关闭客户端连接");isConnected = false;};// 连接失败后的回调函数ws.onerror = function (evt) {ElMessage.error("连接失败了");};if (isConnected) {ws.send(JSON.stringify(sendData));}// 窗口关闭时,关闭websocket连接,防止连接还没断开就关闭窗口,这样服务端会抛异常。window.onbeforeunload = function () {if (ws) {ws.close();ws = null;}};});   
};export default initWebSocket;

 引入使用

import initWebSocket from "@/utils/webSocket.js";const getData = () => {let sendData = {type: "info",};initWebSocket(globalStore.wsUrl, sendData).then((res) => {if (res?.s === 1) {Object.assign(info, res?.d);} else {ElMessage.error(res?.d);}}).catch((err) => {ElMessage.error("WebSocket出现错误");});
};getData()

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Golang的代码质量分析工具

Golang的代码质量分析工具 一、介绍 作为一种高效、简洁、可靠的编程语言,被越来越多的开发者所喜爱和采用。而随着项目规模的增长和团队人员的扩大,代码质量的管理变得尤为重要。为了保障代码的可维护性、健壮性和可扩展性,我们需要借助代码…

JVM实战—9.线上FGC的几种案例

大纲 1.如何优化每秒十万QPS的社交APP的JVM性能(增加S区大小 优化内存碎片) 2.如何对垂直电商APP后台系统的FGC进行深度优化(定制JVM参数模版) 3.不合理设置JVM参数可能导致频繁FGC(优化反射的软引用被每次YGC回收) 4.线上系统每天数十次FGC导致频繁卡顿的优化(大对象问题…

蓝耘平台使用InstantMesh‌生成高质量的三维网格模型!3D内容创作!小白入门必看!!!

目录 引言 InstantMesh应用介绍 蓝耘平台与InstantMesh结合使用 如何部署(超简单) 第一步登录蓝耘平台 第二步点击应用商城 ​编辑 第三步选择InstantMesh 第四步点击部署 第五步点击快速启动应用 第六步即可体验该产品 总结 注册链接 引言…

LeetCode:106.从中序与后序遍历序列构造二叉树

跟着carl学算法,本系列博客仅做个人记录,建议大家都去看carl本人的博客,写的真的很好的! 代码随想录 LeetCode:106.从中序与后序遍历序列构造二叉树 给定两个整数数组 inorder 和 postorder ,其中 inorder …

aardio —— 虚表 —— 模拟属性框

写了个简单的属性框例程,抛砖引玉,期待你做出更丰富强大的功能。 可折叠行、可输入文本、可下拉选择、支持下拉选择图片、颜色等功能。 只有想不到,没有做不到,发挥你的想象力吧。 import win.ui; import godking.comboboxEx im…

word文档中的文档网格——解决相同行间距当显示出不同行间距的情况

1 问题 被一个行间距调疯了,就是样式改了没用,格式刷刷了没用。就是肉眼可以看出行间距完全不一样。 2 解决方法 1)修改论文正文(即出现问题文本的样式)样式:样式>修改>格式>段落>缩进和间距>取消"如果定义了…

CDP集群安全指南-静态数据加密

[一]静态数据加密的架构 CDP 支持两种加密组件,这些组件可以组合成独特的解决方案。在选择密钥管理系统(KMS)时,您需要决定哪些组件能够满足企业的密钥管理和加密需求。 CDP 加密组件 以下是 Cloudera 用于静态数据加密的组件描…

ACM算法模板

ACM算法模板 起手式基础算法前缀和与差分二分查找三分查找求极值分治法:归并排序 动态规划基本线性 d p dp dp最长上升子序列I O ( n 2 ) O(n ^ 2) O(n2)最长上升子序列II O ( n l o g n ) O(nlogn) O(nlogn) 贪心二分最长公共子序列 背包背包求组合种类背包求排列…

AcWing练习题:差

读取四个整数 A,B,C,D,并计算 (AB−CD)的值。 输入格式 输入共四行,第一行包含整数 A,第二行包含整数 B,第三行包含整数 C,第四行包含整数 D。 输出格式 输出格式为 DIFERENCA X,其中 X 为 (AB−CD) 的…

前端路由 Hash 和 History 模式原理对比区别

前端路由 Hash 和 History 模式原理对比区别 1. 基本概念 1.1 什么是前端路由 前端路由是指在单页应用(SPA)中,通过 JavaScript 来实现页面的切换和状态管理,而无需向服务器请求新的页面。主要有两种实现方式:Hash …

头歌实训数据结构与算法 - 字符串匹配(第2关:实现KMP字符串匹配)

任务描述 本关任务:编写一个程序,利用kmp算法求子串在主串中不重叠出现的次数。 实验目的:深入掌握KMP算法的应用。实验内容:编写一个程序,利用KMP算法求子串t在主串s中出现的次数,例如:s“aa…

enzymejest TDD与BDD开发实战

一、前端自动化测试需要测什么 1. 函数的执行逻辑,对于给定的输入,输出是否符合预期。 2. 用户行为的响应逻辑。 - 对于单元测试而言,测试粒度较细,需要测试内部状态的变更与相应函数是否成功被调用。 - 对于集成测试而言&a…

UE5通过蓝图节点控制材质参数

通过蓝图节点控制材质的参数 蓝图节点 在材质上设置标量值 和 在材质上设置向量参数值 Set Scalar Parameter Value on Materials Set Vector Parameter Value on Materials 这两个蓝图节点都可以在蓝图中,控制材质的参数值和向量值

MySQL秘籍之索引与查询优化实战指南

MySQL秘籍之索引与查询优化实战指南 目录 MySQL秘籍之索引与查询优化实战指南相关阅读索引相关EXPLAIN 版本 1. 初级篇1.1 【练体术】基础1.1.1 库操作1.1.1 表操作创建一个表增加表字段 1.1.2 增删改插入一条数据删除一条数据更新一条数据库 1.1.3 查询查询所有数据条件查询&a…

沁恒CH32V208GBU6蓝牙MTU二:减小连接间隔提升速度;修改GAP里面的连接参数提高兼容性

从事嵌入式单片机的工作算是符合我个人兴趣爱好的,当面对一个新的芯片我即想把芯片尽快搞懂完成项目赚钱,也想着能够把自己遇到的坑和注意事项记录下来,即方便自己后面查阅也可以分享给大家,这是一种冲动,但是这个或许并不是原厂希望的,尽管这样有可能会牺牲一些时间也有哪天原…

探索 Vue.js 的动态样式与交互:一个有趣的样式调整应用

修改日期备注2025.1.3初版 一、前言 今天和大家分享在 Vue.js 学习过程中开发的超酷的小应用。这个应用可以让我们通过一些简单的交互元素,如复选框、下拉菜单和输入框,来动态地改变页面上元素的样式哦 让我们一起深入了解一下这个项目的实现过程&…

Python应用指南:高德交通态势数据

在现代城市的脉络中,交通流量如同流动的血液,交通流量的动态变化对出行规划和城市管理提出了更高的要求。为了应对这一挑战,高德地图推出了交通态势查询API,旨在为开发者提供一个强大的工具,用于实时获取指定区域或道路…

整合版canal ha搭建--基于1.1.4版本

开启MySql Binlog(1)修改MySql配置文件(2)重启MySql服务,查看配置是否生效(3)配置起效果后,创建canal用户,并赋予权限安装canal-admin(1)解压 canal.admin-1…

物联网控制期末复习

第3章 物联网控制系统的过程通道设计 3.1 模拟量输出通道 3.1.1单模拟量输出通道的构成 计算机控制系统的模拟量输出通道将计算机产生的数字控制信号转换为模拟信号(电压或电流)作用于执行机构,以实现对被控对象的控制。 多D/A结构&#…

python生成、操作svg图片

生成svg图片 通过python生成svg图片的方法有许多,比如OpenCV的源码中有svgfig.py这个脚本可以用于生成svg图片(OpenCV的棋盘格图片可以通过这个方法生成),也可以使用svg.py的库,安装方法如下 pip install svg.py 下面是通过这个库生成一个简…