npm install ngx-mqtt --save<\/code><\/pre>\n\n\n\nConfiguration<\/h4>\n\n\n\n
Once the library is installed, you need to initialize it. You can follow the instructions on the ngx-mqtt site, but you will probably have multiple environments in your Angular code, so you will need a different configuration for each environment. So let\u2019s create an\u00a0mqtt<\/strong>\u00a0section in our environment files. Here\u2019s an example:\u00a0src\/environments\/environment.prod.ts<\/code><\/p>\n\n\n\nexport const environment = {\r\n production: true,\r\n\thmr: false,\r\n\thttp: {\r\n\t\tapiUrl: '<https:\/\/api.myweb.com>',\r\n\t},\r\n\tmqtt: {\r\n\t\tserver: 'mqtt.myweb.com',\r\n\t\tprotocol: \"wss\",\r\n\t\tport: 1883\r\n\t}\r\n};<\/code><\/pre>\n\n\n\nYou can edit all other environment configuration files to set the right values for each one. Now we need to initialize the MQTT library, and for this we recommend changing to\u00a0app.module.ts<\/code>:<\/p>\n\n\n\n...\r\nimport { IMqttServiceOptions, MqttModule } from \"ngx-mqtt\";\r\nimport { environment as env } from '..\/environments\/environment';\r\n\r\nconst MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {\r\n hostname: env.mqtt.server,\r\n port: env.mqtt.port,\r\n protocol: (env.mqtt.protocol === \"wss\") ? \"wss\" : \"ws\",\r\n path: '',\r\n};\r\n\r\n@NgModule({\r\n declarations: [AppComponent],\r\n imports: [\r\n ...\r\n MqttModule.forRoot(MQTT_SERVICE_OPTIONS),\r\n ],\r\n ...\r\n})\r\nexport class AppModule { }<\/code><\/pre>\n\n\n\nCreating Services<\/h4>\n\n\n\n
It is recommend to create a service class which manage the differents\u00a0Topic<\/strong>s\u00a0we are going to use. Let\u2019s create a service that subscribes to a topic , where the Topic name is similar to\u00a0\/local\/data\/temperature<\/code>. For this we create the Typescript file\u00a0src\/app\/services\/event.mqtt.service.ts<\/code> with the following code:<\/p>\n\n\n\nimport { Injectable } from '@angular\/core';\r\nimport { IMqttMessage, MqttService } from \"ngx-mqtt\";\r\nimport { Observable } from \"rxjs\";\r\n\r\n@Injectable()\r\nexport class EventMqttService {\r\n\r\n constructor(\rprivate _mqttService: MqttService)\n\n topic(topicName: string): Observable<IMqttMessage> {\r \r\n return this._mqttService.observe(topicName);\r\n }\r\n}<\/code><\/pre>\n\n\n\nUsing this service class, we have all the MQTT-related code in a single file and now we only need to use this service when it\u2019s needed.<\/p>\n\n\n\n
PS: Remember to add all the services files to the\u00a0providers<\/strong>\u00a0section of your\u00a0AppModule,<\/strong>\u00a0otherwise you won\u2019t be able to use them.<\/em><\/p>\n\n\n\nUsing the MQTT Services<\/h4>\n\n\n\n
Now it\u2019s time to use the MQTT services we have created. So, for example, let\u2019s create an\u00a0EventStream<\/strong>\u00a0component that prints all the events that a device generates. The code of this file will be similar to:<\/p>\n\n\n\nimport { Component, OnInit } from '@angular\/core';\r\nimport { EventDataModel } from 'app\/models\/event.model';\r\nimport { Subscription } from 'rxjs';\r\nimport { EventMqttService } from 'app\/services\/api\/event.mqtt.service';\r\nimport { IMqttMessage } from \"ngx-mqtt\";\r\n\r\n@Component({\r\n selector: 'event-stream',\r\n templateUrl: '.\/event-stream.component.html',\r\n styleUrls: ['.\/event-stream.component.scss'],\r\n})\r\nexport class EventStreamComponent implements OnInit {\r\n events: any[];\r\n private deviceId: string;\r\n subscription: Subscription;\r\n\r\n constructor(\r\n private readonly eventMqtt: EventMqttService,\r\n ) {\r\n }\r\n\r\n ngOnInit() {\r\n this.subscribeToTopic();\r\n }\r\n\r\n ngOnDestroy(): void {\r\n if (this.subscription) {\r\n this.subscription.unsubscribe();\r\n }\r\n }\r\n\r\n private subscribeToTopic() {\r\n this.subscription = this.eventMqtt.topic(this.deviceId)\r\n .subscribe((data: IMqttMessage) => {\r\n let item = JSON.parse(data.payload.toString());\r\n\t\tthis.events.push(item);\r\n });\r\n }\r\n}<\/code><\/pre>\n\n\n\nIt\u2019s important to remember that we need to unsubscribe<\/strong> from the subscription when we destroy the component.<\/p>\n\n\n\nNow, we should have an Angular app that can subscribe to MQTT topics and show the user the information every time a device generates an MQTT message.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Reference:<\/h5>\n\n\n\n
https:\/\/bugfender.com\/<\/a><\/p>\n\n\n\n<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
When we are building a website that needs to be updated in real-time, our first thought is probably to add WebSockets to our application. However Websockets is a low-level protocol and to use it, we will need to add another layer on top to manage the information we want to get. This is where MQTT […]<\/p>\n","protected":false},"author":1,"featured_media":1391,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[387,222,389,507,388,391,390],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1390"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1390"}],"version-history":[{"count":3,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1390\/revisions"}],"predecessor-version":[{"id":1753,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1390\/revisions\/1753"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1391"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1390"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1390"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/03\/image-6.png\")
<\/figure>\n\n\n\n