js实现一个可以自动重链的websocket客户端
class WebSocketClient {constructor(url, callback, options = {}) {this.url = url; // WebSocket 服务器地址this.options = options; // 配置选项(例如重试间隔、最大重试次数等)this.retryInterval = options.retryInterval || 1000; // 重试间隔(毫秒)this.maxRetries = options.maxRetries || 5; // 最大重试次数this.retryCount = 0; // 当前重试次数this.ws = null; // WebSocket 实例this.callback = callback;this.jqdom = options.jqdom || $("#websocketdiv") //展示信息的元素this.connect();}// 连接 WebSocketconnect() {this.ws = new WebSocket(this.url);//链接超时,链接5秒就放弃链接,避免链接等待太长的时间const timeoutId = setTimeout(() => {console.log('连接超时');this.ws.close(); // 关闭连接this.ws = null;}, 5000);// 连接成功回调this.ws.onopen = () => {clearTimeout(timeoutId); // 清除超时clearTimeout(this.reconnectTimeoutId); // 清除重连this.retryCount = 0; // 重置重试次数console.log('WebSocket 连接成功');this.showInfo("WebSocket服务器连接成功"); };// 接收到消息回调this.ws.onmessage = (event) => {console.log('收到消息:', event.data);this.callback(event.data);};// 连接关闭回调this.ws.onclose = (event) => {console.log('WebSocket 连接关闭', event);this.showInfo("WebSocket服务器连接关闭", "warning");this.reconnect();};// 连接错误回调this.ws.onerror = (error) => {console.error('WebSocket 错误:', error);this.showInfo("WebSocket服务器连接错误", "danger");this.ws.close();// this.reconnect();};}// 重连 WebSocketreconnect() {if (this.maxRetries == 0 || this.retryCount < this.maxRetries) {// 如果未重连且重试次数小于最大重试次数,则进行重连,0表示无限重试this.retryCount++;console.log(`尝试重新连接... 第 ${this.retryCount} 次重试`);this.showInfo("链接失败,尝试重新连接... 第 " + this.retryCount + " 次重试", "warning");this.reconnectTimeoutId = setTimeout(() => { this.connect(); // 重新连接}, this.retryInterval);//}} else {this.showInfo("链接失败,请联系管理员", "danger");}}// 发送消息send(message) {if (this.ws && this.ws.readyState === WebSocket.OPEN) {this.ws.send(message);console.log('发送消息:', message);} else {console.warn('WebSocket 未连接,无法发送消息');}}// 关闭连接close() {if (this.ws) {this.ws.close();console.log('WebSocket 连接已关闭');this.showInfo("WebSocket 连接已关闭", "dark");}}//显示连接信息.alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark showInfo(text, classname = 'success') {console.log(this.jqdom)if (this.jqdom) {var html = "<div class='alert alert-" + classname + "' role='alert'>" + text + "</div>";this.jqdom.html(html);}}
}
创建一个链接:
// 使用示例const wsClient = new WebSocketClient('ws://localhost:8080/ws', function (data) {//data转为json格式data = JSON.parse(data);//z这里用于处理从服务器获取的数据}, {retryInterval: 2000, // 重试间隔 2 秒maxRetries: 5, // 最大重试次数 3 次});
相关文章:
![](https://www.ngui.cc/images/no-images.jpg)
js实现一个可以自动重链的websocket客户端
class WebSocketClient {constructor(url, callback, options {}) {this.url url; // WebSocket 服务器地址this.options options; // 配置选项(例如重试间隔、最大重试次数等)this.retryInterval options.retryInterval || 1000; // 重试间隔&#…...
![](https://i-blog.csdnimg.cn/direct/1f83243264654573ad5ea433298f0fb7.png)
企业总部和分支通过GRE VPN互通
PC1可以ping通PC2 1、首先按照地址表配置ip地址 2、分别在AR1和AR3上配置nat 3、配置GRE a 创建tunnel接口,并选择tunnel协议为GRE,为隧道创建一个地址,用作互联 b 为隧道配置源地址或者源接口,这里选择源接口;再为…...
![](https://i-blog.csdnimg.cn/direct/195b775d9e0a4e11a909e8f9063c738d.png)
油猴支持阿里云自动登陆插件
遇到的以下问题,都已在脚本中解决: 获取到的元素赋值在页面显示,但是底层的value并没有改写,导致请求就是获取不到数据元素的加载时机不定,尤其是弱网情况下,只靠延迟还是有可能获取不到,且登陆…...
![](https://i-blog.csdnimg.cn/direct/918242775f684d628b7dcf2ee74eb48c.png)
【2024年华为OD机试】(C卷,100分)- 字符串筛选排序 (Java JS PythonC/C++)
一、问题描述 题目描述 输入一个由N个大小写字母组成的字符串 按照ASCII码值从小到大进行排序 查找字符串中第K个最小ASCII码值的字母 (k > 1) 输出该字母所在字符串中的位置索引 (字符串的第一个位置索引为0) k如果大于字符串长度则输出最大ASCII码值的字母所在字符串…...
![](https://www.ngui.cc/images/no-images.jpg)
iOS - runtime总结
详细总结一下 Runtime 的核心内容: 1. 消息发送机制 // 消息发送的基本流程 id objc_msgSend(id self, SEL _cmd, ...) {// 1. 获取 isaClass cls object_getClass(self);// 2. 查找缓存IMP imp cache_getImp(cls, _cmd);if (imp) return imp(self, _cmd, ...);…...
![](https://i-blog.csdnimg.cn/img_convert/0ede82cc25798a0aebfb5d2927a2a678.png)
第33 章 - ES 实战篇 - MySQL 与 Elasticsearch 的一致性问题
思维导图 0. 前言 MySQL 与 Elasticsearch 一致性问题是老生常谈了。网上有太多关于这方面的文章了,但是千篇一律,看了跟没看没有太大区别。 在生产中,我们往往会通过 DTS 工具将 binlog 导入到 Kafka,再通过 Kafka 消费 binlog&…...
![](https://i-blog.csdnimg.cn/direct/59cffa2b60cf45b2a5f38743f4635abf.png#pic_center)
Artec Leo 3D扫描仪与Ray助力野生水生动物法医鉴定【沪敖3D】
挑战:捕获大型水生哺乳动物(如鲸鱼)的数据,搭建全彩3D模型,用于水生野生动物的法医鉴定、研究和保护工作。 解决方案:Artec Eva、Artec Space Spider、Artec Leo、Artec Ray、Artec Studio、CT scans 效果&…...
![](https://www.ngui.cc/images/no-images.jpg)
PythonQT5打包exe线程使用
打包: pyinstaller --noconsole --onefile test.py–noconsole 表示不需要打开命令行 修改:test.spec 一般项目里面需要用的资源文件,比如lib、png、exe等。 需要单独修改spec文件 pathex[.],binaries[(D:/test.png, .),(D:/simsun.ttc, .…...
![](https://i-blog.csdnimg.cn/direct/7aea041960ea4082ae89409024044ca0.png)
【Powershell】Windows大法powershell好(二)
PowerShell基础(二) 声明:该笔记为up主 泷羽的课程笔记,本节链接指路。 警告:本教程仅作学习用途,若有用于非法行为的,概不负责。 1. powershell 执行外部命令 powershell也可以执行一些外部的…...
![](https://www.ngui.cc/images/no-images.jpg)
前端学习-环境this对象以及回调函数(二十七)
目录 前言 目标 环境对象 作用 环境对象this是什么? 判断this指向的粗略规则是什么? 回调函数 目标 常见的使用场景 综合案例:Tab任务栏切换 总结 前言 男儿何不带吴钩,收取关山五十州 目标 能够分析判断函数运行在不…...
![](https://i-blog.csdnimg.cn/direct/4b7cecf72f3d4573a83ea9135498d3fc.png)
Element-plus、Element-ui之Tree 树形控件回显Bug问题。
需求:提交时,需要把选中状态和半选中状态 的数据id提交。如图所示: 数据回显时,会出现代码如下: <template><el-tree ref"treeRef" :data"tree" show-checkbox node-key"id" …...
![](https://i-blog.csdnimg.cn/direct/5d41dfc4f6804a7a8e1d6140fcf4380f.png)
互联网全景消息(10)之Kafka深度剖析(中)
一、深入应用 1.1 SpringBoot集成Kafka 引入对应的依赖。 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupI…...
![](https://www.ngui.cc/images/no-images.jpg)
Oracle Dataguard(主库为双节点集群)配置详解(5):将主库复制到备库并启动同步
Oracle Dataguard(主库为双节点集群)配置详解(5):将主库复制到备库并启动同步 目录 Oracle Dataguard(主库为双节点集群)配置详解(5):将主库复制到备库并启动…...
![](https://www.ngui.cc/images/no-images.jpg)
pytorch小记(一):pytorch矩阵乘法:torch.matmul(x, y)
pytorch小记(一):pytorch矩阵乘法:torch.matmul(x, y)/ x y 代码代码 1:torch.matmul(x, y)输入张量:计算逻辑:输出结果: 代码 2:y y.view(4,1)…...
![](https://i-blog.csdnimg.cn/direct/2ad9f1c7c377479b9e238b31084eeff3.png)
PyTorch环境配置常见报错的解决办法
目标 小白在最基础的环境配置里一般都会出现许多问题。 这里把一些常见的问题分享出来。希望可以节省大家一些时间。 最终目标是可以在cmd虚拟环境里进入jupyter notebook,new的时候有对应的环境,并且可以跑通所有的import code。 第一步:…...
![](https://i-blog.csdnimg.cn/direct/ac5217088e9248c091580b57432bc18d.png)
罗永浩再创业,这次盯上了 AI?
罗永浩,1972年7月9日生于中国延边朝鲜族自治州的一个军人家庭,是一名朝鲜族人;早年在新东方授课,2004年当选 “网络十大红人” ;2006年8月1日,罗永浩创办牛博网;2008年5月,罗永浩注册…...
![](https://www.ngui.cc/images/no-images.jpg)
VUE3 provide 和 inject,跨越多层级组件传递数据
provide 和 inject 是 Vue 3 提供的 API,主要用于实现祖先组件与后代组件之间的依赖注入。它们可以让你在组件树中,跨越多层组件传递数据,而不需要通过 props 或事件的方式逐层传递。这个机制主要用于状态共享、插件系统或某些跨层级的功能。…...
![](https://i-blog.csdnimg.cn/direct/4d1b3cd9fd654020ac56ce780a7d4987.png)
git打补丁
1、应用场景 跨仓库升级 开发项目B使用的是开源项目A。开源项目A发现漏洞,作者进行了修复,我们可以通过使用git补丁的方式,将作者修改的内容复制到我 们的项目B中。 2、TortoiseGit方式 源仓库 格式化补丁 根据提交数量,生成…...
![](https://i-blog.csdnimg.cn/direct/42526c56c9924d3d8edf0eb3db3b1044.jpeg)
机械燃油车知识图谱、知识大纲、知识结构(持续更新...)
一、发动机 曲柄连杆机构 配气机构 点火系统 起动系统 燃油供给系统 润滑系统 冷却系统 二、底盘 (一)传动系统 1、离合器 2、变速器 3、万向传动装置 4、驱动桥 (二)行驶系统 1、车架 2、车桥 3、悬架 4、车轮 &a…...
![](https://www.ngui.cc/images/no-images.jpg)
Vue3学习总结
一、Vue 3 基础搭建与核心语法 1.创建 Vue 3 应用 在项目的入口文件 main.js 中,通过以下代码创建 Vue 3 应用实例: import { createApp } from vue; import App from ./App.vue;const app createApp(App); app.mount(#app); 这几行代码的作用是引入…...
![](https://i-blog.csdnimg.cn/img_convert/9bd84aa6c16544bd68ab12c81ea351ad.webp?x-oss-process=image/format,png)
Type-C双屏显示器方案
在数字化时代,高效的信息处理和视觉体验已成为我们日常生活和工作的关键需求。随着科技的进步,一款结合了便携性和高效视觉输出的设备——双屏便携屏,逐渐崭露头角,成为追求高效工作和娱乐体验人群的新宠。本文将深入探讨双屏便携…...
![](https://i-blog.csdnimg.cn/direct/bd5db2a2310943cf89637f985253a3c3.heic)
【读书与思考】焦虑与内耗
【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】【读书与思考】 导言 今天一个朋友和我说,最近比较焦虑和内耗,无心工作和学习,我问他你焦虑内耗的时候,时间主要花在哪了,他告诉我说主要花在看有关移…...
![](https://www.ngui.cc/images/no-images.jpg)
基于python的网页表格数据下载--转excel
基于 Python 的网页表格数据爬取与下载:以维基百科为例 目录 基于 Python 的网页表格数据爬取与下载:以维基百科为例1. 背景介绍2. 工具与环境3. 操作步骤1. 获取网页内容2. 定位表格元素3. 表格变身 Pandas DataFrame4. 检查数据,收工!5. 进阶玩法与优化6. 完整代码4. 结果…...
![](https://www.ngui.cc/images/no-images.jpg)
Vue.js开发入门:从零开始搭建你的第一个项目
前言 嘿,小伙伴们!今天咱们来聊聊 Vue.js,一个超火的前端框架。如果你是编程小白,别怕,跟着我一步步来,保证你能轻松上手,搭建起属于自己的第一个 Vue 项目。Vue.js 可能听起来有点高大上&#…...
![](https://i-blog.csdnimg.cn/direct/49af320fcb47436c864c359c3a7bc7a5.png)
LS1046+XILINX XDMA PCIE调通
欢迎点赞收藏,欢迎私下讨论技术,分享技术 硬件平台 :NXP LS1046 XILINX FPGA 软件平台:LINUX 4.19.68 buildroot LS1046 PEX3 接 XILINX FPGA,linux使用designware的PCI主控制器。下载XILINX DMA驱动,解…...
![](https://i-blog.csdnimg.cn/direct/7941b86d92c547cfa3bdc17012bfcbd7.png)
HarmonyOS:@LocalBuilder装饰器: 维持组件父子关系
一、前言 当开发者使用Builder做引用数据传递时,会考虑组件的父子关系,使用了bind(this)之后,组件的父子关系和状态管理的父子关系并不一致。为了解决组件的父子关系和状态管理的父子关系保持一致的问题,引入LocalBuilder装饰器。…...
![](https://www.ngui.cc/images/no-images.jpg)
YOLOv10-1.1部分代码阅读笔记-downloads.py
downloads.py ultralytics\utils\downloads.py 目录 downloads.py 1.所需的库和模块 2.def is_url(url, checkFalse): 3.def delete_dsstore(path, files_to_delete(".DS_Store", "__MACOSX")): 4.def zip_directory(directory, compressTrue, ex…...
![](https://i-blog.csdnimg.cn/direct/38ea57cdd8e8406390eb6814d86d96a7.png)
计算机图形学【绘制立方体和正六边形】
工具介绍 OpenGL:一个跨语言的图形API,用于渲染2D和3D图形。它提供了绘制图形所需的底层功能。 GLUT:OpenGL的一个工具库,简化了窗口创建、输入处理和其他与图形环境相关的任务。 使用的函数 1. glClear(GL_COLOR_BUFFER_BIT |…...
![](https://i-blog.csdnimg.cn/direct/922b9077f3a04aeebc20ade87fe091ac.png)
基于django中医药数据可视化平台(源码+lw+部署文档+讲解),源码可白嫖!
摘要 时代在飞速进步,每个行业都在努力发展现在先进技术,通过这些先进的技术来提高自己的水平和优势,中医药管理平台当然不能排除在外。中医药数据可视化平台是在实际应用和软件工程的开发原理之上,运用Python语言、ECharts技术、…...
![](https://i-blog.csdnimg.cn/direct/1fd04756f5f446f98111096d16a21f14.png)
kafka消费堆积问题探索
背景 我们的商城项目用PHP写的,原本写日志方案用的是PHP的方案,但是,这个方案导致资源消耗一直降不下来,使用了20个CPU。后面考虑使用通过kafka的方案写日志,商城中把产生的日志丢到kafka中,在以go写的项目…...
![](http://hiphotos.baidu.com/see7di/pic/item/12094aee8dd9128fb3fb95a3.jpg)
wordpress 判断置顶/百度关键字
/*/调用方法: Pop(this,{ pos:3,//上;右;下;左 tim:3000, oft:{x:10,y:0}, htm:这是需要显示的内容<br>HTML5入门之新标签的解析,//可以为fun fun:function(i){} }); Pop(); /*/ 核心代码 var Popfunction(i,opt){ var $Pop,$Hand; if(!i || !opt){Function.attempt(func…...
![](https://images2017.cnblogs.com/blog/1182445/201710/1182445-20171002224618130-1278922137.png)
上海注册公司在哪个网站/培训优化
本文转载自:http://blog.itpub.net/17203031/viewspace-682003/ 在Oracle学习过程中,存储结构,表段区块可能是每个初学者都要涉及到的概念。表空间、段、分区和数据块分别表示了Oracle进行数据存储的不同层次和结构。了解清楚这几个结构&…...
![](https://img-blog.csdnimg.cn/20191012140331993.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FsbW9zdE9L,size_16,color_FFFFFF,t_70)
凡科怎么建设网站/舟山seo
问题背景: 在Visual Studio 2017中打开一个往期工程,已知工程是在framework 4.6.1下生成的,同时在工程中调用Matlab生成的.dll文件,但是使用的Matlab的版本未知。 1、首先直接打开工程的时候,显示framework版本不对&am…...
网站制作报价ihanshi/关键词优化是怎么弄的
可以在Reporting Service导航URL的后面添加报表参数,在“导航-跳至URL”的位置这样写:"http://www.google.com/search?q"Fields!AuditItemDesc.Value注:http://www.google.com/search?q汽车 这样可以直接搜索。如图(1…...
![](https://img-blog.csdnimg.cn/20210108154538509.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpeGloYWhhbGVsZWhlaGU=,size_16,color_FFFFFF,t_70#pic_center)
wordpress做管理网站/免费建网站软件哪个好
文章目录1. 要求2. 考点内容2.1 集群安装:10%2.2 集群强化:15%2.3 系统强化:15%2.4 微服务漏洞最小化:20%2.5 供应链安全:20%2.6 监控、日志记录和运行时安全:20%3. 需要掌握内容3.1 群集设置 10%3.2 群集强…...
![](https://img2018.cnblogs.com/blog/347047/201901/347047-20190107214403329-811324752.png)
南宁市兴宁区建设局网站/国外网站如何搭建网页
Kubernetes初探[1]:部署你的第一个ASP.NET Core应用到k8s集群 原文:Kubernetes初探[1]:部署你的第一个ASP.NET Core应用到k8s集群 Kubernetes简介 Kubernetes是Google基于Borg开源的容器编排调度引擎,作为CNCF(Cloud Native Compu…...