So verwenden Sie MQTT im Angular-Projekt

Eckig ist eine Entwicklungsplattform, die auf TypeScript aufbaut. Es besteht aus einem komponentenbasierten Framework zum Erstellen skalierbarer Webanwendungen; eine Reihe perfekt integrierter Bibliotheken, die Routing, Formularverwaltung, Client-Server-Kommunikation und andere Funktionen abdecken; und eine Reihe von Entwicklungstools, mit denen Benutzer Codes entwickeln, erstellen, testen und aktualisieren können.

MQTT ist ein leichtgewichtiges IoT-Nachrichtenübertragungsprotokoll basierend auf dem Publish/Subscribe-Modus, der eine One-to-Many-Nachrichtenverteilung und Anwendungsentkopplung mit geringem Übertragungsverbrauch bietet, wodurch der Netzwerkverkehr minimiert werden kann. Gleichzeitig kann es dank seiner drei QoS-Stufen (Quality of Service) für Nachrichten verschiedene Zustellanforderungen erfüllen.

Dieser Artikel stellt vor, wie man das MQTT-Protokoll in Angular-Projekten verwendet, um sich zu verbinden, Nachrichten zu abonnieren, zu senden/empfangen, sich abzumelden und andere Funktionen zwischen Clients und MQTT Broker auszuführen.

Projektinitialisierung

Erstellen Sie ein neues Projekt

Die Referenz lautet wie folgt: Erstellen Sie ein Angular-Projekt mit der Angular-CLI

Beispiel:

ng new my-app

Installation der MQTT-Client-Bibliothek

Die in diesem Fall verwendete Bibliothek ist ngx-mqttdas nicht nur ein Wrapper um MQTT.js für angle >= 2 ist. Es verwendet Observables und kümmert sich um die Abonnementbehandlung und das Nachrichtenrouting. ngx-mqtt eignet sich gut für Anwendungen mit vielen Komponenten und vielen Teilnehmern.

Installieren ngx-mqtt Über die Befehlszeile können Sie den npm- oder den Garnbefehl (beide) verwenden.

npm install ngx-mqtt --save 
yarn add ngx-mqtt

Verwendung von MQTT

Verbindung zum MQTT-Broker herstellen

Wir benutzen das öffentlicher MQTT-Broker bereitgestellt von EMQX in diesem Artikel, der auf dem aufbaut MQTT-Cloud-Dienst – EMQX Cloud. EMQX ist ein groß angelegter verteilter IoT-MQTT-Nachrichtenbroker, der riesige IoT-Geräte effizient und zuverlässig verbinden, Nachrichten und Ereignisflussdaten in Echtzeit verarbeiten und verteilen und Kunden beim Aufbau geschäftskritischer IoT-Plattformen und -Anwendungen unterstützen kann.

Die Serverzugriffsinformationen lauten wie folgt:

  • Makler: broker.emqx.io
  • TCP-Port: 1883
  • WebSocket-Port: 8083

Tastencodes für die Verbindung:

import {
 IMqttMessage,
 IMqttServiceOptions,
 MqttService,
 IPublishOptions,
} from 'ngx-mqtt';
import { IClientSubscribeOptions } from 'mqtt-browser';
import { Subscription } from 'rxjs';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss'],
})
export class AppComponent {
 constructor(private _mqttService: MqttService) {
   this.client = this._mqttService;
}
 private curSubscription: Subscription | undefined;
 connection = {
   hostname: 'broker.emqx.io',
   port: 8083,
   path: '/mqtt',
   clean: true, // Retain session
   connectTimeout: 4000, // Timeout period
   reconnectPeriod: 4000, // Reconnect period
   // Authentication information
   clientId: 'mqttx_597046f4',
   username: 'emqx_test',
   password: 'emqx_test',
   protocol: 'ws',
  }
 subscription = {
   topic: 'topic/mqttx',
   qos: 0,
};
 publish = {
   topic: 'topic/browser',
   qos: 0,
   payload: '{ "msg": "Hello, I am browser." }',
};
 receiveNews="";
 qosList = [
  { label: 0, value: 0 },
  { label: 1, value: 1 },
  { label: 2, value: 2 },
];
 client: MqttService | undefined;
 isConnection = false;
 subscribeSuccess = false;

