构建实时心率仪表板：用 React 和 WebSocket 可视化实时数据

mkdir heart-rate-dashboard
cd heart-rate-dashboard
mkdir server client

cd server
npm init -y
npm install ws

// server/server.js
import { WebSocketServer } from 'ws';

const wss = new WebSocketServer({ port: 8080 });

// Function to simulate a single ECG data point
const generateEcgPoint = (time) => {
    const pWave = 0.1 * Math.exp(-Math.pow((time % 1) - 0.2, 2) / 0.005);
    const qrsComplex = 0.8 * Math.exp(-Math.pow((time % 1) - 0.5, 2) / 0.003) - 0.2 * Math.exp(-Math.pow((time % 1) - 0.5, 2) / 0.01);
    const tWave = 0.2 * Math.exp(-Math.pow((time % 1) - 0.8, 2) / 0.01);
    return pWave + qrsComplex + tWave;
};

let time = 0;
const clients = new Set();

wss.on('connection', (ws) => {
    console.log('Client connected');
    clients.add(ws);

    ws.on('close', () => {
        console.log('Client disconnected');
        clients.delete(ws);
    });
});

setInterval(() => {
    const dataPoint = {
        time: new Date().toLocaleTimeString(),
        value: generateEcgPoint(time),
    };

    const data = JSON.stringify(dataPoint);

    for (const client of clients) {
        if (client.readyState === 1) { // WebSocket.OPEN
            client.send(data);
        }
    }

    time += 0.05;
}, 50);

console.log('WebSocket server started on port 8080');

node server.js

cd ../client
npx create-react-app .
npm install chart.js react-chartjs-2

// client/src/App.js
import React, { useState, useEffect, useRef } from 'react';
import { Line } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

const App = () => {
  const [data, setData] = useState({
    labels: [],
    datasets: [
      {
        label: 'Heart Rate',
        data: [],
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
      },
    ],
  });

  const ws = useRef(null);

  useEffect(() => {
    ws.current = new WebSocket('ws://localhost:8080');

    ws.current.onopen = () => console.log('WebSocket connection opened');
    ws.current.onclose = () => console.log('WebSocket connection closed');

    ws.current.onmessage = (event) => {
      const newDataPoint = JSON.parse(event.data);
      setData((prevData) => {
        const newLabels = [...prevData.labels, newDataPoint.time];
        const newData = [...prevData.datasets.data, newDataPoint.value];

        // Keep the chart to a manageable size
        if (newLabels.length > 50) {
          newLabels.shift();
          newData.shift();
        }

        return {
          ...prevData,
          labels: newLabels,
          datasets: [
            {
              ...prevData.datasets,
              data: newData,
            },
          ],
        };
      });
    };

    return () => {
      ws.current.close();
    };
  }, []);

  const options = {
    scales: {
      y: {
        beginAtZero: true,
        suggestedMax: 1,
        suggestedMin: -0.5,
      },
    },
    animation: false,
  };

  return (
    <div style={{ width: '80%', margin: 'auto' }}>
      <h1>Real-Time Heart Rate Monitor</h1>
      <Line data={data} options={options} />
    </div>
  );
};

export default App;