📘 IoT Dashboard: MQTT Integration

🎯 Introduction

Welcome to this exciting tutorial on building an IoT Dashboard with MQTT integration in TypeScript! 🎉 In this guide, we’ll explore how to create a real-time IoT monitoring system that can handle sensor data, device control, and live updates.

You’ll discover how MQTT (Message Queuing Telemetry Transport) can transform your IoT applications with its lightweight, publish-subscribe messaging protocol. Whether you’re monitoring smart home devices 🏠, industrial sensors 🏭, or agricultural systems 🌾, understanding MQTT integration is essential for building scalable IoT solutions.

By the end of this tutorial, you’ll have a fully functional IoT dashboard that can connect to MQTT brokers and visualize real-time data! Let’s dive in! 🏊‍♂️

📚 Understanding MQTT and IoT Dashboards

🤔 What is MQTT?

MQTT is like a super-efficient postal service for IoT devices 📮. Think of it as WhatsApp for machines - devices can send messages to topics, and any device subscribed to those topics receives the messages instantly!

In TypeScript terms, MQTT provides a lightweight messaging protocol perfect for IoT devices with limited resources. This means you can:

• ✨ Send and receive messages with minimal bandwidth
• 🚀 Handle thousands of connected devices
• 🛡️ Ensure reliable message delivery
• 📊 Build real-time dashboards

💡 Why Use MQTT for IoT Dashboards?

Here’s why developers love MQTT for IoT applications:

1. Lightweight Protocol 🪶: Minimal overhead, perfect for constrained devices
2. Real-time Updates ⚡: Instant message delivery for live data
3. Scalability 📈: Handle millions of messages efficiently
4. Quality of Service 🎯: Guaranteed message delivery options
5. Bi-directional Communication 🔄: Send commands and receive data

Real-world example: Imagine monitoring a smart greenhouse 🌱. Temperature sensors publish data to “greenhouse/temperature”, humidity sensors to “greenhouse/humidity”, and your dashboard subscribes to these topics for real-time monitoring!

🔧 Basic Syntax and Usage

📝 Setting Up MQTT Client

Let’s start with a friendly example:

// 👋 Hello, MQTT!
import mqtt from 'mqtt';

// 🎨 Define our connection options
interface MqttOptions {
  host: string;      // 🏠 Broker address
  port: number;      // 🚪 Connection port
  clientId: string;  // 🆔 Unique client identifier
  username?: string; // 👤 Optional authentication
  password?: string; // 🔒 Optional password
}

// 🚀 Create MQTT client
const createMqttClient = (options: MqttOptions): mqtt.MqttClient => {
  const url = `mqtt://${options.host}:${options.port}`;
  
  const client = mqtt.connect(url, {
    clientId: options.clientId,
    username: options.username,
    password: options.password,
    clean: true,    // 🧹 Start with clean session
    reconnectPeriod: 1000 // 🔄 Auto-reconnect every second
  });
  
  console.log(`🔌 Connecting to MQTT broker at ${url}...`);
  return client;
};

💡 Explanation: We’re creating a type-safe MQTT client with automatic reconnection. The emojis in comments make the code more readable and fun!

🎯 Common MQTT Patterns

Here are patterns you’ll use daily:

// 🏗️ Pattern 1: Device data structure
interface SensorData {
  deviceId: string;    // 🆔 Unique device identifier
  type: 'temperature' | 'humidity' | 'motion'; // 📊 Sensor type
  value: number;       // 📏 Measured value
  unit: string;        // 📐 Measurement unit
  timestamp: Date;     // 🕐 When measured
  location: string;    // 📍 Device location
}

// 🎨 Pattern 2: Topic structure
type TopicPattern = `devices/${string}/${string}`;
type CommandTopic = `devices/${string}/commands`;
type DataTopic = `devices/${string}/data`;

// 🔄 Pattern 3: Message handler with types
const handleMessage = (topic: string, payload: Buffer): void => {
  try {
    const data: SensorData = JSON.parse(payload.toString());
    console.log(`📨 Received from ${topic}:`, data);
  } catch (error) {
    console.error(`❌ Failed to parse message:`, error);
  }
};

💡 Practical Examples

🏠 Example 1: Smart Home Dashboard

Let’s build something real:

// 🏠 Smart Home IoT Dashboard
interface SmartDevice {
  id: string;
  name: string;
  type: 'light' | 'thermostat' | 'sensor' | 'camera';
  status: 'online' | 'offline';
  emoji: string;
  data?: any;
}

