当前位置: 首页 > 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 次});


http://www.mrgr.cn/news/83249.html

相关文章:

  • [云原生之旅] K8s-Portforward的另类用法, 立省两个端口
  • 阿里云ethereum
  • Clojure语言的面向对象编程
  • Redis缓存穿透、缓存击穿、缓存雪崩
  • TypeScript语言的网络编程
  • MMDetection3D环境配置
  • 【ASP.NET学习】ASP.NET MVC基本编程
  • LSKNet 训练测试 (在容器实例中)
  • 数值分析速成复习笔记
  • 【STM32】无源蜂鸣器播放音乐《千与千寻》,HAL库
  • QThread多线程详解
  • Android原生开发同一局域网内利用socket通信进行数据传输
  • 金山WPS Android面试题及参考答案
  • G1垃圾回收器的FullGC
  • SpringBoot3集成案例
  • 时频分析之S变换
  • 开源生成式物理引擎Genesis,可模拟世界万物
  • React中createRoot函数原理解读——Element对象与Fiber对象、FiberRootNode与HostRootNode
  • open3d+win10+vs2019环境安装配置及测试
  • YangQG 面试题汇总
  • 面向对象分析与设计Python版 分析与设计概述
  • 概率论与数理统计总复习
  • 【机器视觉】OpenCV 图像轮廓(查找/绘制轮廓、轮廓面积/周长、多边形逼近与凸包、外接矩形)
  • vue的路由守卫逻辑处理不当导致部署在nginx上无法捕捉后端异步响应消息等问题
  • Kubernetes 使用自定义资源(CRD)扩展API
  • 前后端分离的vue3项目改造成nuxt3项目