WebSocket en Angular

1. WebSockets en Angular
2. Use RxJS para implementar WebSockets en Angular

Presentaremos WebSockets en Angular con un ejemplo.

WebSockets en Angular

Un WebSocket es una conexión persistente entre un cliente y un servidor. Proporciona un canal bidireccional y full-duplex que opera sobre HTTP.

Esta operación se realiza a través de una única conexión de socket TCP/IP. El mejor ejemplo del uso de WebSockets está en las aplicaciones de chat.

Las aplicaciones de chat funcionan en WebSockets y proporcionan una conexión en tiempo real que envía y recibe mensajes en tiempo real.

Este tutorial demuestra cómo usar WebSocket en nuestra aplicación Angular. La mejor forma de usar WebSocket en nuestra aplicación Angular es encapsular nuestro WebSocket y los eventos en servicio.

Y podemos usar ese servicio en cualquier componente que queramos usarlo.

Creemos una nueva aplicación Angular para comenzar a trabajar con WebSocket en la aplicación Angular. Podemos crear una nueva aplicación Angular usando el siguiente comando.

# angular
ng new my_app

Una vez creada nuestra aplicación, iremos dentro de nuestra carpeta de aplicaciones usando el siguiente comando.

# angular
cd my_app

Ejecutaremos nuestra aplicación usando el siguiente comando como se muestra a continuación.

# angular
ng serve

Use RxJS para implementar WebSockets en Angular

Para comenzar, necesitamos crear un servicio muy simple que se conectará a una URL determinada y devolverá un asunto RxJS. Este sujeto RxJS se suscribirá a cualquier servicio o componente en el que queramos escuchar nuevos mensajes entrantes desde el socket conectado.

Podemos crear un nuevo servicio usando el siguiente comando como se muestra a continuación.

# angular
ng g service websocketchat

Una vez que hayamos creado nuestro nuevo servicio, importaremos * de la biblioteca rxjs de nuestro servicio. Nos permitirá crear el sujeto que puede funcionar tanto como observador como observable.

Nuestro sujeto observará cualquier mensaje entrante y también transmitirá los mensajes a cualquier componente que se haya suscrito a ese sujeto.

Nuestro código en nuestro servicio se verá como el siguiente.

import { Injectable } from '@angular/core';
import * as Rj from 'rxjs';

@Injectable()
export class WebsocketChatService {
  constructor() {}

  private subject: Rj.Subject<MessageEvent>;

  public connect(url): Rj.Subject<MessageEvent> {
    if (!this.subject) {
      this.subject = this.create(url);
      console.log('Successfully connected To: ' + url);
    }
    return this.subject;
  }

  private create(url): Rj.Subject<MessageEvent> {
    let wsc = new WebSocket(url);

    let observable = Rj.Observable.create((obs: Rj.Observer<MessageEvent>) => {
      wsc.onmessage = obs.next.bind(obs);
      wsc.onerror = obs.error.bind(obs);
      wsc.onclose = obs.complete.bind(obs);
      return wsc.close.bind(wsc);
    });
    let observer = {
      next: (data: Object) => {
        if (wsc.readyState === WebSocket.OPEN) {
          wsc.send(JSON.stringify(data));
        }
      },
    };
    return Rj.Subject.create(observer, observable);
  }
}

Ahora que hemos creado nuestro servicio websocketchat, necesitamos otro servicio que interactúe con nuestro WebSocket y actúe como un adaptador. Adaptará la salida de WebSocket en un formulario que se pueda usar fácilmente en el front-end.

Llamaremos a nuestro servicio chatservice, que se puede crear fácilmente usando el siguiente comando a continuación.

# angular
ng g service chatservice

Una vez que hayamos creado nuestro nuevo servicio, importaremos nuestro servicio websocketchat y observable de la biblioteca rxjs. Definiremos nuestra URL de chat también.

Crearemos una interfaz de mensajes para definir el usuario del mensaje y el contenido del mensaje como se muestra a continuación.

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { map } from 'rxjs/operators';

import { WebsocketChatService } from './websocketchat.service';

const CHAT_URL = 'wss://echo.websocket.org/';

export interface Message {
  user: string;
  messageContent: string;
}

@Injectable()
export class ChatService {
  public messages: Subject<Message>;

  constructor(wscService: WebsocketChatService) {
    this.messages = <Subject<Message>>(
      wscService.connect(CHAT_URL).pipe(map((response: MessageEvent): Message => {
        let content = JSON.parse(response.data);
        return {
          user: content.user,
          messageContent: content.messageContent,
        };
      }))
    );
  }
}

Actualizaremos nuestro archivo app.component.ts importando nuestros dos servicios a nuestro componente. Enviaremos mensajes como se muestra a continuación.

import { Component } from '@angular/core';
import { WebsocketChatService } from './websocketchat.service';
import { ChatService } from './chatservice.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [WebsocketChatService, ChatService],
})
export class AppComponent {
  constructor(private chatService: ChatService) {
    chatService.messages.subscribe((msg) => {
      console.log('Response recieved from websocket: ' + msg);
    });
  }

  private message = {
    user: 'Husnain',
    messageContent: 'Hello World!',
  };

  sendMessage() {
    console.log('new message from the client: ', this.message);
    this.chatService.messages.next(this.message);
    this.message.messageContent = '';
  }
}

Ahora crearemos un front-end para nuestra aplicación en el que crearemos un botón que enviará mensajes cada vez que hagamos clic en él, como se muestra a continuación.

<h1>Send Message by clicking button</h1>
<button (click)="sendMessage()">Send</button>

Ahora, intentemos y verifiquemos cómo funciona.

Cuando hacemos clic en el botón enviar, enviará el siguiente mensaje en la consola.

Como puede ver en el ejemplo anterior, es muy fácil implementar WebSockets usando rxjs.

Demostración aquí