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);
}
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.
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 => {
OnError(error);
});
ws.on('close', ws=> {
onClose();
})
});
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/