How to consume multiple messages with paho client, angular 4

Question

Im trying to consume 3 values, which i get from a Paho-Client (time, geometry, temperature).The values will be saved in an object named message.
Now i want to inject the three values throug a Service in my component to save them first in an array.
So far it is only working by injecting the object(message) with one of the values (message.geometry) in my component. Mi idea is to push messaage.geometry, message.timestamp and message.temperatur.
This is my Service withe the Paho-Client

@Injectable()
export class GeomqttService {

  client: any;

  geohistory = [
    {
      topic: '',
      timestamp: '',
      payloadstring: '',
      geometry: ''
    }
  ];

  constructor() {
    this.client = new Paho.MQTT.Client('testmqtt.de', 8080, 's');
    this.onConnectionLost();
    this.client.connect({onSuccess: this.onConnected.bind(this)});
  }


  onMessageArrived = (message: Paho.MQTT.Message) => {
    this.geohistory.push({
      'topic': 'temp',
      'timestamp': message.timestamp,
      'payloadstring': message.payloadString,
      'geometry': message.geometry
    });

  };

  onConnected() {
    console.log('Connected');
    this.client.geosubscribe('topic.temperature', '', 'geometry.BBOX(-180 -90, 180 90)', 'INTERSECTS');
    this.client.onMessageArrived = (message: Paho.MQTT.Message) => {
      this.onMessage(message.geometry);
      console.log('Message arrived: ' + message.geometry);
    }
  }

  public onMessage(message: string) {}

Here i get the message.geometry, but i would like to inject 3 of the vules in my component, to first save them in an array and use them later on .
My component:

import { Component, OnInit } from '@angular/core';
import {GeomqttService} from './geomqtt.service';



@Component({
  selector: 'app-paho',
  templateUrl: './paho.component.html',
  styleUrls: ['./paho.component.css']
})
export class PahoComponent implements OnInit {


  data = [
    {
      topic: '',
      timestamp: '',
      payloadstring: '',
      geometry: ''
    }
  ];


  constructor(private geomqttService: GeomqttService) {
    this.geomqttService.onMessage = (message: string) => {
      this.data = [{topic: 'test', timestamp: '' , payloadstring: '', geometry: message}];
      console.log(this.data);
    };
  }

  ngOnInit(){}

}

Your question isn't very clear. Can you try to re-formulate it? — Sonu Kapoor, Dec 11 '17 at 18:32
Thanks. Your `onMessage` implementation is empty. Is that intended? Does `geosubscribe` return an `observable` you can subscribe to? — Sonu Kapoor, Dec 12 '17 at 15:01
That is more or less intended, because i am using the onMessage method just for the object (message. string) in several components. Yes, geosubscribe is returning an observable. — Steffn, Dec 12 '17 at 15:18

score 0 · Answer 1 · answered Dec 12 '17 at 15:34

0

You need to subscribe to the changes of the GeomqttService service and then pass them either to your component or a stream as shown below.

In your service, create a public onMessage variable that will notify any subscribers when the data has arrived.

@Injectable()
export class GeomqttService {
  ...
  public onMessage: new Subject();

  onConnected() {
    console.log('Connected');
    this.client.geosubscribe('topic.temperature', '', 'geometry.BBOX(-180 -90, 180 90)', 'INTERSECTS').subcribe((message:message: Paho.MQTT.Message) => {
      // call any other method here if you like.
      onMessage.next(message);
    });
  }
  ...
}

In your component then, you can subscribe to the onMessage subject to get the latest data and change it the way you need.

export class PahoComponent implements OnInit {
  ...
  constructor(private geomqttService: GeomqttService) {
    this.geomqttService.onMessage = (message: Paho.MQTT.Message) => {
      console.log(message);
    };
  }
  ...
}

answered Dec 12 '17 at 15:34

Sonu Kapoor

1,567
3
16
34

There is a lot of code missing to realize your solution and i didnt really get the idea of your solution, to implement it by myself. – Steffn Dec 12 '17 at 16:12
The answer isn't usefull in this state, perhaps you could add some more information... – Steffn Dec 13 '17 at 11:56
My idea is that you need to subscribe to the HTTP calls and return the data to the component when it is has received it. In your original code, you are not subscribing to the HTTP call. Its unclear to me how you are retrieving the message initially. – Sonu Kapoor Dec 13 '17 at 16:35
I get the message as object from my Service without problems. In my original code i am subscribing to my onConnected method, with the onMessage method inside! So this is already working. But my question is more about how to get the 3 values from the object message in my Service, to show them in my component seperatly? I want to get acces to message.geometry, message.timestamp and message.payloadstring to do different things with them in my component! – Steffn Dec 14 '17 at 10:53
Does `onMessage` return all three properties? Could you create a reproducible stackblitz? – Sonu Kapoor Dec 14 '17 at 14:59
That is the point! onMessage can just return message.payloadstring OR message.timestamp OR message.geometry... Mi idea was to have i like: this.onMessage(message.timestamp, message.geometry, message.payloadstring) But this isn't working... – Steffn Dec 14 '17 at 15:03
i cant build a stackblitz, because i am using my own js lib for an geo version of the paho-client... – Steffn Dec 14 '17 at 15:25
Do you have to make a separate http call to get each property? – Sonu Kapoor Dec 14 '17 at 16:18

How to consume multiple messages with paho client, angular 4

1 Answers1