class SmartHomeDashboard {
  private client: mqtt.MqttClient;
  private devices: Map<string, SmartDevice> = new Map();
  
  constructor(private brokerUrl: string) {
    // 🔌 Connect to MQTT broker
    this.client = mqtt.connect(brokerUrl, {
      clientId: `dashboard_${Date.now()}`
    });
    
    this.setupEventHandlers();
  }
  
  // 🎯 Set up MQTT event handlers
  private setupEventHandlers(): void {
    this.client.on('connect', () => {
      console.log('✅ Connected to MQTT broker!');
      this.subscribeToTopics();
    });
    
    this.client.on('message', (topic, payload) => {
      this.handleDeviceMessage(topic, payload);
    });
    
    this.client.on('error', (error) => {
      console.error('❌ MQTT Error:', error);
    });
  }
  
  // 📡 Subscribe to device topics
  private subscribeToTopics(): void {
    const topics = [
      'home/+/status',    // 🏠 Device status updates
      'home/+/data',      // 📊 Sensor data
      'home/+/alerts'     // 🚨 Alert messages
    ];
    
    this.client.subscribe(topics, (err) => {
      if (!err) {
        console.log('📡 Subscribed to topics:', topics);
      }
    });
  }
  
  // 📨 Handle incoming messages
  private handleDeviceMessage(topic: string, payload: Buffer): void {
    const [, deviceId, messageType] = topic.split('/');
    const data = JSON.parse(payload.toString());
    
    switch (messageType) {
      case 'status':
        this.updateDeviceStatus(deviceId, data);
        break;
      case 'data':
        this.updateDeviceData(deviceId, data);
        break;
      case 'alerts':
        this.handleAlert(deviceId, data);
        break;
    }
  }
  
  // 💡 Control smart light
  controlLight(deviceId: string, state: boolean, brightness?: number): void {
    const command = {
      action: 'set',
      state: state ? 'on' : 'off',
      brightness: brightness || 100,
      timestamp: new Date()
    };
    
    this.client.publish(
      `home/${deviceId}/commands`,
      JSON.stringify(command),
      { qos: 1 } // 📬 Ensure delivery
    );
    
    console.log(`💡 Light ${deviceId}: ${command.state} at ${command.brightness}%`);
  }
  
  // 🌡️ Set thermostat
  setThermostat(deviceId: string, temperature: number): void {
    const command = {
      action: 'set_temperature',
      value: temperature,
      unit: 'celsius',
      timestamp: new Date()
    };
    
    this.client.publish(
      `home/${deviceId}/commands`,
      JSON.stringify(command),
      { qos: 2 } // 🎯 Exactly once delivery
    );
    
    console.log(`🌡️ Thermostat ${deviceId} set to ${temperature}°C`);
  }
  
  // 📊 Get dashboard stats
  getDashboardStats(): void {
    const online = Array.from(this.devices.values())
      .filter(d => d.status === 'online').length;
    
    console.log('📊 Dashboard Stats:');
    console.log(`  🏠 Total devices: ${this.devices.size}`);
    console.log(`  ✅ Online: ${online}`);
    console.log(`  ❌ Offline: ${this.devices.size - online}`);
  }
  
  // 🔄 Update device status
  private updateDeviceStatus(deviceId: string, status: any): void {
    const device = this.devices.get(deviceId);
    if (device) {
      device.status = status.online ? 'online' : 'offline';
      console.log(`${device.emoji} ${device.name} is ${device.status}`);
    }
  }
  
  // 📊 Update device data
  private updateDeviceData(deviceId: string, data: any): void {
    const device = this.devices.get(deviceId);
    if (device) {
      device.data = data;
      this.visualizeData(device);
    }
  }
  
  // 🎨 Visualize device data
  private visualizeData(device: SmartDevice): void {
    switch (device.type) {
      case 'sensor':
        console.log(`📊 ${device.name}: ${device.data.value}${device.data.unit}`);
        break;
      case 'thermostat':
        console.log(`🌡️ ${device.name}: ${device.data.current}°C → ${device.data.target}°C`);
        break;
      case 'light':
        console.log(`💡 ${device.name}: ${device.data.state} (${device.data.brightness}%)`);
        break;
    }
  }
  
