0

Olá, pessoal, tudo bem?

Estou iniciando meus estudos com angular e estou com um problema de implementação. Tenho uma API, desenvolvida por mim, na qual os dados retornados são atualizados a cada 20 segundos no servidor.

Estou montando um frontend com angular. A ideia é atualizar a view do usuário a cada 20 segundos também (ou menos até). Mas existe um requisito funcional da aplicação, que resume-se a notificar (visualmente) o usuário, quando valor de atributo for alterado.

Para um componente renderizado da seguinte forma:


<div *ngFor="event in events">
    <app-event
        [id]="event.id"
        [time]="event.time"
        [value1]="event.value1" >
    </app-events>
</div>

Sendo uma chamada de exemplo (chamada n)

"events" : [
    {
        "id" : 1
        "time" : 45,
        "value1" : 1.6
    },
    {
        "id" : 2
        "time" : 78,
        "value1" : 1.5
    }
]

Na chamada n+1:

"events" : [
    {
        "id" : 1
        "time" : 46,
        "value1" : 1.5
    },
    {
        "id" : 2
        "time" : 78,
        "value1" : 1.6
    }
]

Os valores de time e value1 foram alterados na api na chamada n+1, portando, preciso alterar a classe do component que ele fora renderizado na chamada n. Eu li sobre questões que envolvem Subject, Observable e outras coisas, mas não ficou tão claro para mim, como executar isso.

Abaixo o código atual dos meus componentes.

events.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { EventsService } from '../../services/events.service';


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

  events = []
  
  constructor(private eventsService: EventsService) { }

  ngOnInit(): void {

    this.eventsService.getEvents().subscribe((data: any[]) => {         
      this.events = data
    })


  }


}

events.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, Subject } from 'rxjs'

@Injectable({
  providedIn: 'root'
})
export class EventsService {

  constructor(private httpClient: HttpClient) {
    
  }

  private API_URL = "http://0.0.0.0:93"

  public getEvents(): Observable<any> {
    return this.httpClient.get(`${this.API_URL}/events/inplay`)    
  }
}

events.component.html

<div *ngFor="let event of events.data">
    <app-event [event]="event"></app-event>
</div>

event.component.ts

import { Component, Input, OnChanges,  } from '@angular/core';
import { SimpleChanges } from '@angular/core'
import { EventsComponent } from '../events.component';


@Component({
  selector: 'app-event',
  templateUrl: './event.component.html',
  styleUrls: ['./event.component.scss']
})
export class EventComponent implements OnChanges {

  @Input() event: any;

  constructor(private eventsComponent: EventsComponent) {

   }


  ngOnInit(): void {       

  }

  ngOnChanges(changes: SimpleChanges) {       
    console.log(changes)    
  }
 
}

Agradeço.

5
  • Tanto Subject como Behaviour Subject são indicados para atualizações de dados entre componentes que necessitam atualizar valores de um componente através de outro componente e não dados de uma API. Acho que isso é bem simples de resolver inserindo um método JavaScript setInterval() na chamada do service no arquivo events.component.ts, isso atualizaria os dados no tempo que for determinado no método, ou, utilizar métodos específicos do Angular/RXJS para isso, como o timer: rxjs.dev/api/index/function/timer
    – LeAndrade
    12/10/2020 às 20:40
  • Tudo bem, eu até fiz isso e acabei esquecendo de colocar nos códigos de exemplo. O problema é: Como vou identificar que os dados foram alterados e notificar o usuário (visualmente, uma mudança de classe, por exemplo) dessa alteração? 12/10/2020 às 20:44
  • Não sei se existem métodos prontos para isso, ou, teria que criar na mão. Mas se não tiver pronto vc consegue comparando os valores dos objetos em this.events. Pega o valor atual e verifica se o valor que a atualização trouxe ainda é igual ao atual.
    – LeAndrade
    12/10/2020 às 20:59
  • 1
    Pois é, atualmente essa aplicação está construída em Jquery e faço exatamente assim. Acredito que será a única alternativa. 12/10/2020 às 21:02
  • 1
    Você pode utilizar sockets ao inves de http, ai seu back notifica o front que algo mudou 13/10/2020 às 18:10

1 Resposta 1

0

Se o seu backend ainda não oferece WebSockets ou SSE, vc pode fazer por meio de polling:

public ngOnInit(): void {
    interval(20000).pipe(
        mergeMap(() => this.eventsService.getEvents()),
        distinctUntilChanged((prev, nxt) => prev.time === nxt.time && prev.value1 === nxt.value1),
    ).subscribe(
        evt => console.log(`time or value1 changed`, evt),
    )
}

Se o seu backend oferecer SSE, você poderia deixar a lógica de comparação nele e no frontend só receber os eventos:

public ngOnInit(): void {
    const eventSource = new EventSource('url/do/sse');
    eventSource.onmessage = (event: MessageEvent) => {
        console.log(`received server event`, event);
    };
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .