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

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 次});

相关文章:

js实现一个可以自动重链的websocket客户端

class WebSocketClient {constructor(url, callback, options {}) {this.url url; // WebSocket 服务器地址this.options options; // 配置选项&#xff08;例如重试间隔、最大重试次数等&#xff09;this.retryInterval options.retryInterval || 1000; // 重试间隔&#…...

企业总部和分支通过GRE VPN互通

PC1可以ping通PC2 1、首先按照地址表配置ip地址 2、分别在AR1和AR3上配置nat 3、配置GRE a 创建tunnel接口&#xff0c;并选择tunnel协议为GRE&#xff0c;为隧道创建一个地址&#xff0c;用作互联 b 为隧道配置源地址或者源接口&#xff0c;这里选择源接口&#xff1b;再为…...

油猴支持阿里云自动登陆插件

遇到的以下问题&#xff0c;都已在脚本中解决&#xff1a; 获取到的元素赋值在页面显示&#xff0c;但是底层的value并没有改写&#xff0c;导致请求就是获取不到数据元素的加载时机不定&#xff0c;尤其是弱网情况下&#xff0c;只靠延迟还是有可能获取不到&#xff0c;且登陆…...

【2024年华为OD机试】(C卷,100分)- 字符串筛选排序 (Java JS PythonC/C++)

一、问题描述 题目描述 输入一个由N个大小写字母组成的字符串 按照ASCII码值从小到大进行排序 查找字符串中第K个最小ASCII码值的字母 (k > 1) 输出该字母所在字符串中的位置索引 (字符串的第一个位置索引为0) k如果大于字符串长度则输出最大ASCII码值的字母所在字符串…...

iOS - runtime总结

详细总结一下 Runtime 的核心内容&#xff1a; 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, ...);…...

第33 章 - ES 实战篇 - MySQL 与 Elasticsearch 的一致性问题

思维导图 0. 前言 MySQL 与 Elasticsearch 一致性问题是老生常谈了。网上有太多关于这方面的文章了&#xff0c;但是千篇一律&#xff0c;看了跟没看没有太大区别。 在生产中&#xff0c;我们往往会通过 DTS 工具将 binlog 导入到 Kafka&#xff0c;再通过 Kafka 消费 binlog&…...

Artec Leo 3D扫描仪与Ray助力野生水生动物法医鉴定【沪敖3D】

挑战&#xff1a;捕获大型水生哺乳动物&#xff08;如鲸鱼&#xff09;的数据&#xff0c;搭建全彩3D模型&#xff0c;用于水生野生动物的法医鉴定、研究和保护工作。 解决方案&#xff1a;Artec Eva、Artec Space Spider、Artec Leo、Artec Ray、Artec Studio、CT scans 效果&…...

PythonQT5打包exe线程使用

打包&#xff1a; pyinstaller --noconsole --onefile test.py–noconsole 表示不需要打开命令行 修改&#xff1a;test.spec 一般项目里面需要用的资源文件&#xff0c;比如lib、png、exe等。 需要单独修改spec文件 pathex[.],binaries[(D:/test.png, .),(D:/simsun.ttc, .…...

【Powershell】Windows大法powershell好(二)

PowerShell基础&#xff08;二&#xff09; 声明&#xff1a;该笔记为up主 泷羽的课程笔记&#xff0c;本节链接指路。 警告&#xff1a;本教程仅作学习用途&#xff0c;若有用于非法行为的&#xff0c;概不负责。 1. powershell 执行外部命令 powershell也可以执行一些外部的…...

前端学习-环境this对象以及回调函数(二十七)

目录 前言 目标 环境对象 作用 环境对象this是什么&#xff1f; 判断this指向的粗略规则是什么&#xff1f; 回调函数 目标 常见的使用场景 综合案例&#xff1a;Tab任务栏切换 总结 前言 男儿何不带吴钩&#xff0c;收取关山五十州 目标 能够分析判断函数运行在不…...

Element-plus、Element-ui之Tree 树形控件回显Bug问题。

需求&#xff1a;提交时&#xff0c;需要把选中状态和半选中状态 的数据id提交。如图所示&#xff1a; 数据回显时&#xff0c;会出现代码如下&#xff1a; <template><el-tree ref"treeRef" :data"tree" show-checkbox node-key"id" …...

互联网全景消息(10)之Kafka深度剖析(中)

一、深入应用 1.1 SpringBoot集成Kafka 引入对应的依赖。 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupI…...

Oracle Dataguard(主库为双节点集群)配置详解(5):将主库复制到备库并启动同步

Oracle Dataguard&#xff08;主库为双节点集群&#xff09;配置详解&#xff08;5&#xff09;&#xff1a;将主库复制到备库并启动同步 目录 Oracle Dataguard&#xff08;主库为双节点集群&#xff09;配置详解&#xff08;5&#xff09;&#xff1a;将主库复制到备库并启动…...

pytorch小记(一):pytorch矩阵乘法:torch.matmul(x, y)

pytorch小记&#xff08;一&#xff09;&#xff1a;pytorch矩阵乘法&#xff1a;torch.matmul&#xff08;x, y&#xff09;/ x y 代码代码 1&#xff1a;torch.matmul(x, y)输入张量&#xff1a;计算逻辑&#xff1a;输出结果&#xff1a; 代码 2&#xff1a;y y.view(4,1)…...

PyTorch环境配置常见报错的解决办法

目标 小白在最基础的环境配置里一般都会出现许多问题。 这里把一些常见的问题分享出来。希望可以节省大家一些时间。 最终目标是可以在cmd虚拟环境里进入jupyter notebook&#xff0c;new的时候有对应的环境&#xff0c;并且可以跑通所有的import code。 第一步&#xff1a;…...

罗永浩再创业,这次盯上了 AI?

罗永浩&#xff0c;1972年7月9日生于中国延边朝鲜族自治州的一个军人家庭&#xff0c;是一名朝鲜族人&#xff1b;早年在新东方授课&#xff0c;2004年当选 “网络十大红人” &#xff1b;2006年8月1日&#xff0c;罗永浩创办牛博网&#xff1b;2008年5月&#xff0c;罗永浩注册…...

VUE3 provide 和 inject,跨越多层级组件传递数据

provide 和 inject 是 Vue 3 提供的 API&#xff0c;主要用于实现祖先组件与后代组件之间的依赖注入。它们可以让你在组件树中&#xff0c;跨越多层组件传递数据&#xff0c;而不需要通过 props 或事件的方式逐层传递。这个机制主要用于状态共享、插件系统或某些跨层级的功能。…...

git打补丁

1、应用场景 跨仓库升级 开发项目B使用的是开源项目A。开源项目A发现漏洞&#xff0c;作者进行了修复&#xff0c;我们可以通过使用git补丁的方式&#xff0c;将作者修改的内容复制到我 们的项目B中。 2、TortoiseGit方式 源仓库 格式化补丁 根据提交数量&#xff0c;生成…...

机械燃油车知识图谱、知识大纲、知识结构(持续更新...)

一、发动机 曲柄连杆机构 配气机构 点火系统 起动系统 燃油供给系统 润滑系统 冷却系统 二、底盘 &#xff08;一&#xff09;传动系统 1、离合器 2、变速器 3、万向传动装置 4、驱动桥 &#xff08;二&#xff09;行驶系统 1、车架 2、车桥 3、悬架 4、车轮 &a…...

Vue3学习总结

一、Vue 3 基础搭建与核心语法 1.创建 Vue 3 应用 在项目的入口文件 main.js 中&#xff0c;通过以下代码创建 Vue 3 应用实例&#xff1a; import { createApp } from vue; import App from ./App.vue;const app createApp(App); app.mount(#app); 这几行代码的作用是引入…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

9-Oracle 23 ai Vector Search 特性 知识准备

很多小伙伴是不是参加了 免费认证课程&#xff08;限时至2025/5/15&#xff09; Oracle AI Vector Search 1Z0-184-25考试&#xff0c;都顺利拿到certified了没。 各行各业的AI 大模型的到来&#xff0c;传统的数据库中的SQL还能不能打&#xff0c;结构化和非结构的话数据如何和…...