实时仪表板：构建心率监测仪提升远程健康跟踪

Source: Dev.to

在现代健康领域，实时数据的需求——从可穿戴传感器到远程监测——从未如此迫切。对于开发者和健康科技爱好者来说，挑战在于如何高效地将持续的数据流从服务器推送到客户端。

创建响应式体验意味着要摆脱传统的数据获取方式，转向持久的“实时”连接。传统的网页应用依赖请求‑响应模型，这意味着客户端必须不断向服务器请求更新。这往往会导致延迟或在移动设备上产生高电量消耗。

WebSockets 通过提供双向通信通道来解决这个问题。服务器可以在心跳信号产生的那一毫秒即时推送到仪表盘，从而打造出无缝、无慌乱的用户体验。

比较：HTTP 轮询 vs WebSocket

使用 Node.js 模拟 ECG 波形

为了创建一个逼真的环境，我们使用 Node.js 来模拟 ECG（心电图）波形。脚本会生成模仿静息心脏的 P 波、QRS 复合波和 T 波的数据点。这些点通过 WebSocket 服务器广播，使每个已连接的用户同时看到相同的节律。

// Example: ECG simulation (Node.js)
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

function generateECGPoint() {
  // Simple sine‑based mock; replace with realistic model as needed
  const t = Date.now() / 1000;
  const value = Math.sin(2 * Math.PI * 1.2 * t) * 0.5 + Math.random() * 0.05;
  return { timestamp: Date.now(), value };
}

setInterval(() => {
  const point = generateECGPoint();
  wss.clients.forEach(client => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(JSON.stringify(point));
    }
  });
}, 20); // ~50 points per second

前端实现（使用 React 和 Chart.js）

前端使用 React 和 Chart.js 将原始数字转换为可识别的波形。通过将图表限制在最近的 50 个数据点，界面保持简洁且响应迅速，避免对设备处理器造成过重负担。

关键策略

• 持久化 Hook – 使用 useEffect 来建立并清理 WebSocket 连接。
• 状态管理 – 在新点到达时实时更新标签和数据集。
• 性能调优 – 禁用繁重的动画，以确保心律的平滑“滚动”效果。

import React, { useEffect, useState } from 'react';
import { Line } from 'react-chartjs-2';

const HeartbeatChart = () => {
  const [dataPoints, setDataPoints] = useState([]);

  useEffect(() => {
    const ws = new WebSocket('ws://localhost:8080');
    ws.onmessage = (event) => {
      const point = JSON.parse(event.data);
      setDataPoints(prev => {
        const updated = [...prev, point.value].slice(-50);
        return updated;
      });
    };
    return () => ws.close();
  }, []);

  const chartData = {
    labels: dataPoints.map((_, i) => i),
    datasets: [
      {
        label: 'ECG',
        data: dataPoints,
        borderColor: 'red',
        fill: false,
        pointRadius: 0,
        tension: 0.1,
      },
    ],
  };

  const options = {
    animation: false,
    scales: {
      x: { display: false },
      y: { min: -1, max: 1 },
    },
  };

  return ;
};

export default HeartbeatChart;

安全考虑

在从模拟环境转向真实世界的健康工具时，安全是不可妥协的：

• WSS（WebSocket Secure） – 使用 SSL/TLS 对传输中的数据进行加密。
• 来源验证 – 仅接受来自可信域名的连接。
• 基于令牌的身份验证 – 使用 JWT 或类似机制验证每个客户端。

这些措施可确保敏感的生理数据仅在用户与其提供者之间传递。

基于 WebSocket 的心率监测优势

• 效率 – 与传统轮询相比，WebSocket 可降低服务器负载。
• 可视化 – 干净、实时更新的图表提升用户信任和参与度。
• 可扩展性 – 合理的后端架构能够处理成千上万的并发“心跳”。

进一步阅读

要完整了解代码的演练以及更高级的实现细节，请参阅 WellAlly 的完整指南。