Real-Time Data Sync with Mosquitto MQTT in Angular

Real-time data synchronization is crucial for building responsive and dynamic applications. In this guide, we focus on achieving real-time data sync with Mosquitto MQTT in Angular. This combination allows you to create a seamless, interactive data dashboard that efficiently handles real-time updates. Whether you are working on an IoT project or developing a real-time web application, this guide will equip you with the necessary tools and knowledge.

Previously, we discussed setting up real-time data synchronization using Mosquitto MQTT with Node.js. In this post, we will extend that functionality by integrating Angular as the frontend client.

Understanding MQTT and Mosquitto

MQTT operates on a publish-subscribe model. Clients (publishers) send messages (payloads) to specific topics. Other clients (subscribers) can subscribe to these topics to receive updates. Mosquitto is a popular, open-source MQTT broker that efficiently handles message routing.

Prerequisites:

Before we begin, make sure you have the following installed:

• Node.js and npm
• Angular CLI
• Mosquitto MQTT broker (or another MQTT broker of your choice)

Setting Up the Angular Project

First, we’ll create a new Angular project and install the necessary MQTT library.

# Install Angular CLI
npm install -g @angular/cli

# Create a new Angular project
ng new mqtt-sync

# Navigate into the project directory
cd mqtt-sync

# Install ngx-mqtt
npm install ngx-mqtt

Creating the MQTT Service

We’ll create an Angular service to handle the MQTT connections, subscriptions, and publications.

import { Injectable } from '@angular/core';
import { MqttService, IMqttMessage } from 'ngx-mqtt';

@Injectable({
  providedIn: 'root'
})
export class MyMqttService {
  private mqttClient: any;

  constructor(private mqttService: MqttService) {}

  connect(host: string, port: number) {
    const options: any = {
      hostname: host,
      port: port
    };
    this.mqttClient = this.mqttService.connect(options);
  }

  subscribe(topic: string) {
    this.mqttClient.subscribe(topic).subscribe((message: IMqttMessage) => {
      console.log('Received message:', message.payload.toString());
      // Handle the received message here
    });
  }

  publish(topic: string, message: string) {
    this.mqttClient.publish(topic, message);
  }
}

Creating the Angular Component

Next, we’ll create a component to display and interact with the data.

import { Component, OnInit } from '@angular/core';
import { MyMqttService } from './mqtt.service';

@Component({
  selector: 'app-data-sync',
  templateUrl: './data-sync.component.html',
  styleUrls: ['./data-sync.component.css']
})
export class DataSyncComponent implements OnInit {
  message: string;
  receivedMessage: string;

  constructor(private mqttService: MyMqttService) {}

  ngOnInit() {
    this.mqttService.connect('your-mqtt-broker-host', 1883);
    this.mqttService.subscribe('your-topic');
  }

  publish() {
    this.mqttService.publish('your-topic', this.message);
  }
}

Integrating with Node.js Backend

If you followed our previous guide, you should already have a Node.js backend set up with Mosquitto MQTT. Here’s a quick recap of how to set it up:

1. Install the necessary packages:

npm install mqtt

2. Create a basic MQTT client in Node.js:

const mqtt = require('mqtt');
const client  = mqtt.connect('mqtt://your-mqtt-broker-host:1883');

client.on('connect', function () {
  client.subscribe('your-topic', function (err) {
    if (!err) {
      client.publish('your-topic', 'Hello MQTT');
    }
  });
});

client.on('message', function (topic, message) {
  // message is Buffer
  console.log(message.toString());
});

Real-World Use Case

To make this more practical, let’s consider an example where you have IoT sensors publishing data to an MQTT broker, and you want to display this data in real-time on an Angular dashboard. For a detailed implementation, you can refer to our blog post on IoT Temperature Monitoring with Node.js: Real-Life Implementation.

• Sensor (Publisher):
  • Use an IoT sensor to publish temperature data to the MQTT broker.
• MQTT Broker:
  • Mosquitto MQTT broker to manage the message queue.
• Angular Dashboard (Subscriber):
  • The Angular app subscribes to the topic and displays the temperature data in real-time.

By integrating Angular, we enhance the ability to visualize and interact with the data, making it a powerful tool for monitoring IoT devices in real-time.

Error Handling and Debugging

While working with MQTT and real-time data, you might encounter some common errors. Here are a few tips:

• Connection Errors:
  • Ensure the broker URL and port are correct.
  • Verify network connectivity.
• Subscription Issues:
  • Check if the topic names are correct.
  • Ensure the client has the necessary permissions to subscribe.
• Message Handling:
  • Validate the format of the messages being published and received.

In this guide, we extended our previous work by focusing on Real-Time Data Sync with Mosquitto MQTT in Angular to create a dynamic, real-time data dashboard. This setup is highly versatile and can be used in various applications, from IoT to live data monitoring. If you haven’t already, check out our earlier post on setting up real-time data synchronization with Mosquitto MQTT and Node.js to get a foundational understanding of the backend setup.