MQTT with Angular

Question

I am trying to receive some mqtt messages in my Angular Application. Unfortunately, it does not work. Here is my Code (I followed this: https://sclausen.github.io/ngx-mqtt/): In app.module.ts:

import {
  IMqttMessage,
  MqttModule,
  IMqttServiceOptions,
  MqttService
} from 'ngx-mqtt';

export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
  hostname: 'localhost',
  port: 9001,
  path: '/mqtt'
};

In app.component.ts:

  subscription: Subscription | undefined;
  constructor(private mqttService: MqttService) {
    this.serial = new NgxSerial(this.dataHandler);
    console.log(mqttService)
    this.subscription = this.mqttService.observe('my/topic').subscribe((message: IMqttMessage) => {
      this.message = message.payload.toString();
      console.log('Received message:', message.payload.toString());
    });
  }


  public unsafePublish(topic: string, message: string): void {
    this.mqttService.unsafePublish(topic, message, { qos: 1, retain: true });
  }

  public ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }

Here are my tries to send messages to the application:

Any suggestions? Thank you!

Answer 1

then in app.module.ts I advise you not to put the parameters to connect, but only the code structure.

And then in a component you can put all the logic. Tell me if you have already solved otherwise I help you.