Question

我试图消耗3个值，这是我从Paho-Client获得的（时间，几何，温度）。这些值将保存在一个名为message的对象中。
现在我想通过注入三个值我的组件中的服务首先将它们保存在数组中。到目前为止，它只是通过在我的组件中使用其中一个值（message.geometry）注入对象（消息）来工作。 Mi的想法是推送messaage.geometry，message.timestamp和message.temperatur。
这是我的服务与 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) {}

在这里我得到了message.geometry，但我想在我的组件中注入3个vules，首先将它们保存在一个数组中，然后再使用它们。
我的组件：

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

}

Answer 1

您需要订阅GeomqttService服务的更改，然后将它们传递给您的组件或流，如下所示。

在您的服务中，创建一个公共onMessage变量，该数据将在数据到达时通知任何订阅者。

@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);
    });
  }
  ...
}

在您的组件中，您可以订阅onMessage主题以获取最新数据并按您需要的方式进行更改。

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

如何使用paho客户端使用多个消息，角度为4

1 个答案: