Real-Time Dashboards: Building a Heart Rate Monitor Enhances Remote Health Tracking

Source: Dev.to

In the world of modern wellness, the demand for live data—from wearable sensors to remote monitoring—has never been higher. For developers and health‑tech enthusiasts, the challenge lies in pushing continuous data streams from a server to a client efficiently.

Creating a responsive experience suggests moving away from old‑school data fetching toward persistent, “live” connections. Traditional web applications rely on a request‑response model, meaning the client must constantly ask the server for updates. This often leads to lag or high battery drain on mobile devices.

WebSockets solve this by providing a two‑way communication channel. The server can push a heartbeat to the dashboard the exact millisecond it occurs, creating a seamless, no‑panic user experience.

Comparison: HTTP Polling vs WebSockets

Simulating an ECG Waveform with Node.js

To create a realistic environment, we use Node.js to simulate an ECG (Electrocardiogram) waveform. The script generates data points that mimic the P‑wave, QRS complex, and T‑wave of a resting heart. These points are broadcast via a WebSocket server so every connected user sees the same rhythm simultaneously.

// 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

Frontend Implementation with React and Chart.js

The frontend uses React and Chart.js to turn raw numbers into a recognizable waveform. By limiting the chart to the most recent 50 data points, the interface remains clean and responsive without overloading the device’s processor.

Key Strategies

• Persistent Hooks – Use useEffect to establish and clean up the WebSocket connection.
• State Management – Update labels and datasets in real‑time as new points arrive.
• Performance Tuning – Disable heavy animations to ensure a smooth “scrolling” effect for the heart rhythm.

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;

Security Considerations

When moving from a simulation to a real‑world health tool, security is non‑negotiable:

• WSS (WebSocket Secure) – Use SSL/TLS to encrypt data in transit.
• Origin Validation – Accept connections only from trusted domains.
• Token‑Based Authentication – Verify each client with JWT or similar mechanisms.

These steps ensure that sensitive physiological data remains between the user and their provider.

Benefits of WebSocket‑Based Heart Rate Monitoring

• Efficiency – WebSockets reduce server load compared to traditional polling.
• Visuals – Clean, live‑updating charts improve user trust and engagement.
• Scalability – Proper backend architecture can handle thousands of concurrent “heartbeats.”

Further Reading

For a complete walkthrough of the code and more advanced implementation details, see WellAlly’s full guide.