workerman 4 的 websocket 服务不内置断线重连与主动心跳，需前端自主发心跳（如每20–30秒发送{"type":"ping"}）并超时探测，后端显式响应pong帧、配合网关超时参数（如nginx proxy_read_timeout≥300s）及定时清理失效连接，前后端超时对齐、职责清晰方可避免“假连”。

Workerman 4 的 WebSocket 服务本身不内置断线重连逻辑，也不主动发起心跳；重连必须由前端驱动，后端只负责正确响应、及时清理失效连接，并配合网关与超时参数避免“假连”。关键不在“谁先动手”，而在前后端职责清晰、超时对齐、状态可感知。

前端必须主动发心跳 + 自主探测连接有效性

浏览器 WebSocket API 不暴露原生 ping 发送能力，不能依赖服务端定时推 ping。前端需自行实现业务级心跳：

• 每 20–30 秒发送一次 {"type":"ping","ts":1727968500} 这类 JSON 消息（非空字符串或二进制）
• 启动一个定时器等待服务端回 {"type":"pong"}，超时阈值设为 3–5 秒（比心跳间隔短）
• 超时即判定连接异常，立即触发重连流程，不要等 onclose —— 它在中间设备静默断开时根本不会触发
• 重连前清空旧 socket 的所有监听器、取消 pending 定时器，防止内存泄漏和重复回调

后端需正确响应心跳并拒绝无效连接

Workerman 默认忽略 ping 帧（空 payload），必须显式处理。在 onMessage 中识别并返回协议级 pong：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 判断 $data === '' && $connection->isWebSocket()，满足则立刻调用 $connection->pong()
• 切勿用 $connection->send('pong') —— 这是文本帧，不是 WebSocket 协议要求的 Pong 控制帧
• 对非空业务消息，正常处理；但若收到非法格式或高频 ping（如 1 秒内连续 5 次），可主动 close 连接防攻击

网关与超时参数必须协同配置

很多断连实际发生在 Nginx、SLB 或 CDN 层。Workerman 后端再稳，也挡不住上游静默 kill：

• Nginx 需设置 proxy_read_timeout 300;（至少 5 分钟），且 proxy_send_timeout 同步调整
• 阿里云 SLB 默认空闲超时 300 秒，但实测部分区域为 60 秒，建议控制台手动设为 ≥300
• Workerman 自身无连接空闲超时，但需确保 worker_num 和 max_connection 留有余量，避免连接堆积触发被动断连

重连策略要带退避+上限+状态缓存

盲目重连会压垮服务端、耗尽客户端资源、丢失消息：

• 采用指数退避：首次延时 1s，失败后 2s → 4s → 8s，最多重试 5 次（可配）
• 每次重连前生成新 URL 参数（如 ?t=1727968500），绕过浏览器连接池复用旧失败连接
• 连接未就绪期间，前端 send 消息应暂存队列；重连成功后按序重发，标记已送达状态
• 后端可记录每个连接的最后活跃时间，配合定时器扫描清理超时连接（如 10 分钟无 ping/msg）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！