一、项目背景与技术选型

这次要对接的是分布在不同区域的环境采集设备，每台设备通过4G模块上传温湿度、PM2.5等数据。前端需要实现三个核心功能：设备地图可视化、数据实时刷新、远程指令下发。最开始考虑过用React，但团队Vue更熟，加上Vue3的Composition API写复杂状态逻辑更舒服，最终定了Vue3+TS。

WebSocket选型用了原生的，没采用。因为设备端协议是自定义的TCP格式，后端做了WS转换，消息体比较简单，原生WebSocket完全够用。状态管理刚开始用Pinia，后来发现设备数据量太大，改用了Vuex+手动优化的方案。

二、核心实现细节

WebSocket连接管理

在main.ts里初始化全局WS连接是个坑，页面切换时容易重复连接。最后放在App.vue里用provide/inject实现：

重连机制加了指数退避，断线后先等2秒，然后4秒、8秒，最大重试间隔设了30秒。

设备地图渲染

用Leaflet渲染设备分布图，每个设备标记点绑定自定义Popup：

实时数据更新时遇到Vue响应式问题，直接修改device数组里的对象不触发更新，最后用深拷贝解决。

数据持久化与缓存

本地用IndexedDB存储7天内的历史数据，采用LRU淘汰策略。有个值得注意的细节：WebSocket消息到达率不是100%，需要根据设备ID和时间戳去重。

三、性能优化实战

当同时监控200+设备时，页面出现明显卡顿。通过Chrome Performance分析发现两个瓶颈：

频繁的DOM更新：改用虚拟滚动列表，可见区域外设备不渲染

内存泄漏：在beforeUnmount里忘记移除WebSocket监听器，导致组件卸载后回调函数仍被引用

最终优化方案：

对传感器数据做防抖处理，同一设备500ms内的多次更新合并为一次渲染

使用Vue的shallowRef处理大型设备列表

复杂计算丢给Web Worker，比如设备告警规则判断

四、踩坑记录

设备状态同步问题

多个浏览器标签页打开时，各页面WS连接独立，导致设备状态不同步。后来用BroadcastChannel API实现跨标签页通信：

移动端适配

在低端安卓机上测试时，Leaflet地图拖动卡顿。把栅格瓦片换成矢量地图，性能提升明显。触控设备上的标记点点击事件需要特别处理，默认的click事件在移动端有300ms延迟，改用了fastclick库。

五、部署注意事项

生产环境遇到CORS问题，需要在nginx配置WebSocket代理：

另外建议开启Gzip压缩，我们的JSON数据包体积减少了70%。静态资源配置强缓存，但index.html要用协商缓存，避免更新后用户拿到旧版本。

目前项目还在迭代中，下一步准备加入3D可视化（打算用Three.js）和离线模式支持。物联网前端开发最深的体会是：不仅要考虑代码优雅，更要考虑网络不稳定、设备兼容性这些现实因素。以上方案仅供参考，欢迎交流讨论。