前端 Node WebSocket 通讯这才是更优解附完整 Demo别再用轮询了WebSocket 才是正道踩过坑的人都懂一、为什么我一开始会被“实时通讯”折磨说个真实经历。之前做一个实时地图WebGIS那种要显示设备位置变化。一开始我用的是轮询接口每隔 3 秒请求一次。结果呢数据延迟3 秒起步用户你这地图是“回忆版”请求压力大设备一多后端直接“喘不过气”前端还要自己控制节流、防抖……写着写着就开始怀疑人生后来我换成了 WebSocket。一句话总结早用早轻松晚用多踩坑。二、WebSocket 到底解决了什么问题先说核心 WebSocket 是一个全双工通信协议也就是说客户端可以主动发服务端也可以主动推不用每次都 HTTP 请求对比一下方案问题轮询浪费资源 延迟长轮询勉强能用但复杂WebSocket真·实时三、原理讲清楚不讲你迟早踩坑WebSocket 本质流程通过 HTTP 发起请求握手升级协议Upgrade: websocket建立长连接双方随时通信重点在这里连接一旦建立就不会断除非你断所以你可以理解为HTTP 是“一次性聊天”WebSocket 是“开了个微信群”四、Node.js 实现 WebSocket 服务端超简单我们用最常见的库ws1、安装依赖npminstallws2、服务端代码完整可跑// server.jsconstWebSocketrequire(ws);// 创建 WebSocket 服务constwssnewWebSocket.Server({port:3000});console.log(WebSocket 服务已启动 ws://localhost:3000);wss.on(connection,(ws){console.log(客户端已连接);// 发送欢迎消息ws.send(JSON.stringify({type:welcome,message:连接成功}));// 接收消息ws.on(message,(message){console.log(收到消息:,message.toString());// 广播给所有客户端wss.clients.forEach(client{if(client.readyStateWebSocket.OPEN){client.send(message.toString());}});});// 断开连接ws.on(close,(){console.log(客户端断开连接);});});五、前端 WebSocket 使用浏览器原生不用任何库浏览器自带。1、连接服务constwsnewWebSocket(ws://localhost:3000);ws.onopen(){console.log(连接成功);ws.send(JSON.stringify({type:hello,message:前端来了}));};2、接收消息ws.onmessage(event){constdataJSON.parse(event.data);console.log(收到服务端消息:,data);};3、断开连接ws.onclose(){console.log(连接关闭);};六、实战WebGIS 实时点位更新OpenLayers来点实际的不然容易“看懂了但不会用”。场景后端推送设备坐标前端实时更新地图点位1、模拟服务端推送数据setInterval((){constdata{type:location,lng:116.39Math.random()*0.01,lat:39.9Math.random()*0.01};wss.clients.forEach(client{if(client.readyStateWebSocket.OPEN){client.send(JSON.stringify(data));}});},2000);2、前端更新地图OpenLayersws.onmessage(event){constdataJSON.parse(event.data);if(data.typelocation){constcoordol.proj.fromLonLat([data.lng,data.lat]);feature.setGeometry(newol.geom.Point(coord));}};效果 地图上的点会“自己动”不用刷新这就是 WebSocket 的爽点。七、我踩过的坑你可以直接避开1、连接断了你都不知道浏览器不会帮你自动重连 解决functionconnect(){constwsnewWebSocket(ws://localhost:3000);ws.onclose(){console.log(重连中...);setTimeout(connect,2000);};}connect();2、心跳机制非常重要有些服务器或代理会断掉“空闲连接”。 解决setInterval((){ws.send(JSON.stringify({type:ping}));},30000);3、数据格式混乱刚开始我直接传字符串后来全乱套。 建议统一格式{type:xxx,data:{}}4、客户端太多服务器扛不住WebSocket 是“长连接”不是免费的。 建议做连接限制用 Redis 做消息分发或直接上 Socket.IO 集群八、什么时候你该用 WebSocket直接给你一个判断标准 满足以下任意一个就该用实时地图GIS聊天系统实时监控股票/行情在线协同否则 别滥用普通 CRUD 真没必要九、总结说点人话WebSocket 不是“更高级”而是更合适核心价值服务端主动推送最大坑点断线、心跳、扩展性我当时从轮询切到 WebSocket 的时候有种感觉“原来不是我不会写代码是我选错了工具…”最后一句有点重要理解通信模型比背 API 有用一百倍如果这篇文章对你有帮助欢迎点赞 收藏 ⭐ 关注 完结撒花✿✿ヽ(°▽°)ノ✿