Данные в реальном времени от службы в ионном / угловом - PullRequest
Новая
       25

Данные в реальном времени от службы в ионном / угловом

0 голосов
/ 10 октября 2019

В настоящее время у меня есть настройка приложения со службой, которая корректно получает данные в реальном времени оттуда, где они мне нужны. Я могу получить доступ к этим значениям в режиме реального времени в порядке через HTML, но я пытаюсь реализовать диаграмму Chart.js на странице, которая в настоящее время находится в ngOnInit(), то есть она создается один раз, а затем не обновляется. Как бы я настроил какой-то метод, который может наблюдать за значениями в сервисе в режиме реального времени, чтобы я мог впоследствии вызвать обновление для графика?

Для справки:

tab1.page.ts 

export class Tab1Page {
  @ViewChild("barCanvas", { static: true }) barCanvas: ElementRef;
  private barChart: Chart;
...
ngOnInit() {
    this.barChart = new Chart(this.barCanvas.nativeElement, {
...

tab1.page.html 

<ion-card-content>
      <canvas #barCanvas></canvas>
</ion-card-content>

Данные о начальном создании извлекаются изнекоторые открытые поля:

mqtt.service.ts 

export class MqttService {
  public livingCount: number = 0;
...

1 Ответ

0 голосов
/ 10 октября 2019

Вы можете использовать Observable или Subject для прослушивания потока данных в реальном времени. Ваша служба сокетов, вероятно, будет выглядеть следующим образом. 

export class MqttService {
private mqttClient:any;//any mqtt implementation library
  connect(params:any): {
    this.mqttClient = mqtt.connect('connection url');
  }
  onTopic(topic: string,header:any): Observable<any> {
  //subscribe any topic here.
    return Observable.create((observer) => {
          this.mqttClient.observe(topic).subscribe((message) => {
              observer.next(JSON.parse(message.payload.toString()));
            },header);
    });
  }
}

После того, как вы написали свой сервис, используйте его внутри любого компонента, который вы пожелаете. 

export class Tab1Page {

@ViewChild("barCanvas", { static: true }) barCanvas: ElementRef;
private barChart: Chart;

constructor(private mqttService:MqttService){}

ngOnInit() {
    this.barChart = new Chart(this.barCanvas.nativeElement)//no idea how to init this Class,
  this.mqttService.onTopic("app/chart").subscribe(data=>{
     this.refreshChart(this.barChart,data)
   })
}

 refreshChart(chart:Chart,data){
 //refresh the chart
 }

}
...