1

Tengo una duda desde hace varios días con Angular y la programación reactiva.

Estoy cargando información en el componente implementando una interfaz ngOnInit

export class WebsiteListComponent implements OnInit  {
  
  quoteArray: Ticker[] = [];
  users: Ticker[]=[];
  pagination: boolean;
  page: number;
  size: number;
  data: Ticker[] = [];
  interval: any;
  i = 0;


  constructor(private customerService: WebsiteService, private quoteBlockingService: WebsiteService) {
    this.pagination = true;
    this.page = 0;
    this.size = 50;
  }

  ngOnInit() {   
     
    setInterval(() => {    
      this.users = [];
      this.customerService.getMyEventSourceStream()
      .subscribe(
        (newUser) => {
           this.users = this.users.concat(newUser);
           console.log(this.users);
        }
      )
    }, 1000);
      
  }
  
  }

El HTML a continuación

<ul>
    <li *ngFor="let contact of users">
        {{contact.id}}
        {{contact.symbol}}
    </li>
  </ul>

Esto me pinta el array en la consola de la siguiente forma.

introducir la descripción de la imagen aquí

Cuando pongo el this.users = []; en la consola me lo pinta bien pero en el HTML no y no se porqué sucede esto.

 setInterval(() => {    
          this.users = [];
          this.customerService.getMyEventSourceStream()
          .subscribe(
            (newUser) => {
               this.users = this.users.concat(newUser);
               console.log(this.users);
            }
          )
        }, 1000);

En el HTML se visualiza de la siguiente forma.

introducir la descripción de la imagen aquí

Alguien podría ayudarme la verdad que estoy bastante amargado con esto.

Aañado el código del servicio que básicamente hace una llamada de forma reactiva.

@Injectable({
  providedIn: 'root'
})
export class WebsiteService {
    private customersList: Ticker[] = new Array();
    
    private baseUrl = 'http://localhost:9001';
    
    constructor( 
      private _http: HttpClient,
      private _zone: NgZone
    ) { }

  getMyEventSourceStream():Observable<Ticker> {
    return new Observable<Ticker>((observer) => {      
      let eventSource = new EventSource(this.baseUrl);
      console.log("EventSource"+eventSource);      
      eventSource.onmessage = (event) => {
        let json = JSON.parse(event.data);
        observer.next(new Ticker(json['id']));
      };
      eventSource.onerror = (error) => {        
        if(eventSource.readyState === 0) {
          console.log('The stream has been closed by the server.');
          eventSource.close();
          observer.complete();
        } else {
          observer.error('EventSource error: ' + error);
        }
      }
    });
  }
6
  • hay algo que no veo claro, ¿Por qué si declaras users: Ticker[]=[]; vuelves en ngOnInit a declarar this.users = [];?
    – rbarbeitor
    el 25 ene. 2022 a las 12:32
  • @RodolfoBarbeitoRodriguez mi intención cada vez que hago un setInterval es que ese array se inicialize de nuevo. Esto funciona a medias y por ahi creo que anda la cosa..
    – pepe
    el 25 ene. 2022 a las 14:14
  • probaste con ngAfterViewInit() para cargar la informacion ? no mostras tu codigo customerService asi que no se si mi consulta puede ser correcta
    – nestdan
    el 25 ene. 2022 a las 14:47
  • @nestdan no lo he probado .. voy a ver acabo de adjuntar el service
    – pepe
    el 25 ene. 2022 a las 14:56
  • Donde usas _zone: NgZone? no lo mostras en el codigo Si lo usas como this._zone.runOutsideAngular(()=>) para que se ejecute el setInterval () no se pinta el codigo porque users se esta actualizando fuera de NgZone no actualiza a la vista se pierde al binding Hay que acceder al DOM entonces mediante una template reference variable y valiendose de sus propiedades setearlo dentro del metodo anterior para actualizarlo por ejmplo con ElementRef
    – nestdan
    el 26 ene. 2022 a las 13:33

2 respuestas 2

0

Es un poco arcaico la implementación, pero funcional. Podrías servirte de las bondades de rxjs.

import { Observable, timer } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

users$: Observable<Ticker[]>;