  // 🚨 Handle alerts
  private handleAlert(deviceId: string, alert: any): void {
    const device = this.devices.get(deviceId);
    if (device) {
      console.log(`🚨 ALERT from ${device.name}: ${alert.message}`);
      // Here you could trigger notifications, emails, etc.
    }
  }
}

// 🎮 Let's use it!
const dashboard = new SmartHomeDashboard('mqtt://localhost:1883');

// Add some devices
dashboard['devices'].set('light_001', {
  id: 'light_001',
  name: 'Living Room Light',
  type: 'light',
  status: 'online',
  emoji: '💡'
});

dashboard['devices'].set('thermo_001', {
  id: 'thermo_001',
  name: 'Main Thermostat',
  type: 'thermostat',
  status: 'online',
  emoji: '🌡️'
});

🎯 Try it yourself: Add motion sensors and create automation rules!

🏭 Example 2: Industrial IoT Monitoring

Let’s make it industrial:

// 🏭 Industrial IoT Monitoring System
interface IndustrialSensor {
  id: string;
  type: 'temperature' | 'pressure' | 'vibration' | 'flow';
  location: string;
  thresholds: {
    min: number;
    max: number;
    critical: number;
  };
}

interface SensorReading {
  sensorId: string;
  value: number;
  timestamp: Date;
  status: 'normal' | 'warning' | 'critical';
}

class IndustrialIoTDashboard {
  private client: mqtt.MqttClient;
  private sensors: Map<string, IndustrialSensor> = new Map();
  private readings: Map<string, SensorReading[]> = new Map();
  private alertCallbacks: ((alert: any) => void)[] = [];
  
  constructor(brokerConfig: MqttOptions) {
    this.client = createMqttClient(brokerConfig);
    this.initialize();
  }
  
  // 🚀 Initialize dashboard
  private initialize(): void {
    this.client.on('connect', () => {
      console.log('🏭 Industrial IoT Dashboard Connected!');
      this.subscribeToFactoryTopics();
    });
    
    this.client.on('message', (topic, payload) => {
      this.processSensorData(topic, payload);
    });
  }
  
  // 📡 Subscribe to factory sensors
  private subscribeToFactoryTopics(): void {
    const topics = [
      'factory/+/sensors/+/data',     // 📊 Sensor readings
      'factory/+/alerts',             // 🚨 System alerts
      'factory/+/maintenance',        // 🔧 Maintenance updates
      'factory/+/production'          // 📈 Production metrics
    ];
    
    this.client.subscribe(topics, { qos: 1 });
  }
  
  // 📊 Process sensor data
  private processSensorData(topic: string, payload: Buffer): void {
    const topicParts = topic.split('/');
    const data = JSON.parse(payload.toString());
    
    if (topic.includes('/sensors/') && topic.endsWith('/data')) {
      this.handleSensorReading(topicParts[3], data);
    } else if (topic.includes('/alerts')) {
      this.handleSystemAlert(data);
    }
  }
  
  // 📏 Handle sensor reading
  private handleSensorReading(sensorId: string, data: any): void {
    const sensor = this.sensors.get(sensorId);
    if (!sensor) return;
    
    const reading: SensorReading = {
      sensorId,
      value: data.value,
      timestamp: new Date(data.timestamp),
      status: this.evaluateReading(data.value, sensor.thresholds)
    };
    
    // 📊 Store reading
    if (!this.readings.has(sensorId)) {
      this.readings.set(sensorId, []);
    }
    this.readings.get(sensorId)!.push(reading);
    
    // 🚨 Check for alerts
    if (reading.status !== 'normal') {
      this.triggerAlert(sensor, reading);
    }
    
    // 📈 Log reading
    const emoji = this.getSensorEmoji(sensor.type);
    console.log(`${emoji} ${sensor.location}: ${reading.value} - ${reading.status}`);
  }
  
  // 🎯 Evaluate reading status
  private evaluateReading(value: number, thresholds: any): SensorReading['status'] {
    if (value >= thresholds.critical || value <= thresholds.min) {
      return 'critical';
    } else if (value >= thresholds.max * 0.9) {
      return 'warning';
    }
    return 'normal';
  }
  
