How to update real-time values returned from an endpoint in any view?

Ionic Framework ionic-v3
1

Hello everyone, I’m in need of guidance. I need to create a bar of icons like the facebook example, in this bar we will have the notification icons with their values ​​internally. My question is how to make the values ​​from within the icons update automatically the same as the facebook bar. I created a message icon, and the amount of messages comes from an http: // localhost: 4000 / person / message endpoint. How do I get the amount of messages updated in real time?

01

Researching me said that I should use Socket.io, but how to implement this in this situation?

I can get the amount of messages through get method using subscribe. But I do not know how to make it update in real time, equal to the values ​​inside the red balloons of the figure.

2

Assuming you have ion-icon with ion-badge, HTML like:

  <ion-icon name="some-icon"></ion-icon>
  <ion-badge >{{someIconBadge}}</ion-badge>

and in your component:

private someIconBadge: number = 0;

Your need is to update value of someIconBadge in real-time:

  1. Query your HTTP endpoint in loop in this component, update the value after each response. This is the simplest way, you just perform HTTP request in loop with some delay (the lower delay - the more ‘real-time’, but you need to find some optimal value taking response time into consideration).
    To implement this:
//declare the property
private updateBadgeSubscription: Subscription;
...

//in ionViewWillEnter
this.updateBadgeSubscription = Observable.interval(5000).flatMap(() => {
    return updateBadgeHttpService.getBadge().subscribe(response => {
        this.someIconBadge = response.badge;
    });
});

Remember to unsubscribe from your loop while closing the page, in other case your app will ask for the badge forever:

//in ionViewWillLeave
this.updateBadgeSubscription.unsubscribe();
  1. Websocket solution - can be also a solution, opening a socket between backend and mobile app you will have real-time connection. Then you need to push updates on backend side (on some events, time intervals (?) - depends on your logic). However to implement this you need a development also in backend, so if you can’t change it and have only mentioned HTTP endpoint look at 1.
3

Hi,I did the test but it is giving an error:

"owner": "typescript", "code": "2345", "severity": 8, "message": "The argument of type '() =>; Subscription' is not attributable to the parameter of type '(value: number: index: number) =>; ObservableInput <{}>'. \ n The type 'Subscription' can not be assigned to type 'ArrayLike <{}>'. \ n The 'length' property is missing in type 'Subscription'. " ,

The following is the method code:

ionViewWillEnter(){
   this.updateBadgeResumo = Observable.interval(5000).flatMap(() => {
     return this.clienteService.getResumoFavoritoCarrinho().subscribe(response => {
       this.resumo.quantidadeCarrinho = response.quantidadeCarrinho;
       this.resumo.quantidadeFavorito = response.quantidadeFavorito;
     })
   })
  }

the error is in arrow function () => { after flapMap().

Follow the service code:

getResumoFavoritoCarrinho() : Observable<ResumoFavoritoPedidoDTO> {
    return this.http.get<ResumoFavoritoPedidoDTO>(`${CONF_API.baseUrl}/clientes/resumo/pedfav`);
}

and DTO code:

export interface ResumoFavoritoPedidoDTO {
    quantidadeCarrinho: number,
    quantidadeFavorito : number
}
4

Syntax error, should be:

ionViewWillEnter(){
   this.updateBadgeResumo = Observable.interval(5000).flatMap(() => {
     return this.clienteService.getResumoFavoritoCarrinho()
   }).subscribe((response) => {
           this.resumo.quantidadeCarrinho = response.quantidadeCarrinho;
           this.resumo.quantidadeFavorito = response.quantidadeFavorito;
  })
  }```