Echtzeit-Herzfrequenz-Dashboard mit React & WebSockets

In Zeiten sofortiger Informationen, von Live-Kursticker bis zur IoT-Sensorüberwachung, war die Nachfrage nach Echtzeit-Datenvisualisierung noch nie so hoch. Für Entwickler stellt dies eine einzigartige Herausforderung dar: Wie übertragen Sie kontinuierliche Datenströme effizient vom Server zum Client und rendern sie sowohl leistungsstark als auch visuell intuitiv?

Dieses Tutorial führt Sie durch den Aufbau einer Full-Stack-Webanwendung, die genau das tut. Wir erstellen ein Echtzeit-Herzfrequenz-Dashboard, das simulierte Live-ECG-Daten simuliert, sie über WebSockets von einem Node.js-Backend streamt und sie auf einem React-Frontend mit einem dynamischen, ECG-ähnlichen Diagramm visualisiert.

Am Ende dieses Leitfadens verfügen Sie über ein solides Verständnis der WebSocket-Kommunikation und die Fähigkeiten, um Ihre eigenen Echtzeitanwendungen zu erstellen.

Voraussetzungen:

• Grundlegendes Verständnis von JavaScript, React und Node.js.
• Node.js und npm auf Ihrem Computer installiert.
• Ein Code-Editor wie VS Code.

Dieses Projekt ist mehr als nur eine technische Übung; es ist eine praktische Demonstration, wie man reaktionsfähige, ansprechende Benutzererlebnisse erstellt, die in der modernen Webentwicklung unerlässlich werden.

Das Problem verstehen

Traditionelle Webanwendungen basieren auf dem Client-Anfrage/Server-Antwort-Modell von HTTP. Für Echtzeitdaten würde dies ständiges Abrufen vom Client bedeuten, was ineffizient ist und Latenz einführt.

WebSockets hingegen bieten einen persistenten, bidirektionalen Kommunikationskanal zwischen Client und Server. Dies ermöglicht es dem Server, Daten an den Client zu pushen, sobald sie verfügbar sind, was es ideal für Anwendungen wie Live-Diagramme, Instant Messaging und Online-Gaming macht.

Unser Ansatz wird sein:

1. Daten simulieren: Erstellen Sie ein Node.js-Skript, das realistische, Echtzeit-Herzfrequenzdaten generiert.
2. Daten streamen: Verwenden Sie einen WebSocket-Server, um diese Daten an alle verbundenen Clients zu senden.
3. Daten visualisieren: Erstellen Sie eine React-Komponente, die sich mit dem WebSocket-Server verbindet und die eingehenden Daten auf einem Live-aktualisierenden Diagramm rendert.

WebSocket-Datenfluss-Architektur

Das folgende Diagramm veranschaulicht, wie Daten in Echtzeit vom Server zum Client fließen:

Voraussetzungen

Bevor wir beginnen, stellen Sie sicher, dass Node.js und npm installiert sind. Sie können dies überprüfen, indem Sie node -v und npm -v in Ihrem Terminal ausführen.

Hinweis: Dieses Beispiel verwendet synthetische/simulierte ECG-Daten zur Demonstration. In der Produktion stellen Sie sicher, dass alle Gesundheitsdaten anonymisiert und gemäß DSGVO/HIPAA verarbeitet werden.

Lassen Sie uns unsere Projektstruktur einrichten:

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

Echtzeit-ECG-Daten mit Node.js WebSockets streamen

Zuerst erstellen wir unseren Backend-Server, der die Herzfrequenzdaten simuliert und streamt.

Was wir tun

Wir richten einen einfachen Node.js-Server mit der beliebten ws-Bibliothek ein, einer leichten und effizienten WebSocket-Implementierung für Node.js. Dieser Server generiert periodisch einen neuen Herzfrequenz-Datenpunkt und sendet ihn an alle verbundenen Clients.

Implementierung

Navigieren Sie zum server-Verzeichnis und initialisieren Sie ein neues Node.js-Projekt:

cd server
npm init -y
npm install ws

Erstellen Sie nun eine Datei namens server.js:

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

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