  // 🚨 Trigger alert
  private triggerAlert(sensor: IndustrialSensor, reading: SensorReading): void {
    const alert = {
      type: reading.status,
      sensor: sensor,
      reading: reading,
      message: `${sensor.type} in ${sensor.location} is ${reading.status}!`,
      timestamp: new Date()
    };
    
    // 📢 Publish alert
    this.client.publish(
      'factory/dashboard/alerts',
      JSON.stringify(alert),
      { qos: 2, retain: true }
    );
    
    // 🔔 Notify callbacks
    this.alertCallbacks.forEach(callback => callback(alert));
    
    console.log(`🚨 ALERT: ${alert.message}`);
  }
  
  // 📊 Get sensor statistics
  getSensorStats(sensorId: string): any {
    const readings = this.readings.get(sensorId) || [];
    if (readings.length === 0) return null;
    
    const values = readings.map(r => r.value);
    const avg = values.reduce((a, b) => a + b, 0) / values.length;
    const max = Math.max(...values);
    const min = Math.min(...values);
    
    return {
      average: avg.toFixed(2),
      max: max,
      min: min,
      readings: readings.length,
      lastReading: readings[readings.length - 1]
    };
  }
  
  // 🎨 Get sensor emoji
  private getSensorEmoji(type: string): string {
    const emojis: Record<string, string> = {
      temperature: '🌡️',
      pressure: '🎯',
      vibration: '📳',
      flow: '🌊'
    };
    return emojis[type] || '📊';
  }
  
  // 🔧 Send maintenance command
  scheduleMaintenance(equipmentId: string, date: Date): void {
    const command = {
      action: 'schedule_maintenance',
      equipmentId,
      scheduledDate: date,
      type: 'preventive'
    };
    
    this.client.publish(
      `factory/maintenance/schedule`,
      JSON.stringify(command),
      { qos: 2 }
    );
    
    console.log(`🔧 Maintenance scheduled for ${equipmentId} on ${date.toLocaleDateString()}`);
  }
  
  // 📈 Get production metrics
  getProductionMetrics(): void {
    this.client.publish('factory/production/request', JSON.stringify({
      type: 'daily_summary',
      date: new Date()
    }));
  }
}

🚀 Advanced Concepts

🧙‍♂️ Advanced Topic 1: Real-time Data Visualization

When you’re ready to level up, try this advanced pattern:

// 🎯 Real-time data stream processor
type DataPoint = {
  value: number;
  timestamp: number;
  deviceId: string;
};

class RealTimeDataProcessor<T extends DataPoint> {
  private dataBuffer: Map<string, T[]> = new Map();
  private windowSize: number = 100; // 📊 Keep last 100 points
  private updateCallbacks: Map<string, (data: T[]) => void> = new Map();
  
  // ✨ Process incoming data point
  processDataPoint(point: T): void {
    const buffer = this.dataBuffer.get(point.deviceId) || [];
    buffer.push(point);
    
    // 🔄 Maintain window size
    if (buffer.length > this.windowSize) {
      buffer.shift();
    }
    
    this.dataBuffer.set(point.deviceId, buffer);
    
    // 📢 Notify subscribers
    const callback = this.updateCallbacks.get(point.deviceId);
    if (callback) {
      callback(buffer);
    }
  }
  
  // 📊 Calculate moving average
  getMovingAverage(deviceId: string, window: number = 10): number | null {
    const buffer = this.dataBuffer.get(deviceId);
    if (!buffer || buffer.length < window) return null;
    
    const recent = buffer.slice(-window);
    const sum = recent.reduce((acc, point) => acc + point.value, 0);
    return sum / window;
  }
  
  // 🚀 Detect anomalies
  detectAnomalies(deviceId: string, threshold: number = 2): T[] {
    const buffer = this.dataBuffer.get(deviceId);
    if (!buffer || buffer.length < 10) return [];
    
    const avg = this.getMovingAverage(deviceId, 20) || 0;
    const stdDev = this.calculateStdDev(buffer.map(p => p.value));
    
    return buffer.filter(point => 
      Math.abs(point.value - avg) > threshold * stdDev
    );
  }
  
  // 📐 Calculate standard deviation
  private calculateStdDev(values: number[]): number {
    const avg = values.reduce((a, b) => a + b, 0) / values.length;
    const squaredDiffs = values.map(v => Math.pow(v - avg, 2));
    const variance = squaredDiffs.reduce((a, b) => a + b, 0) / values.length;
    return Math.sqrt(variance);
  }
}

🏗️ Advanced Topic 2: MQTT Security & Authentication

For the brave developers:

// 🔒 Secure MQTT connection with certificates
interface SecureMqttConfig extends MqttOptions {
  ca?: Buffer;          // 🏛️ Certificate Authority
  cert?: Buffer;        // 📜 Client certificate
  key?: Buffer;         // 🔑 Private key
  rejectUnauthorized?: boolean; // 🛡️ Verify server cert
}

class SecureIoTDashboard {
  private client: mqtt.MqttClient;
  private encryptionKey: string;
  
  constructor(config: SecureMqttConfig) {
    // 🔐 Create secure connection
    const secureOptions = {
      ...config,
      protocol: 'mqtts', // 🔒 Use TLS
      ca: config.ca,
      cert: config.cert,
      key: config.key,
      rejectUnauthorized: config.rejectUnauthorized ?? true
    };
    
    this.client = mqtt.connect(`mqtts://${config.host}:${config.port}`, secureOptions);
    this.encryptionKey = this.generateEncryptionKey();
  }
  
  // 🔐 Encrypt sensitive data
  private encryptPayload(data: any): string {
    // In production, use proper encryption library
    const encrypted = Buffer.from(JSON.stringify(data)).toString('base64');
    return encrypted;
  }
  
  // 🔓 Decrypt received data
  private decryptPayload(encrypted: string): any {
    const decrypted = Buffer.from(encrypted, 'base64').toString();
    return JSON.parse(decrypted);
  }
  
  // 🔑 Generate encryption key
  private generateEncryptionKey(): string {
    return Math.random().toString(36).substring(7);
  }
  
  // 🛡️ Publish with encryption
  publishSecure(topic: string, data: any): void {
    const encrypted = this.encryptPayload(data);
    this.client.publish(topic, encrypted, {
      qos: 2,
      retain: false
    });
  }
}

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Memory Leaks with Subscriptions

// ❌ Wrong way - memory leak!
class LeakyDashboard {
  subscribeToDevice(deviceId: string): void {
    this.client.on('message', (topic, payload) => {
      if (topic.includes(deviceId)) {
        // This handler never gets removed! 💥
        console.log(payload.toString());
      }
    });
  }
}

// ✅ Correct way - proper cleanup!
class CleanDashboard {
  private messageHandlers: Map<string, (topic: string, payload: Buffer) => void> = new Map();
  
  subscribeToDevice(deviceId: string): void {
    const handler = (topic: string, payload: Buffer) => {
      if (topic.includes(deviceId)) {
        console.log(`📨 ${deviceId}:`, payload.toString());
      }
    };
    
    this.messageHandlers.set(deviceId, handler);
    this.client.on('message', handler);
  }
  
  unsubscribeFromDevice(deviceId: string): void {
    const handler = this.messageHandlers.get(deviceId);
    if (handler) {
      this.client.removeListener('message', handler);
      this.messageHandlers.delete(deviceId);
      console.log(`🔌 Unsubscribed from ${deviceId}`);
    }
  }
}

🤯 Pitfall 2: Handling Connection Loss

// ❌ Dangerous - no reconnection handling!
const client = mqtt.connect('mqtt://broker.example.com');
client.subscribe('sensors/+/data'); // What if connection drops? 💥

// ✅ Safe - proper reconnection!
class ResilientDashboard {
  private subscriptions: string[] = [];
  private isConnected: boolean = false;
  
  constructor() {
    this.setupClient();
  }
  
  private setupClient(): void {
    this.client = mqtt.connect('mqtt://broker.example.com', {
      reconnectPeriod: 1000,
      connectTimeout: 30 * 1000,
      clean: false, // 🔄 Persist session
      clientId: `dashboard_${Date.now()}`
    });
    
    this.client.on('connect', () => {
      console.log('✅ Connected to MQTT broker');
      this.isConnected = true;
      this.resubscribe(); // 🔄 Restore subscriptions
    });
    
    this.client.on('offline', () => {
      console.log('⚠️ MQTT client offline');
      this.isConnected = false;
    });
    
    this.client.on('error', (error) => {
      console.error('❌ MQTT error:', error);
    });
  }
  
  subscribe(topic: string): void {
    if (!this.subscriptions.includes(topic)) {
      this.subscriptions.push(topic);
    }
    
    if (this.isConnected) {
      this.client.subscribe(topic, { qos: 1 });
    }
  }
  