 // Create a connection
 createConnection() {
   // Connection string, which allows the protocol to specify the connection method to be used
   // ws Unencrypted WebSocket connection
   // wss Encrypted WebSocket connection
   // mqtt Unencrypted TCP connection
   // mqtts Encrypted TCP connection
   try {
     this.client?.connect(this.connection as IMqttServiceOptions)
  } catch (error) {
     console.log('mqtt.connect error', error);
  }
   this.client?.onConnect.subscribe(() => {
     this.isConnection = true
     console.log('Connection succeeded!');
  });
   this.client?.onError.subscribe((error: any) => {
     this.isConnection = false
     console.log('Connection failed', error);
  });
   this.client?.onMessage.subscribe((packet: any) => {
     this.receiveNews = this.receiveNews.concat(packet.payload.toString())
     console.log(`Received message ${packet.payload.toString()} from topic ${packet.topic}`)
  })
}
}

Rufen Sie nach erfolgreicher Verbindung mit dem MQTT-Broker die subscribe -Methode der aktuellen MQTT-Instanz und übergeben Sie die Topic- und QoS-Parameter für das erfolgreiche Abonnement.

doSubscribe() {
 const { topic, qos } = this.subscription
 this.curSubscription = this.client?.observe(topic, { qos } as IClientSubscribeOptions).subscribe((message: IMqttMessage) => {
   this.subscribeSuccess = true
   console.log('Subscribe to topics res', message.payload.toString())
})
}

Das unsubscribe -Methode kann die vom Abonnement gehaltenen Ressourcen freigeben.

doUnSubscribe() {
 this.curSubscription?.unsubscribe()
 this.subscribeSuccess = false
}

Nachrichtenveröffentlichung

Das usafePublish veröffentlicht Nachrichten zu Themen mit optionalen Optionen wie QoS und Retain, wie unten gezeigt.

doPublish() {
 const { topic, qos, payload } = this.publish
 console.log(this.publish)
 this.client?.unsafePublish(topic, payload, { qos } as IPublishOptions)
}

Trennen

Das disconnect trennt den MQTT-Client. Der Parameter true wird übergeben, um eine Trennung vom MQTT-Client zu erzwingen.

destroyConnection() {
 try {
   this.client?.disconnect(true)
   this.isConnection = false
   console.log('Successfully disconnected!')
} catch (error: any) {
   console.log('Disconnect failed', error.toString())
}
}

Prüfen

Wir erstellen mit Angular die folgende einfache Browseranwendung, die folgende Funktionen hat: Verbindung herstellen, Themen abonnieren, Nachrichten senden & empfangen, Abonnement kündigen, Trennen, und so weiter. Den vollständigen Code finden Sie unter:

Angular-MQTTT-APP

Verwenden MQTT 5.0-Client-Tool – MQTT X als ein anderer Client, um das Senden und Empfangen von Nachrichten zu testen.

MQTT-Client

Bevor MQTT X eine zweite Nachricht sendet, melden Sie sich auf der Browserseite ab, und die Browserseite erhält keine weiteren Nachrichten, die von MQTT X gesendet werden.

Wir haben erfolgreich eine MQTT-Verbindung in einem Angular-Projekt erstellt und die Szenarien der Anmeldung, des Sendens und Empfangens von Nachrichten, der Abmeldung und der Trennung zwischen dem Client und dem MQTT simuliert.

Als eines der drei Mainstream-Frontend-Frameworks kann Angular sowohl auf der Browser- als auch auf der mobilen Seite verwendet werden. Durch die Kombination von MQTT-Protokoll und können verschiedene interessante Anwendungen entwickelt werden MQTT-Cloud-Dienstwie das Chatsystem für den Kundenservice oder das Managementsystem zur Echtzeitüberwachung von IoT-Geräteinformationen.

Ursprünglich erschienen bei https://www.emqx.com.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *