前端实现socket 中断重连

前端代码

  let ws;
    let reconnectAttempts = 0;
    const maxReconnectAttempts = 5;
    let reconnectTimer = null;

    // 初始化连接
    function connect() {
      ws = new WebSocket('ws://localhost:3001');

      ws.onopen = () => {
        console.log('✅ 连接成功');
        reconnectAttempts = 0; // 重置重连计数器
        document.body.style.backgroundColor = '#cfc';
      };

      ws.onmessage = (event) => {
        document.getElementById('messages').innerHTML += `<p>${event.data}</p>`;
      };

      ws.onerror = (error) => {
        console.error('💥 连接错误:', error);
        document.body.style.backgroundColor = '#fcc';
      };

      ws.onclose = (event) => {
        console.log('🔌 连接关闭');
        if (reconnectAttempts < maxReconnectAttempts) {
          const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 30000);
          console.log(`⏳ ${delay/1000}秒后尝试重连...`);
          reconnectTimer = setTimeout(connect, delay);
          reconnectAttempts++;
        }
      };
    }

    // 手动重连
    function manualReconnect() {
      if (reconnectTimer) clearTimeout(reconnectTimer);
      reconnectAttempts = 0;
      connect();
    }

    // 首次连接
    connect();

node模拟处理

// server.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3001 });

wss.on('connection', (ws) => {
  console.log('✅ 客户端已连接');

  // 定时推送消息
  const interval = setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
      ws.send(`服务端消息 ${new Date().toISOString()}`);
    }
  }, 2000);

  // 断开处理
  ws.on('close', () => {
    console.log('❌ 客户端断开'+new Date().toISOString());
    clearInterval(interval);
  });
});

console.log('🚀 服务端运行在: ws://localhost:3001');

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/975948.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

快速入门Springboot+vue——MybatisPlus多表查询及分页查询

学习自哔哩哔哩上的“刘老师教编程”&#xff0c;具体学习的网站为&#xff1a;7.MybatisPlus多表查询及分页查询_哔哩哔哩_bilibili&#xff0c;以下是看课后做的笔记&#xff0c;仅供参考。 多表查询 多表查询[Mybatis中的]&#xff1a;实现复杂关系映射&#xff0c;可以使…

vscode 配置 Copilot 提示GHE.com连接失败

步骤一&#xff1a;打开设置并进入 settings.json 点击菜单栏中的 “文件” -> “首选项” -> “设置”。 在搜索设置栏中输入 “Copilot: Advanced”。 点击搜索结果下方的 “在 settings.json 中编辑” 链接&#xff0c;这会打开 settings.json 文件。 步骤二&#…

基于拼接的宏基因组全流程

下面是基于组装的宏基因组数据分析流程 目录 基本流程介绍 megahit组装 什么是N50? 基于拼接结果的基因预测 cdhit去冗余 功能注释 宏基因组的分箱操作 分箱的目的&#xff1a; 分箱的原理&#xff1a; 基本流程介绍 单独对每个样本进行基因集组装&#xff0c;得到genome1,2,3…

基于javaweb的SpringBoot酒店管理系统设计和实现(源码+文档+部署讲解)

技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论…

Grok 3.0 Beta 版大语言模型评测

2025年2月17日至18日&#xff0c;全球首富埃隆马斯克&#xff08;Elon Musk&#xff09;携手其人工智能公司xAI&#xff0c;在美国重磅发布了Grok 3.0 Beta版。这款被誉为“迄今为止世界上最智能的语言模型”的AI&#xff0c;不仅集成了先进的“DeepSearch”搜索功能&#xff0…

【R语言】绘图

一、散点图 散点图也叫X-Y图&#xff0c;它将所有的数据以点的形式展现在坐标系上&#xff0c;用来显示变量之间的相互影响程度。 ggplot2包中用来绘制散点图的函数是geom_point()&#xff0c;但在绘制前需要先用ggplot()函数指定数据集和变量。 下面用mtcars数据集做演示&a…

php session数据存储位置选择

PHP session 数据的存储位置可以通过配置文件或者代码来进行设置。默认情况下&#xff0c;session 数据是存储在服务器的文件系统中的。你可以将 session 数据存储在其他地方&#xff0c;例如数据库、缓存等。 基础概念 PHP session默认情况下将数据存储在服务器端的临时文件中…

保姆级! 本地部署DeepSeek-R1大模型 安装Ollama Api 后,Postman本地调用 deepseek

要在Postman中访问Ollama API并调用DeepSeek模型&#xff0c;你需要遵循以下步骤。首先&#xff0c;确保你有一个有效的Ollama服务器实例运行中&#xff0c;并且DeepSeek模型已经被加载。 可以参考我的这篇博客 保姆级&#xff01;使用Ollama本地部署DeepSeek-R1大模型 并java…

