类组件化websocket的方法(心跳机制)

server/2024/9/19 18:53:32/ 标签: websocket, 网络协议, 网络
/*** WebSocket统一管理*/
export class WebSocketClient {constructor(url) {if (!url) {throw new Error("WebSocket URL is required.");}this.url = url;this.websocket = null;this.listeners = {};this.heartbeatInterval = 30000; // 心跳检测间隔(毫秒)this.reconnectDelay = 10000; // 断线后重连间隔(毫秒)this.pingTimeout = null;this.reconnectTimeout = null;this.isManuallyClosed = false;}/** 初始化 WebSocket 连接 */connect() {this.websocket = new WebSocket(this.url);this.websocket.onopen = () => {// console.log("WebSocket connection opened.");// this.startHeartbeat(); // 开始心跳检测this.dispatch("open");};this.websocket.onmessage = (event) => {const data = JSON.parse(event.data ?? "{}");this.dispatch("message", data);};this.websocket.onclose = () => {// console.log("WebSocket connection closed.");this.dispatch("close");// this.stopHeartbeat(); // 停止心跳检测if (!this.isManuallyClosed) {this.reconnect(); // 自动重连}};this.websocket.onerror = (error) => {console.error("WebSocket error:", error);this.dispatch("error", error);};}// 关闭 WebSocket 连接close() {this.isManuallyClosed = true; // 手动关闭连接时,不进行重连if (this.websocket) {this.websocket.close();}}/*** 添加事件监听函数* @param { 'open' | 'message' | 'close' | 'error' } eventType* @param { (data) => void } callback*/addListener(eventType, callback) {if (!this.listeners[eventType]) {this.listeners[eventType] = [];}this.listeners[eventType].push(callback);}/** 移除事件监听函数 */removeListener(eventType, callback) {if (!this.listeners[eventType]) return;this.listeners[eventType] = this.listeners[eventType].filter((listener) => listener !== callback);}/** 派发事件 */dispatch(eventType, data) {if (!this.listeners[eventType]) return;this.listeners[eventType].forEach((listener) => listener(data));}// 心跳检测 (ping/pong)startHeartbeat() {if (this.pingTimeout) {clearTimeout(this.pingTimeout);}// 定时发送心跳this.pingTimeout = setTimeout(() => {if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {this.websocket.send("ping"); // 发送心跳包console.log("Ping sent to server.");}// 继续心跳this.startHeartbeat();}, this.heartbeatInterval);}// 停止心跳检测stopHeartbeat() {if (this.pingTimeout) {clearTimeout(this.pingTimeout);}}// 自动重连reconnect() {console.log(`正在重连${this.url} ${this.reconnectDelay / 1000} 秒...`);this.reconnectTimeout = setTimeout(() => {this.connect();}, this.reconnectDelay);}send(data) {this.websocket.send(data);}
}

http://www.ppmy.cn/server/116891.html

相关文章

动态获取git版本号

有时为了方便查用户使用版本情况,我们需要在某些接口加入git版本号。那问题来了,每次发版时都要手动修改版本号,既加大了工作量,又容易忘记。如果能动态注册版本号就方便多了。 接下来我们说下如何动态注入版本号。 // vue.confi…

决策树基础概论

1. 概述 在机器学习领域,决策树(Decision Tree) 是一种高度直观且广泛应用的算法。它通过一系列简单的是/否问题,将复杂的决策过程分解为一棵树状结构,使得分类或回归问题的解决过程直观明了。决策树的最大特点在于可…

Rust 所有权 借用与引用

文章目录 发现宝藏1. 所有权(Ownership)2. 引用(References)2.1 不可变引用2.2 可变引用2.3 引用的规则 3. 悬垂引用(Dangling References)4. 借用(Borrowing)结论 发现宝藏 前些天…

数据结构应用实例(五)——关键路径

Content: 一、问题描述二、算法思想三、代码实现四、小结 一、问题描述 设计实现 AOE 网的关键活动与关键路径问题; 二、算法思想 获取拓扑序列;计算节点的最早开始时间 v e [ i ] ve[i] ve[i];计算节点的最晚开始时间 v l [ j ] vl[j] v…

如何用静态住宅代理实现分布式代理网络

分布式代理网络能够显著提升覆盖范围和稳定性,尤其在需要处理大量请求和确保高可用性的应用场景中。在现代网络架构中,静态住宅代理因其稳定性和真实IP地址的优势,成为了分布式代理网络设计的重要组成部分。本文将详细探讨如何设计和实现分布…

Day19_0.1基础学习MATLAB学习小技巧总结(19)——MATLAB绘图篇(2)

利用空闲时间把碎片化的MATLAB知识重新系统的学习一遍,为了在这个过程中加深印象,也为了能够有所足迹,我会把自己的学习总结发在专栏中,以便学习交流。 参考书目:《MATLAB基础教程 (第三版) (薛山)》 之前的章节都是…

计算机网络 ---如何寻找目标计算机

序言 在没有产生网络之前,单个主机就像汪洋大海之间的一个孤岛,和其他主机之间没有任何联系。但随着需求的产生,免不了两台主机之间需要产生交流(传送数据等)。离得近的两台主机之间搭一根网线就能够解决,但…

Matlab的4个取整函数

Round 舍入至最近的小数或整数 Y round(X) 将 X 的每个元素四舍五入为最近的整数。在舍入机会均等的情况下,即有元素的十进制小数部分为 0.5(在舍入误差内)时,round 函数会偏离零四舍五入到最接近的具有更大幅值的整数。 Y r…

什么是数字取证?

据联邦调查局称,2021 年发生了 80 多万起网络犯罪。由于其隐秘性,此类犯罪很容易发生。 当你坐在咖啡店里使用他们的 Wi-Fi 时,你怎么知道你不是同一网络上某人犯罪的受害者呢? 律师和检察官在数字取证专家的帮助下打击此类犯罪…

【重点】(非常全) Node.js的生态有哪些包

Node.js的生态系统非常丰富,包括了各种框架、库、工具等。以下是Node.js生态系统的一些主要组成部分: 1. 框架:如Express.js, Koa.js, Hapi.js, Sails.js, Nest.js等,用于快速构建Web应用或API服务。 2. 数据库驱动和ORM&#x…

Untiy中给资源名改大小写

虽然改名, 在unity里有AssetDatabase.RenameAsset, 或AssetDatabase.MoveAsset, 但这里难点不是改名,而是怎么让GIT知道修改文件. Git是大小敏感, 而Win是大小不敏感的, 通常开发中,GIT确实没发知道文件名有变动.Git提供mv 指令,可以通知文件有变动, git mv oldFilenPath newF…

buildroot移植qt报错Info: creating stash file (补充qt添加字库)

移植qt库,编译文件报错Info: creating stash file /home/rbing/QT/uart/.qmake.stash Project ERROR: Unknown module(s) in QT: serialport rbingouc:~/QT/uart$ /home/rbing/linux/tool/buildroot-2022.02.9/output/host/usr/bin/qmake Info: creating stash fil…

服务器与个人计算机之间的区别

服务器和个人计算机作为人们日常生活中经常会用到的计算机系统,在功能与用途方面还是有着明显的区别的,今天小编就主要来为大家介绍一下服务器与个人计算机之间的区别有哪些? 个人计算机相对于服务器来说,更加注重与用户的体验感和…

supermap icilent3d for cesium加载地形并夸大地形

先看效果图 这是没有夸张之前的都江堰 这是夸大五倍后的都江堰 下面展示代码 主要就是加载supermaponline的skt地形然后夸大 <template><div class"PartOneBox"><div id"cesiumContainer"></div></div> </template>…

LeetCode --- 413周赛

题目列表 3274. 检查棋盘方格颜色是否相同 3275. 第 K 近障碍物查询 3276. 选择矩阵中单元格的最大得分 3277. 查询子数组最大异或值 一、检查棋盘方格颜色是否相同 题目给定两个字符串来表示两个方格的坐标&#xff0c;让我们判断这两个方格的颜色是否相同&#xff0c;这…

【linux】cat 命令

cat 命令是 Linux 和 Unix 系统中非常基础且常用的一个命令&#xff0c;它的全称是 "concatenate" 的缩写&#xff0c;意为“连接”或“串联”。尽管名字听起来像是专门用于连接文件的&#xff0c;但 cat 命令的用途远不止于此。它主要用于查看、创建、合并文件内容&…

联邦大模型Federated Large Language Model

联邦大模型Federated Large Language Model 联邦大模型Federated Large Language Model隐私保护计算的三种主要方法大模型(LLM)训练包含三个阶段联邦大模型(Federated LLM)包括三个组件(1)联邦LLM预训练(Federated LLM Pre-training)(2)联邦LLM微调(Federated LLM F…

阿里云Elasticsearch AI搜索实践

TechDay 本文由阿里云技术专家魏子珺在【AI搜索TechDay】上的分享【阿里云Elasticsearch AI搜索实践】整理而成。 【AI搜索TechDay】是Elastic和阿里云联合主办的AI技术Meetup系列&#xff0c;聚焦企业级AI搜索应用和开发者动手实践&#xff0c;旨在帮助开发者在大模型浪潮下升…

ThinkPHP Email功能如何配置才能发送邮件?

ThinkPHP Email发送流程&#xff1f;使用ThinkPHP发Email方法&#xff1f; ThinkPHP作为一款流行的PHP框架&#xff0c;提供了强大的Email功能&#xff0c;使得开发者能够轻松实现邮件发送。AokSend将详细介绍如何配置ThinkPHP Email功能&#xff0c;以确保邮件能够顺利发送。…

Radware Alteon 负载均衡-基于URL Filetype的七层负载均衡

作者&#xff1a;Xiaolei Ren Radware Alteon作为一款高性能的负载均衡器&#xff0c;其基于URL Filetype的七层负载均衡功能为众多企业提供了灵活、高效的解决方案。 该案例实现如下需求&#xff1a;当客户端访问服务器时&#xff0c;默认访问10.200.1.100&#xff0c;在ht…