JavaScript 中 WebSocket 怎么处理后端服务重启断线重连

夏瑶同学_3767

夏瑶同学_3767

2026-10-06

488人浏览

原创

websocket断连需主动心跳探测与指数退避重连:每20–30秒发{"type":"ping"}并5秒超时未收{"type":"pong"}即主动关闭;重连延迟从1000ms起翻倍+±30%抖动,上限30秒,总重试≤10次;每次重连前清理旧连接、定时器、事件监听,并动态获取新token。

javascript 中 websocket 怎么处理后端服务重启断线重连

后端服务重启导致 WebSocket 断连,是线上最常见、也最容易被低估的故障场景。它不会总触发 onclose,更不会总报错,而是让连接“静默失效”——页面还在跑,消息却再也收不到。真正可靠的处理方式,不是等断了再补救,而是从设计上把重连当作默认行为,并主动验证连接是否真实可用。

必须加心跳探测,不能只靠 onclose

服务端突然重启(比如容器滚动更新、进程 kill -9),客户端往往收不到标准关闭帧,readyState 可能卡在 OPEN 长达数秒甚至更久,onclose 根本不执行。这时候仅监听 onclose 就等于没做任何防护。

  • 连接建立后,每 20–30 秒发送一次业务层 {"type":"ping"} 消息(不要用原生 ping 帧,JS 不暴露发送接口)
  • 同时启动一个 5 秒超时定时器,未收到 {"type":"pong"} 就立刻调用 ws.close(4999, "no_pong") 主动断开
  • 这个间隔必须小于服务端和中间设备(如 Nginx 的 proxy_read_timeout、运营商 NAT 老化时间)的最短空闲超时阈值

重连要用指数退避 + 随机抖动

服务端刚重启完,大量客户端同一时刻发起重连请求,极易打满连接队列或触发限流,反而延长恢复时间。

Java Maven Code Review
Java Maven Code Review

审查Java Maven项目(ZIP压缩包或GitLab仓库URL),检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载
  • 基础延迟:从 1000ms 开始,每次失败翻倍,上限设为 30000ms(30 秒)
  • 叠加 ±30% 随机抖动:delay += Math.random() * delay * 0.3
  • 总重试次数建议 ≤ 10 次;超过后暂停自动重连,改由用户手动刷新或展示明确提示
  • retryCount 必须在 onopen 中清零,否则会继承上次失败计数

每次重连前必须清理干净

反复断连时若不清理旧资源,会出现多个 WebSocket 实例并存、定时器堆积、事件重复绑定、内存泄漏等问题。

  • 用唯一引用(如 wsRef)管理当前连接,新建前先执行 wsRef?.close() 并置空
  • 清除上一轮的心跳定时器(clearInterval(pingInterval))、超时计时器(clearTimeout(heartbeatTimeout))
  • 移除所有事件监听器(ws.removeEventListener 或使用一次性监听)
  • 设置 isReconnecting = true 标志位,在 onclose 中判断是否已在重连流程中,防止重复触发

URL 和凭证要动态生成

如果连接 URL 包含 token 或 timestamp 参数,服务端重启后旧凭证大概率已过期。直接复用会导致无限重连失败。

  • 每次重连前重新调用认证接口获取最新 token,并拼接到新 URL 中
  • 确保前端心跳间隔、超时阈值与服务端保活配置(如 keepalive timeout、ping interval)严格对齐
  • 生产环境中,80% 的“重连不成功”问题,根源其实是前后端保活策略错配

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2283

5

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6030

13

后端的主要工作内容介绍
后端的主要工作内容介绍

后端是应用程序的服务端部分,负责核心任务,如数据库交互、业务逻辑处理和响应客户端请求。想了解更多后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

5366

10

js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

2023.06.20

4546

5

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

2023.07.04

1129

3

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

2023.07.04

4464

6

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

900

4

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

1796

5

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

2023.09.04

3265

4

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.6万人学习