要在HTML5网页端实时精确定位生产车间的AGV小车，核心是建立稳定低延迟的WebSocket双向通信，并将高精度定位数据（如UWB/激光SLAM坐标）从AGV或定位网关持续推送至前端，再通过Canvas或WebGL进行可视化渲染。
要在HTML5网页端实时精确定位生产车间的AGV小车，核心是建立稳定低延迟的WebSocket双向通信，并将高精度定位数据（如UWB/激光SLAM坐标）从AGV或定位网关持续推送至前端，再通过Canvas或WebGL进行可视化渲染。关键不在“连上WebSocket”，而在“如何让坐标准、稳、快、可映射”。
定位数据源需统一坐标系并带时间戳
AGV自身或车间定位系统（如UWB基站阵列、视觉定位服务器）必须输出标准化的空间坐标（x, y, θ），单位为毫米或米，且所有设备使用同一车间地理坐标系原点（例如：车间入口左下角为(0,0)）。务必在每帧数据中附加毫秒级时间戳（Date.now()或NTP同步时间），前端据此做插值补偿网络抖动和渲染延迟。
- 推荐数据格式示例：
{"id":"agv-07","x":12485.3,"y":8921.7,"theta":1.24,"ts":1716234567890} - 后端应校验坐标合理性（如是否超出车间围栏），异常值过滤后再转发，避免前端显示“瞬移”
- 若AGV上报频率不固定（如20Hz～50Hz），服务端建议统一采样为固定频率（如40Hz）再推送给前端
WebSocket连接需保活、重连与状态管理
生产环境网络波动常见，不能依赖浏览器默认行为。前端须主动维护连接健康度：
- 设置 ping/pong 心跳：服务端每3秒发一次ping，前端收到后立即回pong；超时5秒未响应则触发重连
- 实现指数退避重连：断开后等待1s→2s→4s→8s…最大不超过30秒，避免密集重连冲击服务端
- 维护连接状态机：
connecting → open → closing → closed，UI上明确提示（如右上角小图标变红+文字“定位中断”） - 页面隐藏（
visibilitychange）时暂停接收新数据，但保持连接；切回前台后请求一次全量快照，避免位置滞后
前端渲染要兼顾精度与流畅性
直接用canvas 2D即可满足多数产线需求，无需引入Three.js等重型库。重点在于坐标到像素的精准映射与运动平滑：
立即学习“前端免费学习笔记（深入）”；
- 定义车间SVG/Canvas画布尺寸（如1200×800px），通过比例因子转换：
scale = canvasWidth / realWidthInMm，确保1:1缩放无失真 - 用
requestAnimationFrame驱动渲染，对每个AGV做简单线性插值（Lerp）：currentX = prevX + (targetX - prevX) * 0.2，避免跳跃感 - 叠加方向箭头和ID标签，θ角转为CSS transform rotate，文本用
ctx.fillText()绘制，字体大小随缩放自适应 - 开启Canvas的
imageSmoothingEnabled = false，防止小车图标模糊
安全与生产集成不可忽略
AGV定位属工控敏感数据，不能裸奔在公网：
- WebSocket必须走
wss://（TLS加密），服务端验证客户端证书或JWT Token（由MES系统下发） - 按角色控制可见范围：巡检员只能看本区域AGV，调度员可看全局，访客仅显示脱敏聚合热力图
- 与车间数字孪生平台对接时，用标准协议（如MQTT桥接或OPC UA over WebSockets）同步状态，避免多套WebSocket并存
- 在页面底部显示数据延迟（
当前延迟：23ms），数值来自ts与Date.now()差值，增强操作员信任感