Windows桌面系统管理5:Windows 10操作系统注册表

Windows桌面系统管理0&#xff1a;总目录-CSDN博客 Windows桌面系统管理1&#xff1a;计算机硬件组成及组装-CSDN博客 Windows桌面系统管理2&#xff1a;VMware Workstation使用和管理-CSDN博客 Windows桌面系统管理3&#xff1a;Windows 10操作系统部署与使用-CSDN博客 Wi…

臻识相机,华夏相机,芊熠车牌识别相机加密解密

臻识&#xff0c;华夏&#xff0c;芊熠这三种车牌识别相机解密我都试过了&#xff0c;可以正常解密成功&#xff0c;其它品牌我暂时没有测试。超级简单&#xff0c;免费的&#xff0c;白嫖无敌&#xff01; 流程&#xff1a; ①&#xff1a;先导出配置文件&#xff0c;例如我以…

RK Android11 WiFi模组 AIC8800 驱动移植流程

RK Android WiFi模组 AIC8800 驱动移植流程 作者&#xff1a;Witheart更新时间&#xff1a;20250220 概要&#xff1a;本文介绍了基于 AIC8800D40 芯片的 WiFi6 模组 BL-M8800DS2-40 在 RK3568 平台上的驱动移植流程。主要涉及环境搭建、驱动代码分析、设备树修改、驱动编译配…

Unity Shader Graph 2D - Procedural程序化图形循环加载进度效果

前言 在游戏中进度加载的效果是一种常见的效果,可以告诉玩家当前游戏处于一个资源加载的状态,这样玩家就能理解游戏不是卡住了或者是出现Bug了,而是正在进行一些数据的处理准备进入下一个场景。 创建一个LineLoading的Shader Graph文件,对应创建一个材质球,然后在…

蓝桥杯备考:贪心算法之矩阵消除游戏

这道题是牛客上的一道题&#xff0c;它呢和我们之前的排座位游戏非常之相似&#xff0c;但是&#xff0c;排座位问题选择行和列是不会改变元素的值的&#xff0c;这道题呢每每选一行都会把这行或者这列清零&#xff0c;所以我们的策略就是先用二进制把选择所有行的情况全部枚举…

Java网络编程封装

系列文章目录 Java知识点 文章目录 系列文章目录&#x1f449;前言&#x1f449;一、封装的目标&#x1f449;二、套接字层封装&#x1f449;壁纸分享&#x1f449;总结 &#x1f449;前言 Java 网络编程封装原理主要围绕着将底层的网络通信细节隐藏起来&#xff0c;提供简洁…

百度首页上线 DeepSeek 入口,免费使用

大家好&#xff0c;我是小悟。 百度首页正式上线了 DeepSeek 入口&#xff0c;这一重磅消息瞬间在技术圈掀起了惊涛骇浪&#xff0c;各大平台都被刷爆了屏。 百度这次可太给力了&#xff0c;PC 端开放仅 1 小时&#xff0c;就有超千万人涌入体验。这速度&#xff0c;简直比火…

边缘安全加速(Edge Security Acceleration)

边缘安全加速&#xff08;Edge Security Acceleration&#xff0c;简称ESA&#xff09;是一种通过将安全功能与网络边缘紧密结合来提升安全性和加速网络流量的技术。ESA的目标是将安全措施部署到接近用户或设备的地方&#xff0c;通常是在网络的边缘&#xff0c;而不是将所有流…

SpringBoot+Mybatis-Plus实现动态数据源

目录 一、前言二、代码实现1&#xff09;工程结构2&#xff09;相关依赖3&#xff09;数据源拦截切面4&#xff09;动态数据源切换5&#xff09;核心配置类6&#xff09;使用 三、原理分析1&#xff09;mapper接口注入流程2&#xff09;动态数据源切换执行流程 四、声明式事务导…

进程概念、PCB及进程查看

文章目录 一.进程的概念进程控制块&#xff08;PCB&#xff09; 二.进程查看通过指令查看进程通过proc目录查看进程的cwd和exe获取进程pid和ppid通过fork()创建子进程 一.进程的概念 进程是一个运行起来的程序&#xff0c;而程序是存放在磁盘的&#xff0c;cpu要想执行程序的指…

字节火山引擎 DeepSeek 接入本地使用

文章目录 1. 火山引擎 DeepSeek 初体验2. 本地接入 火山引擎 DeepSeek API3. 新建 API KEY4. 直接使用 1. 火山引擎 DeepSeek 初体验 火山引擎官网 : https://www.volcengine.com/product/ark 火山云默认给每个模型赠送 50 万 tokens 推理免费额度 进来就会看到模型广场&#…

基于javaweb的SpringBoot个人博客系统设计和实现(源码+文档+部署讲解)

技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论…