Angular es una plataforma de desarrollo construida sobre TypeScript. Consiste en un marco basado en componentes para crear aplicaciones web escalables; un conjunto de bibliotecas perfectamente integradas que cubren enrutamiento, gestión de formularios, comunicación cliente-servidor y otras funciones; y un conjunto de herramientas de desarrollo para ayudar a los usuarios a desarrollar, construir, probar y actualizar códigos.

MQTT es un protocolo ligero de transferencia de mensajes de IoT basado en el modo de publicación/suscripción, que proporciona distribución de mensajes de uno a muchos y desacoplamiento de aplicaciones con un consumo de transmisión pequeño, lo que puede minimizar el tráfico de red. Al mismo tiempo, puede cumplir con varios requisitos de entrega gracias a sus tres niveles de QoS (Quality of Service) para mensajes.

Este artículo presentará cómo usar el protocolo MQTT en proyectos Angular para conectarse, suscribirse, enviar/recibir mensajes, darse de baja y realizar otras funciones entre clientes y MQTT Broker.

Inicialización del proyecto

Crear un nuevo proyecto

La referencia es la siguiente: Cree un proyecto Angular con Angular CLI

Ejemplo:

ng new my-app

Instalación de la biblioteca de cliente MQTT

La biblioteca utilizada en este caso es ngx-mqtt, que no es solo un contenedor alrededor de MQTT.js para angular >= 2. Utiliza observables y se encarga del manejo de suscripciones y el enrutamiento de mensajes. ngx-mqtt es muy adecuado para aplicaciones con muchos componentes y muchos suscriptores.

Para instalar ngx-mqtt a través de la línea de comando, puede usar el comando npm o yarn (cualquiera de los dos)

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

Uso de MQTT

Conexión con el corredor MQTT

Usamos la Corredor MQTT público proporcionada por EMQX en este artículo, que se basa en la Servicio en la nube MQTT – Nube EMQX. EMQX es un intermediario de mensajes IoT MQTT distribuido a gran escala que puede conectar dispositivos IoT masivos de manera eficiente y confiable, procesar y distribuir mensajes y datos de flujo de eventos en tiempo real, y ayudar a los clientes a crear plataformas y aplicaciones IoT críticas para el negocio.

La información de acceso al servidor es la siguiente:

• Corredor: broker.emqx.io
• Puerto TCP: 1883
• Puerto WebSocket: 8083

Códigos clave para la conexión:

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}`)
  })
}
}

Una vez que se haya conectado con MQTT Broker con éxito, llame al subscribe método de la instancia MQTT actual y pase los parámetros Tema y QoS para la suscripción exitosa.

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())
})
}

La unsubscribe El método puede liberar los recursos retenidos por la suscripción.

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

Publicación de mensajes

La usafePublish publica mensajes sobre temas con opciones opcionales, como QoS y Retain, como se muestra a continuación.

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

Desconectar

La disconnect desconectará el cliente MQTT. El parámetro true se pasa para forzar una desconexión del cliente MQTT.

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

Probar

Creamos la siguiente aplicación de navegador simple con Angular, que tiene las siguientes funciones: establecer una conexión, suscribirse a temas, enviar y recibir mensajes, darse de baja, desconectarse, etc. Para el código completo, consulte: https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-Angular.js

Uso Herramienta cliente MQTT 5.0 – MQTT X como otro cliente para probar el envío y recepción de mensajes.

Antes de que MQTT X envíe un segundo mensaje, cancele la suscripción en el lado del navegador, y el lado del navegador no recibirá los mensajes posteriores enviados por MQTT X.

Creamos con éxito una conexión MQTT en un proyecto Angular y simulamos los escenarios de suscripción, envío y recepción de mensajes, cancelación de suscripción y desconexión entre el cliente y el MQTT.

Como uno de los tres marcos front-end principales, Angular se puede usar tanto en el navegador como en el lado móvil. Se pueden desarrollar varias aplicaciones interesantes combinando el protocolo MQTT y Servicio en la nube MQTT, como el sistema de chat para la atención al cliente o el sistema de gestión para el seguimiento en tiempo real de la información de los dispositivos IoT.

publicado originalmente en https://www.emqx.com.