IoT-Dashboard entwickeln: Architektur und Umsetzung

IoT-Dashboards sind die Visualisierungsschicht für Sensordaten, Maschinentelemetrie oder Gebäudeautomation. Die technischen Herausforderungen sind spezifisch: hohe Schreibfrequenz, Zeitreihendaten, Echtzeit-Updates und oft Tausende von Geräten gleichzeitig.

Dieser Leitfaden zeigt, wie Sie ein robustes IoT-Dashboard von der Architektur bis zur Frontend-Implementierung aufbauen.

Architekturübersicht

IoT-Geräte / Sensoren
    ↓ MQTT / HTTP
Message Broker (Mosquitto / HiveMQ)
    ↓
Ingest-Service (Node.js / Python)
    ↓
Zeitreihendatenbank (TimescaleDB / InfluxDB)
    ↓
Query-API (REST / GraphQL)
    ↓ WebSocket
Frontend (React + Charting-Library)

Jede Schicht hat spezifische Anforderungen. Gehen wir sie durch.

Schicht 1: Gerätekonnektivität

MQTT vs. HTTP

MQTT ist das Protokoll der Wahl für IoT-Geräte:

• Sehr geringer Overhead (Headers < 2 Bytes)
• Quality-of-Service-Levels (QoS 0, 1, 2)
• Persistent Sessions für offline-Geräte
• Pub/Sub-Modell perfekt für viele Geräte → eine zentrale Plattform

HTTP/REST ist sinnvoll wenn:

• Geräte ohnehin HTTP können (z.B. ESP32 mit WiFi)
• Gelegentliche Datenpunkte statt kontinuierlicher Streams
• Einfachere Implementierung auf der Geräteseite

Broker-Wahl

• Eclipse Mosquitto: Open Source, leichtgewichtig, für kleine bis mittlere Deployments
• HiveMQ: Enterprise-Grade, MQTT 5.0, Clustering, Compliance
• AWS IoT Core: Managed Service, gut wenn Sie bereits in AWS sind
• EMQX: Open Source mit Enterprise-Features, gute Skalierbarkeit

Schicht 2: Zeitreihendatenbank

IoT-Daten sind Zeitreihendaten: immer mit Timestamp, hohe Schreibrate, Abfragen meist auf Zeitbereiche. Standard-Datenbanken (PostgreSQL, MySQL) sind dafür nicht optimiert.

TimescaleDB

PostgreSQL-Extension für Zeitreihendaten. Unsere Empfehlung für die meisten Projekte:

• Volle PostgreSQL-Kompatibilität (alle SQL-Features, JOINs mit anderen Tabellen)
• Automatische Partitionierung (Hypertables)
• Kontinuierliche Aggregationen für schnelle Abfragen über große Zeiträume
• Bessere Kompression als Standard-PostgreSQL

-- Hypertable erstellen
CREATE TABLE sensor_readings (
  time        TIMESTAMPTZ NOT NULL,
  device_id   TEXT NOT NULL,
  metric      TEXT NOT NULL,
  value       DOUBLE PRECISION,
  CONSTRAINT unique_reading UNIQUE (time, device_id, metric)
);

SELECT create_hypertable('sensor_readings', 'time');

-- Kontinuierliche Aggregation: Stundenmittelwerte
CREATE MATERIALIZED VIEW sensor_hourly
WITH (timescaledb.continuous) AS
SELECT
  time_bucket('1 hour', time) AS hour,
  device_id,
  metric,
  AVG(value) AS avg_value,
  MIN(value) AS min_value,
  MAX(value) AS max_value
FROM sensor_readings
GROUP BY hour, device_id, metric;

InfluxDB

Speziell für Zeitreihendaten entwickelt. Schneller als TimescaleDB bei sehr hohen Schreibraten, aber weniger flexibel bei relationalen Abfragen.

Empfehlung: TimescaleDB wenn Sie PostgreSQL kennen und relationale Abfragen brauchen. InfluxDB wenn reine Zeitreihendaten und maximale Schreibperformance die Priorität ist.

Schicht 3: Backend-API

REST-API für historische Daten

// Express.js Endpoint für historische Daten
app.get('/api/devices/:deviceId/metrics/:metric', async (req, res) => {
  const { deviceId, metric } = req.params;
  const { from, to, bucket = '5 minutes' } = req.query;

  const result = await db.query(`
    SELECT
      time_bucket($1, time) AS bucket,
      AVG(value) AS avg,
      MIN(value) AS min,
      MAX(value) AS max
    FROM sensor_readings
    WHERE device_id = $2
      AND metric = $3
      AND time BETWEEN $4 AND $5
    GROUP BY bucket
    ORDER BY bucket ASC
  `, [bucket, deviceId, metric, from, to]);

  res.json(result.rows);
});

WebSocket für Echtzeit-Updates

// Socket.io für Echtzeit-Push
io.on('connection', (socket) => {
  // Client abonniert spezifische Geräte
  socket.on('subscribe', (deviceIds) => {
    deviceIds.forEach(id => socket.join(`device:${id}`));
  });
});

// MQTT-Nachricht → WebSocket Push
mqttClient.on('message', (topic, message) => {
  const data = JSON.parse(message);
  io.to(`device:${data.deviceId}`).emit('reading', data);
});

Schicht 4: React-Frontend

Komponentenstruktur

DashboardPage
├── DeviceGrid
│   └── DeviceCard (für jedes Gerät)
│       ├── StatusIndicator
│       └── MiniChart
└── DetailPanel
    ├── TimeRangeSelector
    ├── MetricSelector
    └── MainChart

Charting-Bibliothek wählen

Für IoT-Dashboards empfehlen wir:

• Recharts: Einfach, React-nativ, gut für Standard-Charts (Line, Bar, Area)
• ECharts (echarts-for-react): Performanter bei großen Datensätzen, mehr Chart-Typen
• Lightweight Charts (TradingView): Speziell für Zeitreihendaten optimiert, sehr performant

// Echtzeit-Chart mit Recharts
import { LineChart, Line, XAxis, YAxis, Tooltip } from 'recharts';
import { useEffect, useState } from 'react';
import { socket } from '../socket';

export function RealtimeChart({ deviceId, metric }) {
  const [data, setData] = useState([]);

  useEffect(() => {
    socket.emit('subscribe', [deviceId]);

    socket.on('reading', (reading) => {
      if (reading.deviceId === deviceId && reading.metric === metric) {
        setData(prev => [...prev.slice(-99), {
          time: new Date(reading.time).toLocaleTimeString(),
          value: reading.value
        }]);
      }
    });

    return () => socket.off('reading');
  }, [deviceId, metric]);

  return (
    <LineChart width={600} height={300} data={data}>
      <XAxis dataKey="time" />
      <YAxis />
      <Tooltip />
      <Line type="monotone" dataKey="value" dot={false} strokeWidth={2} />
    </LineChart>
  );
}

Produktions-Deployment

Docker Compose (Entwicklung/Small Scale)

version: '3.8'
services:
  timescaledb:
    image: timescale/timescaledb:latest-pg15
    environment:
      POSTGRES_PASSWORD: ${DB_PASSWORD}
    volumes:
      - timescale_data:/var/lib/postgresql/data

  mosquitto:
    image: eclipse-mosquitto:2
    ports:
      - "1883:1883"
    volumes:
      - ./mosquitto/config:/mosquitto/config

  backend:
    build: ./backend
    depends_on:
      - timescaledb
      - mosquitto

  frontend:
    build: ./frontend
    ports:
      - "3000:3000"

volumes:
  timescale_data:

Skalierung

Für mehr als ~1.000 gleichzeitige Geräte:

• Message Broker: HiveMQ Cluster oder EMQX Cluster
• Ingest-Service: Horizontale Skalierung mit Load Balancer
• Datenbank: TimescaleDB mit Read Replicas oder Citus für verteilte Hypertables
• WebSocket-Server: Socket.io mit Redis Adapter für Multi-Instance

IoT-Dashboards haben spezifische Architekturanforderungen, die sich von Standard-Web-Apps unterscheiden. Wenn Sie ein IoT-Dashboard für Ihre Plattform oder Ihr Unternehmen benötigen, sprechen Sie mit uns — wir haben Erfahrung mit Deployments von kleinen Piloten bis hin zu tausenden gleichzeitiger Geräte.