当前位置：首页 > news >正文

vue webSocket

news 来源：原创 2025/9/10 22:24:34

vue webSocket

一、vue2 + webSocket
- webSocket.js
- vue2
二、vue3 + webSocket + ts
- webSocket.ts
- vue3

一、vue2 + webSocket

webSocket.js

export default {data() {return {websock: null, // 建立的连接，存websocket实例化的lockReconnect: false, // 是否真正建立连接timeout: 1000 * 5, // 5秒一次心跳timeoutObj: null, // 心跳倒计时serverTimeoutObj: null, // 心跳倒计时timeoutnum: null, // 断开 重连倒计时wsId: Math.ceil(Math.random() * 9999) + 1000, // uuid随机数(1000-9999)notification: null, // 进度提示};},created() {// 页面刚进入时开启长连接this.initWebSocket();},destroyed() {// 页面销毁时关闭长连接// this.websocketclose();this.websock.close();this.lockReconnect = true;if (this.timeoutnum)clearTimeout(this.timeoutnum);if (this.timeoutObj)clearTimeout(this.timeoutObj);if (this.serverTimeoutObj)clearTimeout(this.serverTimeoutObj);},methods: {// 建立连接，初始化weosocketinitWebSocket() {// 当前浏览器Location对象const nowLocation = window.location;// 协议 => http、httpsconst protocol = nowLocation.protocol;// host => ip:portconst host = nowLocation.host;// 后台地址，前面的ws不动，后面是后台地址，我是本地运行的所以填的本地，自行更改。再后面webSocket是后端的接口地址，uuid_test002是参数const wsuri = ((protocol.startsWith('https')) ? 'wss://' : 'ws://') + host + this.staticUrl + ((protocol.startsWith('https')) ? '/wssApi' : '/wsApi') + "/webSocket/" + this.wsId;this.websock = new WebSocket(wsuri); // 建立连接this.websock.onopen = this.websocketonopen; // 连接成功this.websock.onerror = this.websocketonerror; // 连接错误this.websock.onmessage = this.websocketonmessage; // 接收信息this.websock.onclose = this.websocketclose; // 连接关闭},// 链接成功时执行的方法websocketonopen() {this.websocketsend("heartbeat"); // 连接成功事件this.start(); // 开启心跳},// 连接失败事件websocketonerror(e) {console.log("WebSocket连接发生错误");this.reconnect(); // 重连},// 连接关闭事件websocketclose(e) {this.websock.close();this.reconnect(); // 重连},// 接收服务器推送的信息websocketonmessage(event) {const data = JSON.parse(event.data)switch (data.message) {case 'generateDataPacket':this.$showLoadMsg(data.data)breakcase 'importPackage-progress': // 进度通知if (!this.notification) {this.notification = this.$notify({title: '提示',message: '导入进度：' + data.data,duration: 0,// offset: 100,customClass: 'notify_top',});} else {this.notification.message = '导入进度：' + data.data}breakcase 'importPackage-success': // 成功this.$message.success(data.data)this.notification.close()this.notification = nullbreakcase 'importPackage-over': // 异常this.$message.error(data.data)breakcase 'importPackage-repeat': // 有重复数据需要展示this.repeatDataVisible = truedata.data.id = data.data.newData.iddata.data.loadRow = falsethis.repeatDataList.push(data.data)break}this.reset(); // 收到服务器信息，心跳重置},// 向服务器发送信息websocketsend(msg) {this.websock.send(msg);},// 重新连接reconnect() {var that = this;// 判断链接状态，true就是链接，false是断开，这里如果是链接状态就不继续执行了，跳出来。if (that.lockReconnect) {return;}// 把链接状态改为truethat.lockReconnect = true;// 没连接上会一直重连，设置延迟避免请求过多that.timeoutnum && clearTimeout(that.timeoutnum);that.timeoutnum = setTimeout(function () {that.initWebSocket(); // 初始化新连接that.lockReconnect = false; // 把链接状态改为false}, 5000);},// 重置心跳reset() {var that = this;// 清除时间clearTimeout(that.timeoutObj);clearTimeout(that.serverTimeoutObj);// 重启心跳that.start();},// 开启心跳start() {var self = this;// 有延迟时间的就清除掉self.timeoutObj && clearTimeout(self.timeoutObj);self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);// 从新创建计时器self.timeoutObj = setTimeout(function () {// 这里发送一个心跳，后端收到后，返回一个心跳消息if (self.websock.readyState == 1) {// 如果连接正常发送信息到后台self.websock.send("heartbeat");} else {// 否则重连self.reconnect();}self.serverTimeoutObj = setTimeout(function () {self.websock.close(); // 超时关闭}, self.timeout);}, self.timeout);},},
};

vue2

import webSocketMixin from '@/components/common/mixins/webSocket.js'
export default {mixins: [webSocketMixin],data() {return {repeatDataVisible: false,repeatDataList: [],}},mounted() {this.initList()},methods: {// 下载leadingOutDataPacket(row) {window.location.href = `${this.staticUrl}/globalApi/export?path=${encodeURIComponent(row.path)}`},// 导入数据leadingInDataPacket(row) {this.$confirm('&emsp;&emsp;导入数据会进行较长时间，期间系统将无法正常使用，请耐心等待。<br /><br />&emsp;&emsp;确定要导入数据吗？', '警告!', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',dangerouslyUseHTMLString: true}).then(() => {let param = {operate: 'importPackage',data: {path: row.path}}param = JSON.stringify(param)this.websock.send(param);}).catch(() => {this.$message.info('已取消')})},},
}

二、vue3 + webSocket + ts

webSocket.ts

代码

vue3

代码

vue webSocket

vue webSocket 一、vue2 webSocketwebSocket.jsvue2 二、vue3 webSocket tswebSocket.tsvue3 一、vue2 webSocket webSocket.js export default {data() {return {websock: null, // 建立的连接，存websocket实例化的lockReconnect: false, // 是否真正建立连接…...

编程日记 2025/9/10 22:24:34

Flask+Influxdb+grafna构建电脑性能实时监控系统

Influx下载地址，这里下载了以下版本influxdb-1.8.5_windows_amd64.zip 运行前需要先启动Influx数据库： 管理员方式运行cmd->F:->cd F:\influxdb\influxdb-1.8.5-1->influxd -config influxdb.conf，以influxdb.conf配置文件启动数…...

编程日记 2025/9/5 19:30:41

【golang/jsonrpc】go-ethereum中json rpc初步使用(websocket版本)

说在前面操作系统：win11 wsl2go-ethereum版本：1.15.8 关于json-rpc 官网 server 定义方法type CalculatorService struct{}func (s *CalculatorService) Add(a, b int) int {return a b }func (s *CalculatorService) Div(a, b int) (int, error) {…...

编程日记 2025/9/10 0:04:40

【C++】 —— 笔试刷题day_15

刷题day_15，继续加油！！！ 一、平方数题目解析题目给出一个数，让我们找到离它最近的一个平方数，然后输出即可。算法思路这道题总体来说还是非常简单的。这里先来看一种思路，就是从1开始找…...

编程日记 2025/9/9 7:52:35

网站备案详解

当小型网站开发完毕具备上线条件后，需要完成域名映射与相关备案，才能合法运维。就像婴儿出生后，要开出生证明并去派出所上户口一样，备案后就是有“户口”的网站啦。具体效果见：CodingLife 一：服务器部署 …...

编程日记 2025/9/10 1:04:56

IPV6应用最后的钥匙:DDNS-GO 动态域名解析工具上手指南--家庭云计算专家

DDNS-GO作为一款轻量级开源工具，其IPv6功能通过自动化动态域名解析，有效解决了家庭网络因运营商动态分配IPv6地址导致的访问难题。用户无需复杂配置，即可将冗长的IPv6地址绑定至易记域名，并实时同步IP变化，显著提升了N…...

编程日记 2025/9/10 22:16:11

ubuntu 系统安装Mysql

安装 mysql sudo apt update sudo apt install mysql-server 启动服务 sudo systemctl start mysql 设置为开机自启 sudo systemctl enable mysql 查看服务状态 （看到类似“active (running)”的状态信息代表成功） sudo systemctl status mysql …...

编程日记 2025/9/10 22:22:26

Go：方法

方法声明 type point struct { X, Y float64 }// 普通函数 func Distance(p, q Point) float64 {return math.Hypot(q.x - p.x, q.y - p.Y) }// Point类型的方法 func (p Point) Distance(q Point) float64 {return math.Hypot(q.x - p.x, q.y - p.Y) }方法声明与普通函数声…...

编程日记 2025/9/10 22:21:19

十四种逻辑器件综合对比——《器件手册--逻辑器件》

目录逻辑器件简述按功能分类按工艺分类按电平分类特殊功能逻辑器件应用领域详尽阐述 1 逻辑门一、基本概念二、主要类型三、实现方式四、应用领域 2 反相器工作原理基本功能主要应用常见类型特点未来发展趋势 3 锁存器基本概念工作原理主要类型…...

编程日记 2025/9/10 22:22:25

[网鼎杯 2022 青龙组]fakeshell

这个题，我们查壳之后是upx壳。但是当我们用upxunpack解包的时候我们解不出来。说明有人动过这个包。然后我们打开010eider，修改他的魔改将此处，我们改成UPX我们在解包就可以了。然后我重新使用upxunpack 之后我们成功得到未加密的文件…...

编程日记 2025/9/7 15:42:32

vivado + modelsim 仿真：Post-Synthesis Timing Simulation

Vivado 结合Modelsim 实现综合后仿真的一种方法 Post-Synthesis Timing Simulation 使用Vivado 生成仿真所需文件创建Modelsim工程参考文档使用Vivado 生成仿真所需文件 Vivado simulation 中可勾选Generate simulation scripts only;勾选-sdf_anno; 在testbanch文件中例化gl…...

编程日记 2025/9/4 8:30:18

可能存在特殊情况，比如控制台显示有延迟、缓冲问题等影响了显示顺序。

从控制台输出看，正常逻辑应是先执行 System.out.println(" 未处理异常演示 "); 输出对应文本，再因 arr 为 null 访问 length 触发 NullPointerException 输出异常信息。可能存在特殊情况，比如控制台显示有延迟、缓冲问题等影响…...

编程日记 2025/9/10 6:22:16

使用Python建模量子隧穿

引言量子隧穿是量子力学中的一个非常有趣且令人神往的现象。在经典物理学中，我们通常认为粒子必须克服一个势垒才能通过它。但是，在量子力学中，粒子有时可以“穿越”一个势垒，即使它的能量不足以克服这个势垒。这种现象被称为“量子隧穿”。今天，我们将通过 Python 来建…...

编程日记 2025/9/3 13:20:47

Python-控制语句

控制语句控制语句和逻辑思维控制语句：把语句组合成能完成一定功能的小逻辑模块分类：顺序、选择、循环“顺序结构”：代表“先执行a，再执行b”的逻辑“条件判断结构”：代表“如果…，则…”的逻辑“循环结构”：代表“如果…则重复执行…”的逻辑条件判断结构选择结构通…...

编程日记 2025/9/1 4:53:49

库学习04——numpy

一、基本属性二、创建数组 （一）arange a np.arange(10,20,2) # [10,12,14,16,18] 只有一个参数n的话，默认是从0到n-1的一维数组。 （二）自定义reshape a np.arange(12).reshape((3,4)) [[ 0 1 2 3][ 4 5 …...

编程日记 2025/9/10 3:49:28

DeepSeek在应急救援领域的应用解决方案

DeepSeek在应急救援领域的应用解决方案一、引言 1.1 应急救援领域现状近年来，我国应急管理工作全面加强，取得了显著成效。然而，一系列重特大灾害事故暴露出我国应急管理体系存在诸多问题短板。例如，在责任落实、应急处突、法…...

编程日记 2025/9/3 16:58:11

【HCIP】GRE VPN实验笔记

一、实验拓扑二、实验要求 1、按照图示配置IP地址 2、在R1和R3上配置默认路由使公网区域互通 3、在R1和R3上配置GRE VPN，使两端私网能够互相访问，Tunnel口IP地址如图 4、在R1和R3上配置RIPv2或者ospf或者静态，来传递两端私网路由三、实…...

编程日记 2025/8/27 13:11:41

ChatRex: Taming Multimodal LLM for Joint Perception and Understanding 论文理解和翻译

一、TL；DR MLLM在感知方面存在不足（远远比不上专家模型），比如Qwen2-VL在coco上recall只有43.9%提出了ChatRex，旨在从模型设计和数据开发两个角度来填补这一感知能力的缺口ChatRex通过proposal边界框输入到LLM中将其转…...

编程日记 2025/9/8 8:07:43

10min速通Linux文件传输

实验环境在Linux中传输文件需要借助网络以及sshd，我们可通过systemctl status sshd来查看sshd状态若服务未开启我们可通过systemctl enable --now sshd来开启sshd服务将/etc/ssh/sshd_config中的PermitRootLogin 状态修改为yes 传输文件 scp scp （Sec…...

编程日记 2025/9/4 17:50:00

CE、NCE、InfoNCE的演变过程

CE、NCE、InfoNCE的演变过程及数学推导和关系在机器学习和深度学习中，交叉熵（ C E CE CE）、噪声对比估计（ N C E NCE NCE）和信息噪声对比估计（ I n f o N C E InfoNCE InfoNCE）是三个紧密相关…...

编程日记 2025/9/8 16:58:11

在Vue项目的引入meting-js音乐播放器插件

开源项目：https://github.com/swzaaaaaaa/NBlog 1、开源项目中音乐播放插件的使用流程步骤1：下载meting-js相关文件在MetingJS官方仓库或其他可靠的CDN获取meting-js的JavaScript文件以及相关依赖（如APlayer的文件）。将它们下…...

编程日记 2025/9/10 18:43:00

rapidocr 2.0 在线demo来了

引言今日北京大风，大家都窝在家里，自己也趁着周末更新了RapidOCR在线demo，适配rapidocr2.0系列。 rapidocr2.0支持4个推理引擎（ONNRuntime、OpenVino、PaddlePaddle和PyTorch），且整理了文本检测和文本识…...

编程日记 2025/9/4 13:08:43

Compose笔记(十五)--进度条

这一节了解一下Compose中的进度条，有两种类型的进度条可供使用，分别是线性进度条（LinearProgressIndicator）和圆形进度条（CircularProgressIndicator），每种进度条又可分为确定模式和不确定模式。…...

编程日记 2025/9/10 14:27:12

图谱可视化的海洋生物信息查询网站的设计与实现(springboot+ssm+vue)含文档

图谱可视化的海洋生物信息查询网站的设计与实现(springbootssmvue)含文档该系统是一个图谱可视化的海洋生物信息查询网站，主要功能包括海洋动物、海洋植物、生物图鉴、保护生物和海洋生物分布等模块；用户可以通过系统首页访问这些模块；在海…...

编程日记 2025/9/6 6:37:34

目标追踪Hyperspectral Adapter for Object Tracking based on Hyperspectral Video

论文作者：Long Gao,Yunhe Zhang,Langkun Chen,Yan Jiang,Weiying Xie,Yunsong Li 作者单位：Xidian University;the University of Sheffield 论文链接：http://arxiv.org/abs/2503.22199v1 内容简介： 1）方向&#x…...

编程日记 2025/9/5 7:54:53

【HD-RK3576-PI】Linux制作deb包的方法

1.什么是deb包 ？ DEB包是Debian及其衍生Linux发行版（如Ubuntu、Linux Mint等）使用的软件包格式。DEB包主要用于简化软件的安装、更新和卸载过程。它实际上是一个归档文件，通常包含了两个主要部分： 数据压缩包&#xf…...

编程日记 2025/9/4 0:58:23

FileInputStream 详解与记忆方法

FileInputStream 详解与记忆方法一、FileInputStream 核心概念 FileInputStream 是 Java 中用于从文件读取原始字节的类，继承自 InputStream 抽象类。 1. 核心特点特性说明继承关系InputStream → FileInputStream数据单位字节（8bit）用…...

编程日记 2025/9/8 10:58:58

什么是回表？哪些数据库存在回表？

目录一、什么是回表1. 回表的核心流程2. 示例说明3. 回表的性能问题4. 总结二、哪些数据库会有回表1. MySQL（InnoDB）2. Oracle3. 其他数据库（如 SQL Server、PostgreSQL）4. 总结三、非聚集索引与聚集索引的区别及产生原因1. 聚…...

编程日记 2025/9/6 0:45:17

跨平台开发的挑战与突破：Java开发工具的探索与实践！

全文目录： 开篇语前言摘要概述源码解析代码实例代码解析代码解析1. import java.io.File;2. public class CrossPlatformFileManager3. public static void main(String[] args)4. String filePath "example.txt";5. File file new File(filePath);6. *…...

编程日记 2025/8/26 4:46:39

JDK的卸载与安装

卸载JDK 删除java的1安装目录卸载JAVA_HOME 删除path下关于java的路径 java -version查看安装JDK 百度搜索JDK，找到下载地址同意协议下载电脑对应版本双击安装记住安装路径配置环境变量我的电脑–>右键–>属性–>高级系统设置环境变…...

编程日记 2025/9/7 4:13:03

CyclicBarrier 基本用法

CyclicBarrier 基本用法简介 CyclicBarrier 是 Java 并发包（java.util.concurrent）中的一个同步辅助类。它允许一组线程相互等待，直到到达某个公共屏障点（common barrier point）。只有当所有参与的线程都到达屏障点…...

编程日记 2025/9/10 21:07:40

限流、降级、熔断、隔离？

在微服务架构中，服务限流、降级、熔断和隔离是保障系统高可用性的核心手段，但它们解决的问题和应用场景不同。以下是它们的区别、解决方案和实际案例的详细说明： 一、服务限流（Rate Limiting） 定义：通过限…...

编程日记 2025/9/10 5:48:11

asm汇编源代码之-字库转换程序

将标准的16x16点阵汉字库(下载16x16汉字库)转换成适合VGA文本模式下显示的点阵汉字库本程序需要调用file.asm中的子程序,所以连接时需要把file连接进来,如下 C:\> tlink chghzk file 调用参数描述如下 C:\> chghzk ; 无调用参数,转换标准库文件(SRC16.FNT)为适合VGA…...

编程日记 2025/9/7 1:23:56

深入浅出：信号灯与系统V信号灯的实现与应用

深入浅出：信号灯与系统V信号灯的实现与应用信号灯（Semaphore）是一种同步机制，用于控制对共享资源的访问。在多线程或多进程环境下，信号灯能够帮助协调多个执行单元对共享资源的访问，确保数据一致性与程序…...

编程日记 2025/9/9 16:51:08

定时器介绍及简单应用

定时器介绍及简单应用文章目录定时器介绍及简单应用1.定时器基本介绍1.1MSP430的四种定时器： 2.定时器A（Timer_A)2.1特点2.2寄存器的命名2.3寄存器表格2.4计数器原理说明2.4.1时钟源、分频器、计数器、工作模式2.4.2计数器复位 2.5定时器中断2.5.1定时…...

编程日记 2025/9/9 18:34:10

运行一次性任务与定时任务

运行一次性任务与定时任务文章目录运行一次性任务与定时任务[toc]一、使用Job运行一次性任务1.创建一次性任务2.测试一次性任务3.删除Job 二、使用CronJob运行定时任务1.创建定时任务2.测试定时任务3.删除CronJob 一、使用Job运行一次性任务 1.创建一次性任务 （…...

编程日记 2025/9/8 14:35:23

TypeScript入门

个人简介 👀个人主页： 前端杂货铺 🙋‍♂️学习方向： 主攻前端方向，正逐渐往全干发展 📃个人状态： 研发工程师，现效力于中国工业软件事业 🚀人生格言： 积跬步…...

编程日记 2025/9/10 21:34:14

MySQL数据库备份与恢复详解

在数据库管理中，数据的备份与恢复是至关重要的一环。对于MySQL数据库，定期备份不仅能防止数据丢失，还能在发生故障时快速恢复数据库。本文将详细介绍MySQL数据库的备份与恢复方法，覆盖所有常用备份和恢复方式，帮助大家…...

编程日记 2025/9/8 1:28:01

【c语言】猜凶手

日本某地发生了一件谋杀案，警察通过排查确定杀人凶手必为4个嫌疑犯的一个。以下为4个嫌疑犯的供词: A说：不是我。 B说：是C。 C说：是D。 D说：C在胡说已知3个人说了真话，1个人说的是假话。现在请根据这些信…...

编程日记 2025/9/9 6:38:57

Java学习打卡-Day25-注解和反射、Class类

注解（JDK5引入） 什么是注解？ Java注解（Annotation），也叫元数据。一种代码级别的说明，与类、接口、枚举是在同一个层次。它可以声明在包、类、字段、方法、局部变量、方法参数等的前面&#xf…...

编程日记 2025/9/9 3:26:47

【愚公系列】《Python网络爬虫从入门到精通》048-验证码识别（滑动拼图验证码）

🌟【技术大咖愚公搬代码：全栈专家的成长之路，你关注的宝藏博主在这里！】🌟 📣开发者圈持续输出高质量干货的"愚公精神"践行者——全网百万开发者都在追更的顶级技术博主！ 👉 江湖人称"愚公搬代码"，用七年如一日的精神深耕技术领域，以"…...

编程日记 2025/9/3 14:59:17

CMake中add_custom_target用法详解

在 CMake 中，add_custom_target 是一个用于创建自定义构建目标的命令。它主要用于定义一些不生成文件，但需要执行的特定操作（比如运行脚本、执行命令、触发其他构建步骤等）。以下是它的核心用途和特点： 基本语法 add_…...

编程日记 2025/9/9 11:25:03

埃隆·马斯克如何通过开源创新塑造未来

李升伟编译埃隆马斯克的名字在多个行业回响——从电动汽车、太空探索到人工智能及更多领域。虽然许多人关注他革命性的公司（如特斯拉、SpaceX、Neuralink和The Boring Company），但较少有人意识到他在开源软件运动中悄然却深远的影响力。本…...

编程日记 2025/8/27 15:20:32

大型语言模型中的工具调用（Function Calling）技术详解

一、引言随着大型语言模型（LLM）能力的飞速发展，它们在自然语言理解、文本生成、对话交互等方面展现出了令人惊叹的表现。然而，LLM 本身并不具备执行外部操作的能力，比如访问网页、调用第三方 API、执行精确数学运算等…...

编程日记 2025/9/8 1:28:02

IKBC F108 白色背光普通版说明书

部分按键白色背光版和新的 RGB 版并不相同。比如灯光控制，新老款会有按键配置冲突的。 IKBC F108 白色背光款（普通款）按键说明 ScrLk 倒计时定时器使用 F1~F12 及 1~9 控制时间，设置完成按 Enter 确认，或按 En…...

编程日记 2025/9/7 21:40:06

Microsoft Office 如何启用和正常播放 Flash 控件

对于新安装的 Office 默认是不支持启用 Flash 组件的，Flash 组件会无法播放或者黑屏。本片文章就带你解决这个问题，相关资料都在下方连接内。前提概要，教程对应的版本是 mso16，即 Office 2016 及更新版本，以及 365 等…...

编程日记 2025/9/10 12:17:28

muduo库源码分析: One Loop Per Thread

One Loop Per Thread的含义就是，一个EventLoop和一个线程唯一绑定，和这个EventLoop有关的，被这个EventLoop管辖的一切操作都必须在这个EventLoop绑定线程中执行 1.在MainEventLoop中，负责新连接建立的操作都要在MainEventLoop线程…...

编程日记 2025/9/10 8:11:22