如何用HTML5 WebSocket实现服务器CPU负载实时监控图表的长期优化？

本文共计659个文字，预计阅读时间需要3分钟。

使用WebSocket实现实时CPU负载监控图表，核心在于前后端高效通信与前端动态渲染。后端持续采集CPU使用率，通过WebSocket主动推送数据；前端接收数据更新图表，避免轮询，确保低延迟和高响应性。

后端：用Node.js + ws 持续采集并推送

借助 os 模块获取系统CPU信息，配合 ws 库建立WebSocket服务。不依赖Express等框架，轻量直接：

• 每500ms调用 os.loadavg() 或更精确的 process.cpuUsage()（需两次采样计算差值）获取瞬时负载
• 将时间戳和CPU百分比（如 62.3）封装为JSON对象，如 {"ts":1715824320123,"cpu":62.3}
• 通过 broadcast 向所有连接的客户端实时推送，不缓存、不落库

前端：用Chart.js + WebSocket 动态绘图

页面加载即建立WebSocket连接，接收到数据后只更新最近30秒（或60个点）的数据流，保持图表轻量平滑：

• 初始化Chart.js折线图，x轴为时间（格式化为mm:ss），y轴为0–100% CPU
• 监听 message 事件，解析JSON，用 chart.data.labels.push() 和 chart.data.datasets[0].data.push() 追加新点
• 超出设定点数时，同步调用 .shift() 删除最旧项，维持滚动视图

关键优化点：避免常见卡顿与失真

实时图表容易因数据过载或渲染阻塞变慢，需针对性处理：

立即学习“前端免费学习笔记（深入）”；

• 后端推送频率建议设为 200–500ms，低于200ms易触发浏览器渲染瓶颈；前端可做简单节流，比如丢弃间隔＜100ms的重复数据
• 前端用 requestAnimationFrame 包裹 chart.update()，确保渲染与屏幕刷新同步
• CPU采样若用 os.cpus() 计算各核使用率，需注意Linux下 /proc/stat 更准，Node.js中可用 systeminformation 库跨平台兼容

部署注意：跨域与连接稳定性

生产环境需考虑实际运行约束：

• WebSocket地址写成 ws://your-domain.com:8080（非localhost），Nginx需配置 proxy_pass 并透传 Upgrade 和 Connection 头
• 前端监听 onclose 和 onerror，自动尝试重连（带指数退避），避免断连后图表停滞
• 服务端设置 ping/pong 心跳（ws库默认开启），防止代理或防火墙误杀空闲连接