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()
相关文章：
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 Prom…...
[算法] [leetcode-509] 斐波那契数
509 斐波那契数 斐波那契数 （通常用 F(n) 表示）形成的序列称为 斐波那契数列 。该数列由 0 和 1 开始，后面的每一项数字都是前面两项数字的和。也就是： F(0) 0，F(1) 1 F(n) F(n - 1) F(n - 2)，其中 n…...
解决CentOS 8 YUM源更新后报错问题：无法下载AppStream仓库元数据
背景介绍 在尝试更新CentOS 8的YUM源以使用阿里云镜像时，遇到了Failed to download metadata for repo appstream的错误。此错误通常出现在执行yum clean all && yum makecache命令之后，表明系统无法从指定的URL获取AppStream仓库的元数据。本文…...
HTML——49.header和footer标签
<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>header和footer标签</title></head><body><!--header和footer标签:是html5中新标签--><!--header:定义文档的页眉，通常用来定义可见…...
如何在 Spring Boot 中配置数据库？
在 Spring Boot 中配置数据库是一个相对简单的过程，通常涉及到以下几个步骤：添加数据库驱动依赖、配置数据源属性、以及可选的配置 JPA（如果使用）。下面是小编给大家编写的一个详细的指南，以MySQL 数据库为例。 文章目…...
Ant Design Pro搭建react项目
1、使用pro-cli 来快速的初始化脚手架，先全局安装 npm i ant-design/pro-cli -g pro create myapp 2、选择模板类型 pro 是基础模板，只提供了框架运行的基本内容，complete 包含所有区块，不太适合当基础模板来进行二次开发。&a…...
算法：切饼
对以下题目设计一个算法：切饼 假设：有一张很大很大的饼，给你一把足够长的刀。要求：每次在饼上切一刀。 问题：n刀，最多能切出多少块饼？ n3 要解决这个问题，我们可以从数学归纳法的…...
LeetCode - 初级算法 数组（两个数组的交集 II）
两个数组的交集 II 这篇文章讨论如何求两个数组的交集，并返回结果中每个元素出现的次数与其在两个数组中都出现的次数一致。提供多个实现方法以满足不同场景需求。 免责声明：本文来源于个人知识与公开资料，仅用于学术交流。 描述 给定两个整数数组 nums1 和 nums2，以数…...
AWTK 在全志 tina linux 上支持 2D 图形加速
全志 tina linux 2D 图形加速插件。 开发环境为 全志 Tina Linux 虚拟机。 1. 准备 下载 awtk git clone https://github.com/zlgopen/awtk.git下载 awtk-linux-fb git clone https://github.com/zlgopen/awtk-linux-fb.git下载 awtk-tina-g2d git clone https://github.co…...
git 中 工作目录 和 暂存区 的区别理解
比喻解释 可以把工作目录和暂存区想象成两个篮子： 工作目录是你把所有东西（文件和更改）扔进去的地方。你正在修改的东西都放在这里。暂存区则是你整理好的东西放进第二个篮子，准备提交给老板（提交到仓库）…...
【Java回顾】Day3 继承|Override/Ovverload|多态|抽象类|封装|接口|枚举
学习资料 菜鸟教程 https://www.runoob.com/java/java-interfaces.html 继承|Override/Ovverload|多态|抽象类|封装|接口|枚举 继承 创建分等级层次的类，子类继承父类的特征、行为、方法 class 父类{ } class 子类 extends 父类{ super(); }一些性质 Java 不支持…...
redux react-redux @reduxjs/toolkit
redux团队先后推出了redux、react-redux、reduxjs/toolkit，这三个库的api各有不同。本篇文章就来梳理一下当我们需要在项目中集成redux，从直接使用redux，到使用react-redux，再到react-redux和reduxjs/toolkit配合使用，…...
javascript变量
变量 命名规范 以 字母、数字、下划线、美元符号 $ 组成、不能以 数字开头、且不能使用 js 中的关键字。 命名规范推荐采用小驼峰 命名法 。类名 采用 大驼峰命名。 var 声明变量的特点 在 script 上下文中定义的是 全局变量，全局变量会自动称为 window的属性。 在…...
第3章 总线
总线的定义 为多个部件 分时共享 公共信息传送线路。 系统之间、模块之间、芯片内部用来传递信息信号线集合。 共享 总线上可连接多个部件 各部件间相互交换信息 都可通过总线来。 分时 同一时刻 总线上只能传 一个部件信息。 采用标准总线的优点 简化系统软硬件设计 从硬件角度…...
\s*‘}, {‘b‘: r‘\1ty‘}, regex=True))
df.replace({‘b‘: r‘\s*(\.)\s*‘}, {‘b‘: r‘\1ty‘}, regex=True)
这段代码 df.replace({b: r\s*(\.)\s*}, {b: r\1ty}, regexTrue) 用于在 DataFrame 中进行替换操作，具体来说是针对 b 列，匹配并替换符合正则表达式的值。 详细解析： df.replace()：这是 Pandas 中的 replace() 方法，用…...
UE5通过蓝图节点控制材质参数
通过蓝图节点控制材质的参数 蓝图节点 在材质上设置标量值 和 在材质上设置向量参数值 Set Scalar Parameter Value on Materials Set Vector Parameter Value on Materials 这两个蓝图节点都可以在蓝图中，控制材质的参数值和向量值...
C# 设计模式（创建型模式）：建造者模式
C# 设计模式（创建型模式）：建造者模式 引言 在软件开发中，创建型设计模式主要关注对象的创建方式，其中建造者模式（Builder Pattern）是非常重要的一种。建造者模式通过一步一步构建一个复杂对象…...
LINUX下载编译gtk
下载 选择自己合适的版本 GNOME / gtk GitLab 下载meson GNOME / gtk GitLab 编译 BUILD_DIRbuilddir INSTALL_DIR${HOME}/gtk-resultMESON_PATHpwd/meson-1.6.1/meson.py${MESON_PATH} setup \--prefix ${INSTALL_DIR} \${BUILD_DIR}cd builddir${MESON_PATH} compile…...
linux上使用cmake编译的方法
一、hello 例程仅基于一个cpp文件 C文件或工程进行编译时可以使用g指令（需要对每一个程序和源文件分别使用g指令编译），当程序变大时，一个工程文件往往会包含很文件夹和源文件，这时我们需要的编译指令将越来越长&#…...
瑞_Linux中部署配置Java服务并设置开机自启动
文章目录 背景Linux服务配置步骤并设置开机自启动附-Linux服务常用指令 🙊 前言：由于博主在工作时，需要将服务部署到 Linux 服务器上运行，每次通过指令启动服务非常麻烦，所以将 jar 包部署的服务设置开机自启动&#x…...
洛谷 P1075 [NOIP2012 普及组] 质因数分解 C语言
题目： P1075 [NOIP2012 普及组] 质因数分解 - 洛谷 | 计算机科学教育新生态 题目描述 已知正整数 n 是两个不同的质数的乘积，试求出两者中较大的那个质数。 输入格式 输入一个正整数 n。 输出格式 输出一个正整数 p，即较大的那个质数。…...
非关系型数据库和关系型数据库的区别
🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…...
每日一些题
题解开始之前，给大家安利一个上班偷偷学习的好搭档，idea中的插件有一个叫 LeetCode with labuladong，可以在idea中直接刷力扣的题目。 朋友们上班没事的时候，可以偷偷摸几题。看八股的话，可以用面试鸭，也是…...
SQL-leetcode-197. 上升的温度
197. 上升的温度 表： Weather ---------------------- | Column Name | Type | ---------------------- | id | int | | recordDate | date | | temperature | int | ---------------------- id 是该表具有唯一值的列。 没有具有相同 recordDate 的不同行。 该表包…...
如何将服务器的镜像推送到阿里的容器镜像服务中
要将服务器的镜像推送到阿里云个人镜像仓库，请按照以下步骤操作： 前提条件： 确保已安装Docker1。您的阿里云账号或RAM用户已准备好，了解镜像仓库登录名和密码设置方法1。已在阿里云容器镜像服务(ACR)中创建个人版实例，…...
【深度学习基础之多尺度特征提取】多尺度图像增强（Multi-Scale Image Augmentation）是如何在深度学习网络中提取多尺度特征的？附代码
【深度学习基础之多尺度特征提取】多尺度图像增强（Multi-Scale Image Augmentation）是如何在深度学习网络中提取多尺度特征的？附代码 【深度学习基础之多尺度特征提取】多尺度图像增强（Multi-Scale Image Augmentation࿰…...
java springboot配置
1、下载和安装JDK 2、下载和安装Maven 3、下载VSCode插件 4、VSCode配置maven 5、创建SprngBoot项目 6、配置和运行项目 本文参考 前言 对于Java后端开发者而言最常用的开发工具则是IDEA了，而对于前端开发者而言最熟悉的开发工具便是VSCode，两者都…...
C 实现植物大战僵尸（二）
C 实现植物大战僵尸（二） 前文链接，C 实现植物大战僵尸（一） 五 制作启动菜单 启动菜单函数 void startUI() {IMAGE imageBg, imgMenu1, imgMenu2;loadimage(&imageBg, "res/menu.png");loadimage(&am…...
)
基于Spring Boot的宠物领养系统的设计与实现(代码+数据库+LW)
摘 要 如今社会上各行各业，都在用属于自己专用的软件来进行工作，互联网发展到这个时候，人们已经发现离不开了互联网。互联网的发展，离不开一些新的技术，而新技术的产生往往是为了解决现有问题而产生的。针对于宠物领…...
大数据存储Nosql
大数据存储Nosql复习篇 一、理论题、论述题 第1章 绪论 1、NoSQL数据库和关系数据库在设计目标上有何主要区别？ (1)关系数据库 优势：以完善的关系代数理论作为基础，具有数据模型、完整性约束和事务的强一致性等特点，借助索引机…...
Git常用指令
集中式管理工具 SVN 分布式管理工具 git 优点：速度，简单设计，允许高并发的分支，完全分布式 vi ~.txt //编写文件（分支） 工作区 git add ~.txt …...
2024 年发布的 Android AI 手机都有什么功能？
大家好，我是拭心。 2024 年是 AI 快速发展的一年，这一年 AI 再获诺贝尔奖，微软/苹果/谷歌等巨头纷纷拥抱 AI，多款强大的 AI 手机进入我们的生活。 今年全球 16% 的智能手机出货量为 AI 手机，到 2028 年，这…...
—Kubernetes-Namespace)
k8s基础(2)—Kubernetes-Namespace
一、Namespace概述 名字空间 在 Kubernetes 中，名字空间（Namespace） 提供一种机制，将同一集群中的资源划分为相互隔离的组。 同一名字空间内的资源名称要唯一，但跨名字空间时没有这个要求。 名字空间作用域仅针对带有…...
车路云网图安全风险复杂交织
随着网联汽车与智能交通深度融合，车云路一体协同发展，车联网迎来全面发展的战略机遇期，但在车联网高速发展的同时，网络安全威胁也不断敲响警钟，网络暴露面扩大，车联网网络安全风险快速升高。车路云一体化也…...
Markdown如何添加任务列表-复选框的添加
Markdown如何添加任务列表-复选框的添加 前言语法讲解使用场景及应用实例代码整和渲染结果小结其他文章快来试试吧☺️ Markdown如何添加任务列表-复选框的添加👈点击这里也可查看 前言 To-do任务列表是一种很常见的时间管理工具，它适用于工作计划&…...
Android 旋转盘导航栏
1.直接上源码： package com.you.arc;import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Point; import android.graphics.RectF; import android.support…...
matlab-数字滤波器设计与实战
文章目录 数字滤波器设计FIR 滤波器设计IIR 滤波器设计巴特沃斯滤波器切比雪夫 I 型滤波器切比雪夫II型椭圆滤波器线性相位与非线性相位零相位响应数字滤波器实战数字滤波器产生延迟的主要原因补偿滤波引入的延迟补偿常量滤波器延迟补偿与频率有关的延迟从信号中除去不需要的频…...
虚拟机中的时统卡功能和性能调优
【写在前面】 飞腾开发者平台是基于飞腾自身强大的技术基础和开放能力，聚合行业内优秀资源而打造的。该平台覆盖了操作系统、算法、数据库、安全、平台工具、虚拟化、存储、网络、固件等多个前沿技术领域，包含了应用使能套件、软件仓库、软件支持、软件适…...
[算法] [leetcode-20] 有效的括号
20 有效的括号 给定一个只包括 ‘(’，‘)’，‘{’，‘}’，‘[’，‘]’ 的字符串 s ，判断字符串是否有效。 有效字符串需满足： 左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭合…...
TDengine 如何进行高效数据建模
1.背景 数据建模对于数据库建立后整体高效运行非常关键，不同建模方式，可能会产生相差几倍的性能差别 2. 建库 建模在建库阶段应考虑几下几点： 建多少库 根据业务情况确定建库个数，TDengine 不支持跨库查询，如果业…...
2024.12.30（多点通信）
作业： 1、将广播发送和接收端实现一遍，完成一个发送端发送信息，对应多个接收端接收信息实验。 发送端 #include <myhead.h>#define PORT 8888 #define IP "192.168.124.255"int main(int argc, const char *argv[]) {//1、…...
)
前端路由layout布局处理以及菜单交互(三)
上篇介绍了前端项目部署以及基本依赖的应用，这次主要对于路由以及布局进行模块化处理 一、 创建layout模块 1、新建src/layout/index.vue <template><el-container class"common-layout"><!-- <el-aside class"aside">&l…...
Zynq PS端外设之GPIO
1. GPIO（通用输入/输出） GPIO外设有4个Bank，Bank0/1通过MIO连接到PS的引脚上；Bank2/3通过EMIO连接到PL的引脚上。 注意：Bank1的电平要改成LVCOMS 1.8 GPIO寄存器 寄存器： DATA_RO： 读取GPIO的输…...
Java 操作 PDF：从零开始创建功能丰富的PDF文档
Java 操作 PDF：从零开始创建功能丰富的PDF文档 引言环境准备依赖引入 创建PDF文档一键生成空白PDF添加表单字段（选项）添加电子签名添加公章图像 结论 引言 随着数字化办公的普及，PDF格式因其跨平台兼容性和安全性而被广泛应用于各…...
12.30-1-5学习周报
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 文章链接摘要Abstract一、方法介绍1.HAT-CIR2.Horde3.DWGRNet 二、实验总结 文章链接 https://arxiv.org/pdf/2405.04101 摘要 本博客介绍了论文《Continual lea…...
H3C Tftp 备份与恢复配置文件
pc 运行 tftp 软件与路由器相连。打开 tftp。 在交换机用户试图下，dir /all 命令查看设备的配置文件。 备份命令：将配置文件备份到地址为 10.10.10.2 的 tftp 服务器 <H3C>backup startup-configuration to 10.10.10.2 恢复命令：恢复配…...
【Matlab算法】基于改进人工势场法的移动机器人路径规划研究（附MATLAB完整代码）
基于改进人工势场法的移动机器人路径规划研究 结果图摘要1. 引言2. 方法说明2.1 基本原理2.2 改进策略3. 核心函数解释3.1 改进的斥力计算函数3.2 路径规划主函数4. 实验设计4.1 实验环境设置4.2 关键参数选择5. 结果分析5.1 实验结果5.2 性能分析附录：完整代码参考文献结果图…...
基于Springboot校园失物招领系统【附源码】
基于Springboot校园失物招领系统 效果如下： 系统登陆页面 物品页面 系统首页面 失物招领管理页面 失物认领页面 宣传视频页面 物品挂失留言管理页面 宣传视频类型管理页面 研究背景 在校园环境中，失物招领是一个常见的问题。传统的失物招领方式主要依…...
Vue 自定义指令
首先，我们知道vue中有很多自带指令，v-bind、v-on、v-model等。但在业务开发中，我们常见一些自定义指令如：v-copy、v-longpress等。那么如何定义自己所需的指令呢？ 接下来我们分别从指令注册、指令的钩子函数、指令的参…...
JAVA-制作小游戏期末实训
源码 import game.frame.Frame;public class App {public static void main(String[] args) {System.out.println("starting......");new Frame();} } package game.controller;import game.model.Enemy;public class EnemyController implements Runnable{private…...