  private resubscribe(): void {
    if (this.subscriptions.length > 0) {
      this.client.subscribe(this.subscriptions, { qos: 1 });
      console.log('🔄 Resubscribed to topics:', this.subscriptions);
    }
  }
}

🛠️ Best Practices

1. 🎯 Use Specific Topics: Don’t subscribe to ’#’ - be precise with your topic patterns!
2. 📝 Type Your Messages: Always define interfaces for your MQTT payloads
3. 🛡️ Handle Errors Gracefully: Network issues will happen - be prepared
4. 🎨 Use QoS Wisely: QoS 0 for non-critical, QoS 1 for important, QoS 2 for critical
5. ✨ Clean Up Resources: Remove event listeners and unsubscribe when done
6. 🔒 Secure Your Connections: Always use TLS in production
7. 📊 Monitor Performance: Track message rates and connection health

🧪 Hands-On Exercise

🎯 Challenge: Build a Smart City IoT Dashboard

Create a comprehensive smart city monitoring system:

📋 Requirements:

• ✅ Monitor traffic sensors, air quality, and parking spots
• 🏷️ Support multiple zones (downtown, suburbs, industrial)
• 👤 Real-time alerts for threshold violations
• 📅 Historical data tracking and trends
• 🎨 Each sensor type needs its own visualization!

🚀 Bonus Points:

• Add predictive analytics for traffic flow
• Implement emergency response system integration
• Create a mobile-friendly dashboard view
• Add weather data correlation

💡 Solution

// 🏙️ Smart City IoT Dashboard Solution!
interface CityZone {
  id: string;
  name: string;
  type: 'downtown' | 'residential' | 'industrial' | 'commercial';
  emoji: string;
}

interface CitySensor {
  id: string;
  type: 'traffic' | 'air_quality' | 'parking' | 'noise';
  zoneId: string;
  location: { lat: number; lng: number };
  status: 'active' | 'maintenance' | 'offline';
}

interface SensorMetrics {
  traffic: { flow: number; congestion: number; incidents: number };
  air_quality: { pm25: number; pm10: number; co2: number; aqi: number };
  parking: { occupied: number; total: number; turnover: number };
  noise: { level: number; peak: number; average: number };
}

class SmartCityDashboard {
  private client: mqtt.MqttClient;
  private zones: Map<string, CityZone> = new Map();
  private sensors: Map<string, CitySensor> = new Map();
  private metrics: Map<string, SensorMetrics[keyof SensorMetrics]> = new Map();
  private alerts: any[] = [];
  
  constructor(brokerUrl: string) {
    this.client = mqtt.connect(brokerUrl, {
      clientId: `smart_city_dashboard_${Date.now()}`,
      clean: false
    });
    
    this.initializeZones();
    this.setupEventHandlers();
  }
  
  // 🏙️ Initialize city zones
  private initializeZones(): void {
    const zones: CityZone[] = [
      { id: 'downtown', name: 'Downtown', type: 'downtown', emoji: '🏙️' },
      { id: 'suburbs', name: 'Suburbs', type: 'residential', emoji: '🏘️' },
      { id: 'industrial', name: 'Industrial Park', type: 'industrial', emoji: '🏭' },
      { id: 'shopping', name: 'Shopping District', type: 'commercial', emoji: '🛍️' }
    ];
    
    zones.forEach(zone => this.zones.set(zone.id, zone));
  }
  
  // 🎯 Set up MQTT handlers
  private setupEventHandlers(): void {
    this.client.on('connect', () => {
      console.log('🏙️ Smart City Dashboard Connected!');
      this.subscribeToCity();
    });
    
    this.client.on('message', (topic, payload) => {
      this.processCity Data(topic, payload);
    });
  }
  
  // 📡 Subscribe to city sensors
  private subscribeToCity(): void {
    const topics = [
      'city/+/sensors/+/data',      // 📊 Sensor data
      'city/+/alerts',              // 🚨 Zone alerts
      'city/emergency/+',           // 🚑 Emergency services
      'city/weather/current',       // ☁️ Weather data
      'city/events/+'               // 🎉 City events
    ];
    
    this.client.subscribe(topics, { qos: 1 }, (err) => {
      if (!err) {
        console.log('📡 Monitoring city sensors...');
      }
    });
  }
  