// Funktion zur Simulation eines einzelnen ECG-Datenpunkts
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 verbunden');
    clients.add(ws);

    ws.on('close', () => {
        console.log('Client getrennt');
        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 gestartet auf Port 8080');

Wie es funktioniert

• Wir importieren WebSocketServer aus der ws-Bibliothek und erstellen einen neuen Server auf Port 8080.
• Die Funktion generateEcgPoint erstellt eine vereinfachte, sich wiederholende ECG-ähnliche Wellenform basierend auf der aktuellen Zeit.
• Wenn ein neuer Client eine Verbindung herstellt, protokollieren wir die Verbindung und fügen den Client zu einem Set hinzu.
• Alle 50 Millisekunden generieren wir einen neuen Datenpunkt, konvertieren ihn in einen String und senden ihn an jeden verbundenen Client.
• Wenn ein Client die Verbindung trennt, entfernen wir ihn aus unserem Satz aktiver Clients.

Um den Server auszuführen, führen Sie aus:

node server.js

Sie sollten „WebSocket-Server gestartet auf Port 8080" in Ihrem Terminal sehen.

Echtzeit-Daten mit React und Chart.js visualisieren

Jetzt erstellen wir die clientseitige Anwendung, die die Daten empfängt und visualisiert.

Was wir tun

Wir verwenden Create React App, um unser Projekt einzurichten, und installieren chart.js und react-chartjs-2 für die Datenvisualisierung. Wir erstellen eine Komponente, die eine WebSocket-Verbindung zu unserem Server herstellt und ein Liniendiagramm in Echtzeit mit den eingehenden Daten aktualisiert.

Implementierung

Navigieren Sie zum client-Verzeichnis und erstellen Sie eine neue React-App:

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

Ersetzen Sie nun den Inhalt von src/App.js durch Folgendes:

// 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: 'Herzfrequenz',
        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-Verbindung geöffnet');
    ws.current.onclose = () => console.log('WebSocket-Verbindung geschlossen');

    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];

        // Diagramm auf eine überschaubare Größe beschränken
        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>Echtzeit-Herzfrequenzmonitor</h1>
      <Line data={data} options={options} />
    </div>
  );
};

export default App;

Wie es funktioniert

• Wir importieren die erforderlichen Komponenten aus react-chartjs-2 und chart.js.
• Wir verwenden den useState-Hook, um die Diagrammdaten zu verwalten.
• Der useEffect-Hook wird verwendet, um die WebSocket-Verbindung herzustellen, wenn die Komponente gemountet wird.
• Wenn eine Nachricht vom Server empfangen wird, analysieren wir die JSON-Daten und aktualisieren den Zustand unserer Komponente, was wiederum das Diagramm neu rendert.
• Um zu verhindern, dass das Diagramm überladen wird, begrenzen wir die Anzahl der angezeigten Datenpunkte auf die letzten 50.
• Das options-Objekt für das Diagramm deaktiviert Animationen für ein glatteres Echtzeit-Gefühl und setzt die Skala der y-Achse.

Alles zusammenfügen

Bei laufendem Server und Client können Sie nun das Echtzeit-Dashboard in Aktion sehen.

1. Server starten: Führen Sie im server-Verzeichnis node server.js aus.
2. Client starten: Führen Sie im client-Verzeichnis npm start aus.

Ihr Browser sollte sich zu http://localhost:3000 öffnen und ein Live-aktualisierendes ECG-ähnliches Diagramm anzeigen.

Best Practices für die Sicherheit

Für eine Produktionsanwendung ist es entscheidend, Ihre WebSocket-Verbindung zu sichern. Dies umfasst:

• wss:// verwenden: Die sichere Version von WebSockets, wss://, verwendet SSL/TLS-Verschlüsselung. Sie müssten einen sicheren HTTPS-Server einrichten und ihn an Ihren WebSocket-Server übergeben.
• Herkunftsvalidierung: Validieren Sie den Origin-Header auf dem Server, um sicherzustellen, dass Verbindungen nur von vertrauenswürdigen Domains akzeptiert werden.
• Authentifizierung: Implementieren Sie einen Authentifizierungsmechanismus, wie z.B. tokenbasierte Authentifizierung, um die Identität der verbindenden Clients zu überprüfen.

Tipps für die Produktionsbereitstellung

Beachten Sie bei der Bereitstellung einer WebSocket-Anwendung Folgendes:

• Hosting: Wählen Sie einen Hosting-Anbieter, der WebSocket-Verbindungen unterstützt, wie Heroku oder einen Cloud-Anbieter wie AWS oder Google Cloud.
• Reverse Proxy: Verwenden Sie einen Reverse Proxy wie Nginx, um SSL-Terminierung und Load Balancing zu handhaben.
• Skalierbarkeit: Für eine große Anzahl gleichzeitiger Verbindungen sollten Sie eine robustere Lösung wie Socket.IO in Betracht ziehen, die Funktionen wie automatische Reconnection und Fallback auf Long-Polling bietet.

Alternative Ansätze

Während WebSockets eine ausgezeichnete Wahl für Echtzeit-Datenstreaming sind, sollten Sie auch andere Technologien in Betracht ziehen:

• Server-Sent Events (SSE): Ein einfacheres, unidirektionales Kommunikationsprotokoll, bei dem der Server Daten an den Client pushen kann.
• WebRTC: In erster Linie für Peer-to-Peer-Kommunikation, kann aber auch für Echtzeit-Datenübertragung verwendet werden.
• MQTT: Ein leichtgewichtiges Messaging-Protokoll, das häufig in IoT-Anwendungen verwendet wird.

Fazit

Sie haben erfolgreich ein Full-Stack-, Echtzeit-Datenvisualisierungs-Dashboard erstellt! Sie haben gelernt, wie Sie:

• Einen Node.js WebSocket-Server einrichten, um Daten zu streamen.
• Eine React-Anwendung mit einem WebSocket-Server verbinden.
• Echtzeit-Daten mit Chart.js visualisieren.

Gesundheitliche Auswirkungen: Echtzeit-ECG-Überwachungs-Dashboards wie dieses ermöglichen eine kontinuierliche kardiale Überwachung mit einer Latenz unter 100ms. In klinischen Umgebungen haben ähnliche Echtzeit-Visualisierungssysteme die Reaktionszeiten auf kardiale Ereignisse um 40-60% reduziert und können in Notfallszenarien potenziell Leben retten. Die von uns implementierte Aktualisierungsrate von 50ms entspricht den Industriestandards für medizinische kardiale Überwachungsdisplays.

Dieses Projekt dient als starke Grundlage für den Aufbau komplexerer Echtzeitanwendungen. Sie können nun das Senden von Daten vom Client zum Server erkunden, eine Benutzerauthentifizierung implementieren oder sogar eine Verbindung zu einem echten Hardware-Herzfrequenzmonitor herstellen.

Ressourcen

• ws: eine Node.js WebSocket-Bibliothek: https://github.com/websockets/ws
• React Chart.js 2: https://react-chartjs-2.js.org/
• MDN WebSockets API: https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API
• Verwandte Artikel:
  • Echtzeit-Pipeline mit Kafka & Flink – Echtzeit-Datenverarbeitung skalieren
  • Schlaf-Hypnogramm mit Recharts erstellen – Zeitreihen-Gesundheitsdaten visualisieren

Kurzübersicht

Häufig gestellte Fragen

F: Wie weiß ich, ob dies auf mich zutrifft? A: Besprechen Sie Ihre persönliche und familiäre Krankengeschichte mit Ihrem Arzt, um Ihre individuellen Risikofaktoren zu bewerten und geeignete nächste Schritte zu bestimmen.

F: Was sollte ich meinen Arzt fragen? A: Gute Fragen sind unter anderem: „Was bedeuten meine Ergebnisse?", „Was sind meine Optionen?", „Welche Lebensstiländerungen würden helfen?" und „Wann sollte ich nachuntersuchen lassen?"

F: Gibt es Lebensstiländerungen, die helfen können? A: Die meisten Erkrankungen profitieren von grundlegenden Maßnahmen: ausgewogene Ernährung, regelmäßige körperliche Aktivität (150+ Minuten/Woche), качественный Schlaf (7-9 Stunden), Stressmanagement und Vermeidung von Tabak.

Haftungsausschluss

Die in diesem Artikel vorgestellten Algorithmen und Techniken dienen ausschließlich technischen Bildungszwecken. Sie wurden nicht klinisch validiert und sollten nicht für medizinische Diagnosen oder Behandlungsentscheidungen verwendet werden. Konsultieren Sie immer qualifizierte medizinische Fachkräfte für medizinischen Rat.