  ngOnInit(): void {
    this.users$ = timer( 0, 1000 ) // El operador timer permite crear un observable que emite un valor cada cierto tiempo
    .pipe( // El operador pipe permite aplicar una serie de operaciones sobre un observable
      mergeMap( () => // El operador mergeMap permite crear un observable a partir de otro observable
      this.customerService.getMyEventSourceStream()
      ))
  }

Ahora tienes un Observable al que puedes suscribirte con una llamada a tu API y un delay de 1000ms, pero en lugar de hacerlo en el .ts, hazlo en el .html con el pipe de async, eso te suscribirá sin necesidad de hacerlo en el .ts y hará un unsubscribe() cuando se destruya el componente, así no haces un memory leak.

El HTML luciría así mas o menos

<ul>
    <li *ngFor="let contact of users$ | async">
        {{contact.id}}
        {{contact.symbol}}
    </li>
  </ul>

Te incluyo la documentación

  1. timer()
  2. mergeMap
  3. asyncPipe
0

Hay que notificar a Angular del cambio con this.zone.run()

Para que se ejecute el binding del observable en la vista provenientes del EventSource. Necesitamos NgZone para alertar a Angular cuando ocurre un evento porque sucede fuera de su alcance. Se debe establecer en tu codigo mediante:

this.zone.run(() => observer.next(...)

Tambien podes ver si te puede ser de utilidad conectarte a Server Sent Events (SSE) utilizando Event Source API en el link Angular y SSE En tu codigo usando solamente EventSource notificamos a Angular con this.zone.run():

private zone: NgZone
private baseUrl = 'http://localhost:9001';
//Hay que notificar a Angular del cambio con this.zone.run()
eventSource.onmessage = (event) => {
         let json = JSON.parse(event.data);
      this.zone.run(() => observer.next(new Ticker(json['id'])));
    };

Si no modificas tu codigo con this.zone.run() podrias notificar a Angular con templete referencias y elementRef o crear Observables internos con los cuales puedas comunicar a Angular los cambios que no puede detectar en tu caso podes crear a un BehaviorSubject que te permite reiniciarlo comunicar sus nuevos valores y setearlo como Gestionar BehaviorSubject Pero si simplemente comunicas con this.zone.run() no tenes necesidad de agregar una deteccion adicional pues Eventsource permite a un cliente recibir actualizaciones automáticas de un servidor y si lo comunicas con this.zone.run() se vera reflejado en la vista Otra posible solucion creando un BehaviorSubject([]) al cual subscribirse en tu servicio Ejemplo con EventSource the real-time exchange rate

Se actualiza el array sin necesidad de setInterval() si se define correctamente la deteccion del cambio

import { Component, OnInit } from '@angular/core';
import { BehaviorSubject, Observable, of, timer } from 'rxjs';
import { EventSourceService } from '../event-source.service';
import { mergeMap, catchError } from 'rxjs/operators';

@Component({
  selector: 'app-event',
  templateUrl: './event.component.html',
  styleUrls: ['./event.component.css']
})


export class EventComponent implements

OnInit {
  
url='http://localhost:8888';
data=[0];

  constructor(private eventSourceService:EventSourceService) { }

  ngOnInit(): void {
    
   this.eventSourceService.getServerSentEvent('http://localhost:8888/countdown').subscribe(data => {this.data=[...data.data,data],console.log(this.data)});

  }}

{{data |json}}

//servicio
import { Injectable, NgZone } from '@angular/core';
import { Observable } from 'rxjs';


@Injectable({
  providedIn: 'root'
})
//ng g m about --route=about -m app-routing.module.ts
export class EventSourceService {

  constructor(private zone:NgZone) { }
  private getEventSource(url: string): EventSource {
    return new EventSource(url);
}

getServerSentEvent(url: string): Observable<MessageEvent> {
    return new Observable(observer => {
        const eventSource = this.getEventSource(url);

        eventSource.onmessage = event => {
            this.zone.run(() => observer.next(event));

        };
    });
}
}

//app.js
const express = require('express')
const app = express()
var cors = require('cors')
app.use(express.json())
app.use(cors())
app.get('/countdown',cors() ,function(req, res) {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  })
  countdown(res, 3)
})

function countdown(res, count) {
  res.write("data: " + [count ]+ "\n\n")
  //res.send([1, 2, 3]);
  if (count)
    setTimeout(() => countdown(res, count-1), 1000)
  else
    res.end()
}

app.listen(8888, () => console.log('SSE app listening on port 8888!'))

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.