  // 📊 Process city data
  private processCityData(topic: string, payload: Buffer): void {
    const data = JSON.parse(payload.toString());
    
    if (topic.includes('/sensors/') && topic.includes('/data')) {
      this.handleSensorData(topic, data);
    } else if (topic.includes('/alerts')) {
      this.handleZoneAlert(topic, data);
    } else if (topic.includes('/emergency/')) {
      this.handleEmergency(topic, data);
    }
  }
  
  // 📈 Handle sensor data
  private handleSensorData(topic: string, data: any): void {
    const [, zoneId, , sensorId] = topic.split('/');
    const sensor = this.sensors.get(sensorId);
    
    if (!sensor) return;
    
    // 📊 Update metrics
    this.metrics.set(sensorId, data.metrics);
    
    // 🎯 Check thresholds
    this.checkThresholds(sensor, data.metrics);
    
    // 📊 Log status
    this.logSensorStatus(sensor, data.metrics);
  }
  
  // 🚨 Check sensor thresholds
  private checkThresholds(sensor: CitySensor, metrics: any): void {
    let alert = null;
    
    switch (sensor.type) {
      case 'air_quality':
        if (metrics.aqi > 150) {
          alert = {
            level: 'critical',
            message: `🚨 Poor air quality in ${sensor.zoneId}: AQI ${metrics.aqi}`,
            sensor: sensor,
            value: metrics.aqi
          };
        }
        break;
        
      case 'traffic':
        if (metrics.congestion > 0.8) {
          alert = {
            level: 'warning',
            message: `🚗 Heavy traffic in ${sensor.zoneId}: ${Math.round(metrics.congestion * 100)}% congestion`,
            sensor: sensor,
            value: metrics.congestion
          };
        }
        break;
        
      case 'parking':
        const occupancy = metrics.occupied / metrics.total;
        if (occupancy > 0.95) {
          alert = {
            level: 'info',
            message: `🅿️ Parking nearly full in ${sensor.zoneId}: ${metrics.occupied}/${metrics.total} spots`,
            sensor: sensor,
            value: occupancy
          };
        }
        break;
    }
    
    if (alert) {
      this.publishAlert(alert);
    }
  }
  
  // 📢 Publish alert
  private publishAlert(alert: any): void {
    this.alerts.push(alert);
    
    this.client.publish(
      `city/dashboard/alerts`,
      JSON.stringify(alert),
      { qos: 1, retain: true }
    );
    
    console.log(`${this.getAlertEmoji(alert.level)} ${alert.message}`);
  }
  
  // 🎨 Get alert emoji
  private getAlertEmoji(level: string): string {
    const emojis: Record<string, string> = {
      critical: '🚨',
      warning: '⚠️',
      info: 'ℹ️'
    };
    return emojis[level] || '📢';
  }
  
  // 📊 Get zone statistics
  getZoneStats(zoneId: string): any {
    const zone = this.zones.get(zoneId);
    if (!zone) return null;
    
    const zoneSensors = Array.from(this.sensors.values())
      .filter(s => s.zoneId === zoneId);
    
    const stats = {
      zone: zone,
      sensorCount: zoneSensors.length,
      activeSensors: zoneSensors.filter(s => s.status === 'active').length,
      metrics: {} as any,
      health: 100
    };
    
    // Calculate average metrics
    zoneSensors.forEach(sensor => {
      const metrics = this.metrics.get(sensor.id);
      if (metrics) {
        // Aggregate metrics by type
        if (!stats.metrics[sensor.type]) {
          stats.metrics[sensor.type] = [];
        }
        stats.metrics[sensor.type].push(metrics);
      }
    });
    
    return stats;
  }
  
  // 🗺️ Get city overview
  getCityOverview(): void {
    console.log('🏙️ Smart City Overview:');
    console.log('========================');
    
    this.zones.forEach(zone => {
      const stats = this.getZoneStats(zone.id);
      if (stats) {
        console.log(`\n${zone.emoji} ${zone.name}:`);
        console.log(`  📊 Sensors: ${stats.activeSensors}/${stats.sensorCount} active`);
        console.log(`  💚 Health: ${stats.health}%`);
        
        // Show key metrics
        if (stats.metrics.air_quality) {
          const avgAqi = stats.metrics.air_quality.reduce((sum: number, m: any) => sum + m.aqi, 0) / stats.metrics.air_quality.length;
          console.log(`  🌬️ Air Quality: ${Math.round(avgAqi)} AQI`);
        }
        
        if (stats.metrics.traffic) {
          const avgCongestion = stats.metrics.traffic.reduce((sum: number, m: any) => sum + m.congestion, 0) / stats.metrics.traffic.length;
          console.log(`  🚗 Traffic: ${Math.round(avgCongestion * 100)}% congestion`);
        }
      }
    });
    
    console.log(`\n📢 Active Alerts: ${this.alerts.length}`);
  }
  
