1. 基于WebSocket的实时数据推送监控

任务说明

构建一个基于WebSocket的实时数据推送监控系统，实现服务端定时推送模拟传感器数据，客户端实时接收并展示数据变化，同时当数据超过设定阈值时触发报警提示。本案例使用Node.js原生WebSocket模块实现，无需第三方依赖。

服务端实现

// server.js
const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });
const THRESHOLD = 80; // 温度报警阈值

// 模拟传感器数据生成
function generateSensorData() {
  return {
    timestamp: new Date().toISOString(),
    temperature: 20 + Math.random() * 70, // 20~90度
    humidity: 30 + Math.random() * 50,    // 30%~80%
    deviceId: 'DEV-001'
  };
}

wss.on('connection', (ws) => {
  console.log('客户端已连接');
  
  // 每秒推送一次数据
  const timer = setInterval(() => {
    const data = generateSensorData();
    const payload = JSON.stringify({
      type: 'data',
      data: data,
      alarm: data.temperature > THRESHOLD ? '高温报警' : null
    });
    ws.send(payload);
  }, 1000);

  ws.on('close', () => {
    clearInterval(timer);
    console.log('客户端已断开');
  });
});

console.log('WebSocket服务已启动: ws://localhost:8080');

客户端实现

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
  <h3>实时监控面板</h3>
  <div id="status">连接中...</div>
  <div id="data"></div>
  <div id="alarm" style="color:red;font-weight:bold"></div>

  <script>
    const ws = new WebSocket('ws://localhost:8080');
    const statusEl = document.getElementById('status');
    const dataEl = document.getElementById('data');
    const alarmEl = document.getElementById('alarm');

    ws.onopen = () => {
      statusEl.textContent = '已连接';
      statusEl.style.color = 'green';
    };

    ws.onmessage = (event) => {
      const msg = JSON.parse(event.data);
      if (msg.type === 'data') {
        const d = msg.data;
        dataEl.innerHTML = `时间: ${d.timestamp}<br>
          温度: ${d.temperature.toFixed(1)}°C<br>
          湿度: ${d.humidity.toFixed(1)}%<br>
          设备: ${d.deviceId}`;
        
        if (msg.alarm) {
          alarmEl.textContent = `⚠ ${msg.alarm} (温度超过${THRESHOLD}°C)`;
        } else {
          alarmEl.textContent = '';
        }
      }
    };

    ws.onerror = (err) => {
      statusEl.textContent = '连接错误';
      statusEl.style.color = 'red';
    };

    ws.onclose = () => {
      statusEl.textContent = '连接断开';
      statusEl.style.color = 'red';
    };
  </script>
</body>
</html>

运行与验证

依赖安装：执行 npm init -y && npm install ws 安装WebSocket库。

启动服务：运行 node server.js，控制台输出“WebSocket服务已启动”即表示成功。

打开客户端：用浏览器直接打开 index.html，页面显示“已连接”且每秒刷新一次温度、湿度数据。

验证报警：观察温度值，当超过80°C时页面出现红色报警文字；低于阈值时报警消失。由于数据随机生成，可在短时间内观察到报警触发与恢复。