JavaScript 中 SSE 怎么在物联网设备监控大盘中实时展示传感器推送数据-js教程-PHP中文网

SSE实现实时传感器数据展示需后端规范推送、前端EventSource连接、DOM防抖批量更新及健壮性设计。后端输出text/event-stream格式数据；前端监听message/event事件并自动重连；DOM更新需聚合高频数据、局部刷新；辅以快照加载、页面可见性控制和备用通道。

javascript 中 sse 怎么在物联网设备监控大盘中实时展示传感器推送数据

用 JavaScript 的 SSE（Server-Sent Events）实现实时传感器数据展示，核心是建立稳定长连接、正确解析流式数据、高效更新 DOM，同时兼顾断线重连和错误降级。物联网监控大盘对实时性、低开销和连接稳定性要求高，SSE 比 WebSocket 更轻量（无需双工、无握手开销），特别适合“服务端→前端”单向高频推送场景（如温湿度、电量、状态码等传感器数据）。

一、后端需按 SSE 协议规范推送数据

物联网网关或设备接入服务（如基于 Node.js/Python/Nginx）必须输出符合 SSE 格式的响应：

响应头必须包含 Content-Type: text/event-stream 和 Cache-Control: no-cache
每条消息以 data: 开头，可选 id:（用于断线续传）、event:（自定义事件类型）
消息以双换行符 \n\n 分隔；JSON 数据建议字符串化后放在 data 字段中，例如：
data: {"sensorId":"temp-01","value":23.6,"ts":1718245912}
保持 HTTP 连接不关闭（避免后端框架自动结束响应流）

二、前端用 EventSource 建立并维护连接

JavaScript 使用原生 EventSource API，简洁可靠，自动处理重连：

创建实例时传入 SSE 接口地址（支持带 token 的 URL，如 /api/sensors?token=xxx）
监听 message 事件获取默认流数据；也可监听自定义 event 名（如 sensor-update）
通过 onerror 捕获连接失败、网络中断；在回调中可记录日志、切换离线状态提示
连接异常时 EventSource 默认 3s 后自动重试，可通过 retry: 字段在服务端控制重连间隔

示例代码片段：

Java Development Man

Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。

下载

const es = new EventSource('/api/sensors/stream?deviceId=esp32-001');
es.onmessage = (e) => {
  const data = JSON.parse(e.data);
  updateSensorCard(data.sensorId, data.value, data.ts);
};
es.addEventListener('sensor-offline', e => {
  markDeviceOffline(JSON.parse(e.data).sensorId);
});
es.onerror = () => {
  console.warn('SSE connection lost');
};