tengo tres paginas Página de inicio, página de chat y página de navegación superior con icono de chat. Cuando un usuario recibe un mensaje nuevo, quiero mostrar una insignia con el ícono de chat en la parte superior de navegación. Para eso mantengo una marca en el modelo de chat llamada seen. Es un booleano. Si visto es falso , tomaré un conteo de los registros que son falsos y mostraré el conteo en la placa con el ícono de chat. Para esto, he escrito un método en las principales navegaciones ngOnit() para verificar el modelo de chat si tiene algún mensaje no visto. Siento que afecta el rendimiento porque si golpea la API cada segundo. ¿Hay alguna manera mejor que setInterval ?
TS de navegación superior
ngOnInit() { setInterval(() => { //API Call }, 1000); }En lugar de presionar la API continuamente, debería considerar configurar un servidor websocket . Puede conectarse a su servidor desde la aplicación Angular para emit y listen mensajes en tiempo real.
Así es como se ve un servidor websocket simple en 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(); }) }); En su aplicación Angular, así es como se ve un servicio del lado del cliente para manejar esta conexión. Esencialmente, crea un servicio que se conecta a su servidor, maneja la emit y subscriptions : envía un nuevo mensaje a un Subject . Puede devolver este Subject como un Observable y luego suscribirse a él en su componente.
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(); }} Eche un vistazo a este artículo que describe el funcionamiento de un servidor websocket , así como la conexión desde una aplicación Angular : https://javascript-conference.com/blog/real-time-in-angular-a-journey-into-websocket -y-rxjs/