实时数据推送技术

在制造业大屏中，数据不是"刷新一次看一次"那么简单。OEE（设备综合效率）每秒都在变化， 机器状态（运行/停机/报警）必须即时反映，产线产量要实时滚动。如果数据延迟 10 秒才更新， 操作员看到的就是"过去的故事"，不是"现在的情况"。

最简单粗暴的方式 — 前端设一个定时器，每隔 N 秒发一次 HTTP 请求问后端要数据。

// 最简单的轮询：每 2 秒请求一次 OEE 数据
let pollingTimer = null;

function startPolling() {
  pollingTimer = setInterval(async () => {
    try {
      const res = await fetch('/api/oee/realtime');
      const data = await res.json();
      updateDashboard(data);  // 更新大屏图表
    } catch (err) {
      console.error('轮询失败:', err);
    }
  }, 2000);  // 每 2 秒请求一次
}

function stopPolling() {
  clearInterval(pollingTimer);
}

// 页面加载时开始轮询
startPolling();

// 页面卸载时停止轮询（很重要！）
window.addEventListener('beforeunload', stopPolling);

const express = require('express');
const app = express();

app.get('/api/oee/realtime', (req, res) => {
  // 每次请求都从数据库/缓存读取最新数据
  const oeeData = {
    timestamp: Date.now(),
    line1: { oee: 87.3, status: 'running' },
    line2: { oee: 92.1, status: 'running' },
    line3: { oee: 65.8, status: 'alarm' }
  };
  res.json(oeeData);
});

app.listen(3000);

SSE 基于 HTTP 协议，服务端可以持续向客户端发送数据。客户端用 EventSource 接收。 和轮询不同，SSE 只建立一次连接，服务端有数据就推，没有就安静等着。

const express = require('express');
const app = express();

app.get('/api/sse/oee', (req, res) => {
  // 1. 设置 SSE 必需的响应头
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  res.flushHeaders();  // 立即发送响应头

  // 2. 每 2 秒推送一次 OEE 数据
  const interval = setInterval(() => {
    const data = {
      timestamp: Date.now(),
      line1: { oee: (80 + Math.random() * 15).toFixed(1) },
      line2: { oee: (85 + Math.random() * 10).toFixed(1) },
      line3: { oee: (60 + Math.random() * 20).toFixed(1) }
    };
    // SSE 格式: "data: ...\n\n"
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  }, 2000);

  // 3. 客户端断开时清理
  req.on('close', () => {
    clearInterval(interval);
    res.end();
  });
});

app.listen(3000);

// 1. 创建 EventSource 连接（浏览器原生 API！）
const eventSource = new EventSource('/api/sse/oee');

// 2. 监听消息事件
eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('收到OEE数据:', data);
  updateDashboard(data);  // 更新大屏
};

// 3. 监听连接打开
eventSource.onopen = () => {
  console.log('SSE 连接已建立');
};

// 4. 监听错误（自动重连是浏览器内置的！）
eventSource.onerror = (event) => {
  if (event.target.readyState === EventSource.CLOSED) {
    console.log('SSE 连接已关闭');
  } else {
    console.log('SSE 连接中断，浏览器将自动重连...');
  }
};

// 5. 手动关闭连接
// eventSource.close();

WebSocket 是一个独立的网络协议（ws://），通过 HTTP 握手升级建立连接后， 客户端和服务端可以随时互发消息，不再受 HTTP 请求-响应模式限制。

const { WebSocketServer } = require('ws');

// 创建 WebSocket 服务器，监听 8080 端口
const wss = new WebSocketServer({ port: 8080 });

// 保存所有已连接的客户端
const clients = new Set();

wss.on('connection', (ws) => {
  console.log('新客户端连接！当前连接数:', wss.clients.size);
  clients.add(ws);

  // 收到客户端消息
  ws.on('message', (data) => {
    const msg = JSON.parse(data);
    console.log('收到消息:', msg);

    // 示例：客户端请求订阅特定产线
    if (msg.type === 'subscribe') {
      ws.lineId = msg.lineId;  // 标记该客户端关注的产线
      ws.send(JSON.stringify({
        type: 'subscribed',
        lineId: msg.lineId
      }));
    }
  });

  // 客户端断开
  ws.on('close', () => {
    clients.delete(ws);
    console.log('客户端断开，剩余:', clients.size);
  });
});

// 模拟 OEE 数据 — 每 2 秒向所有客户端广播
setInterval(() => {
  const oeeData = {
    type: 'oee_update',
    timestamp: Date.now(),
    lines: {
      line1: { oee: (80 + Math.random() * 15).toFixed(1), status: 'running' },
      line2: { oee: (85 + Math.random() * 10).toFixed(1), status: 'running' },
      line3: { oee: (60 + Math.random() * 25).toFixed(1), status: 'alarm' }
    }
  };

  // 向所有已连接的客户端广播
  for (const client of clients) {
    if (client.readyState === 1) {  // WebSocket.OPEN
      client.send(JSON.stringify(oeeData));
    }
  }
}, 2000);

