Как использовать MQTT в проекте Angular

Угловой — это платформа разработки, построенная на основе TypeScript. Он состоит из основанной на компонентах инфраструктуры для создания масштабируемых веб-приложений; набор идеально интегрированных библиотек, охватывающих маршрутизацию, управление формами, взаимодействие клиент-сервер и другие функции; и набор инструментов разработки, помогающих пользователям разрабатывать, создавать, тестировать и обновлять коды.

MQTT — это облегченный протокол передачи сообщений IoT. на основе режима публикации/подписки, обеспечивающего распространение сообщений «один ко многим» и развязку приложений с небольшим потреблением передачи, что может минимизировать сетевой трафик. В то же время он может удовлетворить различные требования к доставке благодаря трем уровням QoS (качество обслуживания) для сообщений.

В этой статье рассказывается, как использовать протокол MQTT в проектах Angular для подключения, подписки, отправки/получения сообщений, отказа от подписки и выполнения других функций между клиентами и брокером MQTT.

Инициализация проекта

Создать новый проект

Ссылка выглядит следующим образом: Создайте проект Angular с помощью Angular CLI

Пример:

ng new my-app

Установка клиентской библиотеки MQTT

В данном случае используется библиотека ngx-mqttкоторый является не просто оболочкой MQTT.js для angular >= 2. Он использует наблюдаемые объекты и заботится об обработке подписки и маршрутизации сообщений. ngx-mqtt хорошо подходит для приложений со многими компонентами и многими подписчиками.

Установить ngx-mqtt через командную строку вы можете использовать команду npm или yarn (любую)

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

Использование MQTT

Подключение к MQTT-брокеру

Мы используем публичный MQTT-брокер предоставленный EMQX в этой статье, который построен на основе Облачный сервис MQTT — Облако EMQX. EMQX — это крупномасштабный распределенный брокер сообщений IoT MQTT, который может эффективно и надежно подключать массивные устройства IoT, обрабатывать и распространять сообщения и данные потока событий в режиме реального времени, а также помогать клиентам создавать критически важные для бизнеса платформы и приложения IoT.

Информация о доступе к серверу выглядит следующим образом:

• Маклер: broker.emqx.io
• TCP-порт: 1883 г.
• Порт веб-сокета: 8083

Коды клавиш для подключения:

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

После успешного подключения к MQTT Broker вызовите subscribe метод текущего экземпляра MQTT и передать параметры Topic и QoS для успешной подписки.

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

unsubscribe метод может освободить ресурсы, удерживаемые подпиской.

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

Публикация сообщений

usafePublish публикует сообщения в темах с дополнительными параметрами, такими как QoS и Retain, как показано ниже.

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

Отключить

disconnect отключит клиент MQTT. Параметр true передается для принудительного отключения от клиента MQTT.

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

Контрольная работа

Мы создаем следующее простое браузерное приложение с Angular, которое имеет следующие функции: установить соединение, подписаться на темы, отправлять и получать сообщения, отписываться, отключаться и так далее. Полный код см.

Использовать Клиентский инструмент MQTT 5.0 — MQTT X в качестве другого клиента для проверки отправки и получения сообщений.

Прежде чем MQTT X отправит второе сообщение, отмените подписку на стороне браузера, и сторона браузера не будет получать последующие сообщения, отправленные MQTT X.

Мы успешно создали соединение MQTT в проекте Angular и смоделировали сценарии подписки, отправки и получения сообщений, отказа от подписки и отключения между клиентом и MQTT.

Как один из трех основных интерфейсных фреймворков, Angular можно использовать как в браузере, так и на мобильных устройствах. Различные интересные приложения могут быть разработаны путем объединения протокола MQTT и Облачный сервис MQTTтакие как система чата для обслуживания клиентов или система управления для мониторинга информации об устройствах IoT в режиме реального времени.

Первоначально опубликовано на https://www.emqx.com.