WebSocket没心跳，连接老断！

博客主页瑕疵的CSDN主页 Gitee主页瑕疵的gitee主页⏩ 文章专栏《热点资讯》WebSocket断连心跳包没发对我差点把服务器干爆目录WebSocket断连心跳包没发对我差点把服务器干爆报错现场连接像过山车5分钟一断核心根源服务器在等心跳你却在发呆解决代码30秒发个心跳包稳如老狗避坑总结这些坑我全踩过报错现场连接像过山车5分钟一断昨天上线的实时聊天功能用户疯狂投诉“连不上”。控制台疯狂刷WebSocket connection to wss://xxx failed: Error in connection establishment: net::ERR_CONNECTION_RESET断连时间点精准得像闹钟——每5分钟整。我盯着日志头发都薅秃了服务器明明开着为啥连不上核心根源服务器在等心跳你却在发呆别被“WebSocket”名字骗了。服务器比如Nginx默认超时15分钟。没心跳包服务器直接把你踢下线。我查了Nginx配置proxy_read_timeout 15m。客户端没发心跳服务器一拍大腿这玩意儿没响应关了真想骂一句文档写“支持长连接”结果连心跳都不给个例子解决代码30秒发个心跳包稳如老狗问题代码坑爹版constwsnewWebSocket(wss://api.xxx.com);ws.onopen()console.log(连接成功);// 只管连不管活修复代码真香版constwsnewWebSocket(wss://api.xxx.com);letheartbeatTimer;// 心跳计时器// 连接成功启动心跳ws.onopen(){console.log(连接稳了开始发心跳);// 每30秒发一次心跳包别用15秒服务器可能扛不住heartbeatTimersetInterval((){// 确保连接是OPEN状态再发if(ws.readyStateWebSocket.OPEN){ws.send(ping);// 发个空字符串就行服务器会回pong}else{clearInterval(heartbeatTimer);// 连接断了赶紧停}},30000);// 30秒一次};// 连接关闭时清理心跳ws.onclose(){clearInterval(heartbeatTimer);// 防止内存泄漏console.log(连接断了心跳也停了);};避坑总结这些坑我全踩过别用setInterval发心跳服务器可能在处理心跳你发太快反而拖垮它。30秒是安全值Nginx默认超时15分钟留够缓冲。必须判断readyState连接断了还在发心跳内存泄漏警告修复代码里if (ws.readyState OPEN)这句是保命符。服务器要支持pong如果服务器不回pong心跳就白发了。检查后端ws.onmessage e e.data ping ws.send(pong)。别信“自动心跳”有些库比如Socket.IO默认有心跳但原生WebSocket没有。别以为用new WebSocket()就完事了。最后补一句心跳包不是发“心跳”字眼发个空字符串就行。我昨天还被坑在ws.send(heartbeat)上服务器根本不认——这破文档写得比我的代码还乱。现在用户说“连接稳如老狗”我终于能睡个整觉了。