Actualización de datos en tiempo real en Angular: Implementación de WebSockets

La actualización de datos en tiempo real es cada vez más importante en el vertiginoso entorno digital actual. Los usuarios esperan ver la nueva información tan pronto como esté disponible, sin tener que actualizar manualmente la página. En esta entrada de blog, te mostraremos cómo implementar actualizaciones de datos en tiempo real en una aplicación Angular utilizando WebSockets.

Te guiaremos a través del proceso de configuración de una conexión WebSocket, la suscripción a las actualizaciones y la actualización de los datos en tiempo real. Si estás construyendo una aplicación de chat, un panel de control en vivo, o cualquier otro tipo de aplicación que requiera datos en tiempo real, esta guía te ayudará a empezar.

Si tu quieres aprender más acerca de angular, recuerda que tenemos curso. 🥳

Configuración del servicio WebSocket

Para implementar WebSockets en una aplicación Angular, sólo tendrás que utilizar la API WebSocket proporcionada por el navegador y envolverla en un Observable utilizando RxJS. Aquí tienes un ejemplo de cómo puedes crear un Observable a partir de una conexión WebSocket:x

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

@Injectable({
  providedIn: 'root'
})
export class WebSocketService {
  private socket: WebSocket;
  
  constructor() {
    this.socket = new WebSocket('ws://localhost:3000');
  }
  
  public connect(): Observable<any> {
    return new Observable(observer => {
      this.socket.onmessage = (event) => observer.next(event.data);
      this.socket.onerror = (event) => observer.error(event);
      this.socket.onclose = () => observer.complete();
    });
  }

  public sendMessage(message: string): void {
    this.socket.send(message);
  }
}

En este ejemplo, creamos un WebSocketService que envuelve una conexión WebSocket en un Observable. El método connect devuelve un Observable al que podemos suscribirnos para recibir mensajes del WebSocket. El método sendMessage nos permite enviar mensajes a través del WebSocket.

Usando nuestro servicio WebSocket

WebSocketService es una potente herramienta para trabajar con WebSockets en una aplicación Angular. Envolviendo una conexión WebSocket en un Observable, podemos recibir fácilmente actualizaciones en tiempo real. Aquí tienes un ejemplo de cómo empezar a usar WebSocketService:

Configurar la conexión WebSocket

Para configurar una conexión WebSocket, podemos crear una instancia de WebSocketService y llamar al método connect:

import { Component, OnInit } from '@angular/core';
import { WebSocketService } from './websocket.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  constructor(private webSocketService: WebSocketService) { }

  ngOnInit(): void {
    this.webSocketService.connect();
  }
}

En este ejemplo, inyectamos WebSocketService en nuestro componente y llamamos al método connect en el hook del ciclo de vida ngOnInit.

Suscribirse al WebSocket y gestionar los mensajes entrantes
Para recibir mensajes entrantes del WebSocket, podemos suscribirnos al Observable devuelto por el método connect. He aquí un ejemplo:

import { Component, OnInit } from '@angular/core';
import { WebSocketService } from './websocket.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  public messages: string[] = [];

  constructor(private webSocketService: WebSocketService) { }

  ngOnInit(): void {
    this.webSocketService.connect().subscribe(
      (message) => {
        this.messages.push(message);
      },
      (error) => {
        console.error(error);
      }
    );
  }
}

En este ejemplo, nos suscribimos al Observable devuelto por el método connect y gestionamos los mensajes entrantes en la primera llamada de retorno. Añadimos cada nuevo mensaje a un array de mensajes. También manejamos los errores en el segundo callback.

Actualizar la interfaz de usuario con datos en tiempo real

Ahora que estamos recibiendo actualizaciones en tiempo real, podemos actualizar nuestra interfaz de usuario para mostrar los nuevos datos. He aquí un ejemplo:

import { Component, OnInit } from '@angular/core';
import { WebSocketService } from './websocket.service';

@Component({
  selector: 'app-my-component',
  template: `
    <div *ngFor="let message of messages">
      {{ message }}
    </div>`,
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  public messages: string[] = [];

  constructor(private webSocketService: WebSocketService) { }

  ngOnInit(): void {
    this.webSocketService.connect().subscribe(
      (message) => {
        this.messages.push(message);
      },
      (error) => {
        console.error(error);
      }
    );
  }
}

En este ejemplo, utilizamos *ngFor para recorrer la matriz de mensajes y mostrar cada mensaje en un div.

Enviar mensajes a través del WebSocket

Para enviar mensajes a través del WebSocket, podemos llamar al método sendMessage en WebSocketService. He aquí un ejemplo:

import { Component } from '@angular/core';
import { WebSocketService } from './websocket.service';

@Component({
  selector: 'app-my-component',
  template: `
    <input type="text" [(ngModel)]="message">
    <div *ngFor="let message of messages">
      {{ message }}
    </div>`,
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  public messages: string[] = [];
  public message: string = '';

  constructor(private webSocketService: WebSocketService) { }

  ngOnInit(): void {
    this.webSocketService.connect().subscribe(
      (message) => {
        this.messages.push(message);
      },
      (error) => {
        console.error(error);
      }
    );
  }

  sendMessage(): void {
    this.webSocketService.sendMessage(this.message);
    this.message = '';
  }
}

En este ejemplo, creamos un método llamado sendMessage y añadimos un campo input mapeado a la propiedad message usando two-way binding en ngModel. Llamamos al método sendMessage en WebSocketService y pasamos la propiedad message de nuestro componente. También borramos la propiedad message después de enviar el mensaje.

Conclusión

En esta entrada de blog, te hemos mostrado cómo implementar actualizaciones de datos en tiempo real en una aplicación Angular utilizando WebSockets.

Te hemos guiado a través del proceso de configuración de una conexión WebSocket, la suscripción a las actualizaciones, y la actualización de los datos en tiempo real. También hemos mostrado cómo enviar actualizaciones al servidor.

Siguiendo los pasos descritos en esta guía, podrás añadir funcionalidad en tiempo real a tu aplicación Angular.

Es importante tener en cuenta que esta guía está destinada a proporcionar una introducción básica a WebSockets en Angular, y puede ser necesario ajustarla dependiendo de tu caso de uso específico.

Como siempre, gracias por leer y ¡buena suerte con tus proyectos Angular!

Fuente