  // 📊 Log sensor status
  private logSensorStatus(sensor: CitySensor, metrics: any): void {
    const zone = this.zones.get(sensor.zoneId);
    const emoji = this.getSensorEmoji(sensor.type);
    
    let status = '';
    switch (sensor.type) {
      case 'traffic':
        status = `Flow: ${metrics.flow} vehicles/hr, Congestion: ${Math.round(metrics.congestion * 100)}%`;
        break;
      case 'air_quality':
        status = `AQI: ${metrics.aqi}, PM2.5: ${metrics.pm25}µg/m³`;
        break;
      case 'parking':
        status = `${metrics.occupied}/${metrics.total} occupied (${Math.round((metrics.occupied/metrics.total) * 100)}%)`;
        break;
      case 'noise':
        status = `${metrics.level}dB (avg: ${metrics.average}dB)`;
        break;
    }
    
    console.log(`${emoji} ${zone?.emoji} ${sensor.type}: ${status}`);
  }
  
  // 🎨 Get sensor emoji
  private getSensorEmoji(type: string): string {
    const emojis: Record<string, string> = {
      traffic: '🚦',
      air_quality: '🌬️',
      parking: '🅿️',
      noise: '🔊'
    };
    return emojis[type] || '📊';
  }
  
  // 🚑 Handle emergency
  private handleEmergency(topic: string, data: any): void {
    console.log(`🚨 EMERGENCY: ${data.type} at ${data.location}`);
    
    // Coordinate with traffic sensors
    this.optimizeEmergencyRoute(data);
  }
  
  // 🚑 Optimize emergency route
  private optimizeEmergencyRoute(emergency: any): void {
    // In a real system, this would coordinate traffic lights
    console.log(`🚦 Optimizing route for ${emergency.type}...`);
    
    this.client.publish(
      'city/traffic/emergency_route',
      JSON.stringify({
        emergencyId: emergency.id,
        route: emergency.route,
        priority: 'high'
      }),
      { qos: 2 }
    );
  }
}

// 🎮 Test the smart city dashboard!
const smartCity = new SmartCityDashboard('mqtt://localhost:1883');

// Simulate some sensors
const testSensors: CitySensor[] = [
  { id: 'traffic_001', type: 'traffic', zoneId: 'downtown', location: { lat: 40.7128, lng: -74.0060 }, status: 'active' },
  { id: 'air_001', type: 'air_quality', zoneId: 'industrial', location: { lat: 40.7260, lng: -74.0897 }, status: 'active' },
  { id: 'parking_001', type: 'parking', zoneId: 'shopping', location: { lat: 40.7580, lng: -73.9855 }, status: 'active' }
];

testSensors.forEach(sensor => smartCity['sensors'].set(sensor.id, sensor));

// Get city overview after some data
setTimeout(() => smartCity.getCityOverview(), 5000);

🎓 Key Takeaways

You’ve learned so much! Here’s what you can now do:

• ✅ Build IoT dashboards with MQTT and TypeScript 💪
• ✅ Handle real-time sensor data from multiple devices 🛡️
• ✅ Implement secure MQTT connections for production use 🎯
• ✅ Process and visualize IoT data streams 🐛
• ✅ Create scalable architectures for IoT applications! 🚀

Remember: MQTT is the backbone of modern IoT systems. Master it, and you’ll be ready to build amazing connected applications! 🤝

🤝 Next Steps

Congratulations! 🎉 You’ve mastered IoT Dashboard development with MQTT integration!

Here’s what to do next:

1. 💻 Build your own IoT monitoring system
2. 🏗️ Explore MQTT brokers like Mosquitto or HiveMQ
3. 📚 Learn about MQTT 5.0 features
4. 🌟 Try integrating with cloud IoT platforms (AWS IoT, Azure IoT Hub)

Remember: Every smart city, connected factory, and IoT innovation started with developers like you learning MQTT. Keep building, keep connecting, and most importantly, have fun creating the future of IoT! 🚀

Happy IoT coding! 🎉🚀✨