console.log('WebSocket 服务器运行在 ws://localhost:8080');

npm init -y
npm install ws express

// 1. 创建 WebSocket 连接
const ws = new WebSocket('ws://localhost:8080');

// 2. 连接成功
ws.onopen = () => {
  console.log('✅ WebSocket 连接成功');

  // 可以立即向服务端发送消息！
  ws.send(JSON.stringify({
    type: 'subscribe',
    lineId: 'line1'
  }));
};

// 3. 收到服务端消息
ws.onmessage = (event) => {
  const data = JSON.parse(event.data);

  if (data.type === 'oee_update') {
    updateOeeChart(data.lines);     // 更新 OEE 实时曲线
    updateStatusCards(data.lines);   // 更新设备状态卡片
  }
};

// 4. 连接关闭
ws.onclose = (event) => {
  console.log('连接关闭:', event.code, event.reason);
  // 注意：WebSocket 不会自动重连！需要自己实现
  setTimeout(() => {
    console.log('尝试重连...');
    connectWebSocket();  // 重新创建连接
  }, 3000);
};

// 5. 连接错误
ws.onerror = (error) => {
  console.error('WebSocket 错误:', error);
};

const { Server } = require('socket.io');
const express = require('express');

const app = express();
const httpServer = app.listen(3000);

// 创建 Socket.IO 服务器
const io = new Server(httpServer, {
  cors: { origin: '*' }  // 开发环境允许所有来源
});

io.on('connection', (socket) => {
  console.log('客户端连接:', socket.id);

  // 客户端加入 "dashboard" 房间
  socket.on('join-dashboard', () => {
    socket.join('dashboard');
    console.log(socket.id, '加入 dashboard 房间');
  });

  // 客户端请求钻取某个设备详情
  socket.on('drill-down', (deviceId) => {
    // 只给请求者返回数据（不是广播）
    const history = getDeviceHistory(deviceId);
    socket.emit('device-detail', history);
  });

  socket.on('disconnect', () => {
    console.log('客户端断开:', socket.id);
  });
});

// 每 2 秒向 "dashboard" 房间广播 OEE 数据
setInterval(() => {
  const oeeData = {
    timestamp: Date.now(),
    lines: {
      line1: { oee: (80 + Math.random() * 15).toFixed(1) },
      line2: { oee: (85 + Math.random() * 10).toFixed(1) },
      line3: { oee: (60 + Math.random() * 20).toFixed(1) }
    }
  };

  // 🔥 关键：只推送给 dashboard 房间的成员
  io.to('dashboard').emit('oee-update', oeeData);
}, 2000);

// 引入 Socket.IO 客户端（CDN 或 npm）
// <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>

const socket = io('http://localhost:3000', {
  // 自动重连配置（Socket.IO 内置！）
  reconnection: true,
  reconnectionAttempts: Infinity,   // 无限重试
  reconnectionDelay: 1000,          // 首次重连延迟 1 秒
  reconnectionDelayMax: 5000,       // 最大延迟 5 秒
});

// 连接成功
socket.on('connect', () => {
  console.log('连接成功，ID:', socket.id);
  socket.emit('join-dashboard');  // 加入房间
});

// 监听 OEE 更新
socket.on('oee-update', (data) => {
  updateOeeChart(data.lines);
  updateStatusCards(data.lines);
});

// 监听断线（Socket.IO 会自动重连）
socket.on('disconnect', (reason) => {
  console.log('断线原因:', reason);
  // 不需要手动重连！Socket.IO 自动处理
});

// 监听重连成功
socket.on('reconnect', (attempt) => {
  console.log('重连成功，尝试次数:', attempt);
});

// 钻取设备详情（双向通信！）
function drillDownDevice(deviceId) {
  socket.emit('drill-down', deviceId);
  socket.on('device-detail', (data) => {
    showDeviceModal(data);  // 弹出设备详情弹窗
  });
}

实时曲线的核心逻辑：收到新数据 → 追加到数组尾部 → 超过 N 条则移除头部 → 调用 setOption 更新。 不需要重新创建图表，只更新数据即可，ECharts 会自动做过渡动画。

// 假设已经创建好了 ECharts 实例
const MAX_POINTS = 50;  // 保留最近 50 个数据点

// X 轴时间数据
let timeData = [];
// Y 轴各产线 OEE 数据
let line1Data = [];
let line2Data = [];
let line3Data = [];

// 收到新数据时调用
function appendData(newData) {
  const now = new Date(newData.timestamp);
  const timeStr = now.toLocaleTimeString();

  // 1. 追加新数据
  timeData.push(timeStr);
  line1Data.push(parseFloat(newData.lines.line1.oee));
  line2Data.push(parseFloat(newData.lines.line2.oee));
  line3Data.push(parseFloat(newData.lines.line3.oee));

  // 2. 超过最大点数，移除最旧的数据（队列滑动窗口）
  if (timeData.length > MAX_POINTS) {
    timeData.shift();    // 移除头部最旧的
    line1Data.shift();
    line2Data.shift();
    line3Data.shift();
  }

  // 3. 更新图表（只更新 series 数据，不需要重建图表）
  chart.setOption({
    xAxis: { data: timeData },
    series: [
      { data: line1Data },
      { data: line2Data },
      { data: line3Data }
    ]
  });
}

