Keep hitting API without setInterval-CodePudding

I have three pages. Homepage, Chat page and Top navigation page with chat icon. When a user receives new message I want to show a badge with chat icon on the top navigation. For that I'm maintaining a flag in chat model called seen. It's a Boolean. If seen is false, I will take a count of the records that is false and show the count in badge with chat icon. For this, I have written a method in top navigations ngOnit() to check the chat model if it has any unseen message. I feel it affects the performance because if hit the API every one second. Is there is any better way than setInterval.

Top Navigation TS

ngOnInit()
        {
            setInterval(() => {
               //API Call
                }, 1000);
        }

CodePudding user response：

Instead of hitting the API continuously, you should consider setting up a websocket server. You can connect to your server from the Angular app to emit and listen for messages in real time.

Server (websocket on NodeJs)

This is what a simple websocket server looks like in NodeJs:

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8081 });
  
wss.on('connection', ws => {
  onConnection(ws);
  ws.on('message', message => {
    onMessage(message, ws);
  });
  ws.on('error', error => {
    one rror(error);
  });
   ws.on('close', ws=> {
    onClose();
})
});

Client (Angular)

In your Angular app, this is what a client side service to handle this connection looks like. Essentially, you create a service that connects to your server, handles emit and subscriptions - sends new message to a Subject. You can return this Subject as an Observable then subscribe to it in your component.

import { Injectable } from '@angular/core';
import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
import { environment } from '../../environments/environment';
import { catchError, tap, switchAll } from 'rxjs/operators';
import { EMPTY, Subject } from 'rxjs';
export const WS_ENDPOINT = environment.wsEndpoint;
  
@Injectable({
  providedIn: 'root'
})
export class DataService {
  private socket$: WebSocketSubject<any>;
  private messagesSubject$ = new Subject();
  public messages$ = this.messagesSubject$.pipe(switchAll(), catchError(e => { throw e }));
  
  public connect(): void {
  
    if (!this.socket$ || this.socket$.closed) {
      this.socket$ = this.getNewWebSocket();
      const messages = this.socket$.pipe(
        tap({
          error: error => console.log(error),
        }), catchError(_ => EMPTY));
      this.messagesSubject$.next(messages);
    }
  }
  
  private getNewWebSocket() {
    return webSocket(WS_ENDPOINT);
  }
  sendMessage(msg: any) {
    this.socket$.next(msg);
  }
  close() {
    this.socket$.complete(); }}

Take a look at this article which describes the workings of a websocket server as well as connection from an Angular app: https://javascript-conference.com/blog/real-time-in-angular-a-journey-into-websocket-and-rxjs/