WebSocket实现实时CPU监控的核心是后端每500ms采集并推送负载数据，前端用Chart.js动态渲染滚动图表；需优化推送频率、节流重复数据、用requestAnimationFrame更新，并处理跨域、重连与心跳。
用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库默认开启），防止代理或防火墙误杀空闲连接