// Gauge（仪表盘）配置
const gaugeOption = {
  series: [{
    type: 'gauge',
    detail: { formatter: '{value}%' },
    data: [{ value: 87.3, name: 'OEE' }],
    // 动画配置
    animationDurationUpdate: 800,  // 过渡动画时长 800ms
    animationEasingUpdate: 'cubicInOut'  // 缓动函数
  }]
};

// 收到新 OEE 值时更新
function updateGauge(newOee) {
  gaugeChart.setOption({
    series: [{
      data: [{ value: newOee, name: 'OEE' }]
    }]
  });
  // ECharts 会自动从旧值 → 新值做 800ms 的平滑过渡动画
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>实时OEE看板</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
  <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
  <style>
    body { background: #0a0e27; color: #e0e6ff; font-family: sans-serif; display: flex; gap: 20px; padding: 20px; }
    .chart-box { background: #131a3a; border: 1px solid #7ec8f0; border-radius: 12px; padding: 16px; }
    #lineChart { width: 600px; height: 350px; }
    #gaugeChart { width: 300px; height: 350px; }
    #status { position: fixed; top: 10px; right: 20px; padding: 6px 14px; border-radius: 6px; font-size: 13px; }
    .connected { background: rgba(34,197,94,0.2); color: #22c55e; }
    .disconnected { background: rgba(255,107,107,0.2); color: #ff6b6b; }
  </style>
</head>
<body>
  <div id="status" class="disconnected">未连接</div>

  <div class="chart-box">
    <h3>OEE 实时曲线</h3>
    <div id="lineChart"></div>
  </div>

  <div class="chart-box">
    <h3>产线1 OEE</h3>
    <div id="gaugeChart"></div>
  </div>

  <script>
    // ===== 1. 初始化图表 =====
    const lineChart = echarts.init(document.getElementById('lineChart'));
    const gaugeChart = echarts.init(document.getElementById('gaugeChart'));

    const MAX = 50;
    let times = [], l1 = [], l2 = [], l3 = [];

    // 折线图初始配置
    lineChart.setOption({
      backgroundColor: 'transparent',
      tooltip: { trigger: 'axis' },
      legend: { data: ['产线1', '产线2', '产线3'], textStyle: { color: '#8892b0' } },
      xAxis: { type: 'category', data: [], axisLabel: { color: '#8892b0' } },
      yAxis: { type: 'value', min: 50, max: 100, axisLabel: { color: '#8892b0' },
               splitLine: { lineStyle: { color: '#7ec8f0' } } },
      series: [
        { name: '产线1', type: 'line', smooth: true, data: [], lineStyle: { color: '#4facfe' } },
        { name: '产线2', type: 'line', smooth: true, data: [], lineStyle: { color: '#22c55e' } },
        { name: '产线3', type: 'line', smooth: true, data: [], lineStyle: { color: '#ff6b6b' } }
      ]
    });

    // 仪表盘初始配置
    gaugeChart.setOption({
      backgroundColor: 'transparent',
      series: [{
        type: 'gauge',
        detail: { formatter: '{value}%', color: '#e0e6ff', fontSize: 28 },
        data: [{ value: 0, name: 'OEE' }],
        axisLine: { lineStyle: { color: [[0.6,'#ff6b6b'],[0.8,'#ffd93d'],[1,'#22c55e']] } },
        axisLabel: { color: '#8892b0' },
        animationDurationUpdate: 800,
        animationEasingUpdate: 'cubicInOut'
      }]
    });

    // ===== 2. 连接 Socket.IO =====
    const socket = io('http://localhost:3000');
    const statusEl = document.getElementById('status');

    socket.on('connect', () => {
      statusEl.textContent = '已连接 ' + socket.id;
      statusEl.className = 'connected';
      socket.emit('join-dashboard');
    });

    socket.on('disconnect', () => {
      statusEl.textContent = '连接断开，自动重连中...';
      statusEl.className = 'disconnected';
    });

    // ===== 3. 收到实时数据，更新图表 =====
    socket.on('oee-update', (data) => {
      const time = new Date(data.timestamp).toLocaleTimeString();

      times.push(time);
      l1.push(+data.lines.line1.oee);
      l2.push(+data.lines.line2.oee);
      l3.push(+data.lines.line3.oee);

      if (times.length > MAX) { times.shift(); l1.shift(); l2.shift(); l3.shift(); }

      // 更新曲线
      lineChart.setOption({
        xAxis: { data: times },
        series: [{ data: l1 }, { data: l2 }, { data: l3 }]
      });

      // 更新仪表盘
      gaugeChart.setOption({
        series: [{ data: [{ value: l1[l1.length-1], name: 'OEE' }] }]
      });
    });
  </script>
</body>
</html>