WebSocket en Angular

1. WebSockets en Angular
2. Utiliser RxJS pour implémenter WebSockets dans Angular

Nous allons introduire WebSockets dans Angular avec un exemple.

WebSockets en Angular

Un WebSocket est une connexion persistante entre un client et un serveur. Il fournit un canal bidirectionnel et en duplex intégral qui fonctionne sur HTTP.

Cette opération s’effectue via une connexion socket TCP/IP unique. Le meilleur exemple de l’utilisation de WebSockets est dans les applications de chat.

Les applications de chat fonctionnent sur WebSockets et fournissent une connexion en temps réel qui envoie et reçoit des messages en temps réel.

Ce tutoriel montre comment utiliser WebSocket dans notre application Angular. La meilleure façon d’utiliser WebSocket dans notre application Angular consiste à encapsuler notre WebSocket et nos événements en service.

Et nous pouvons utiliser ce service dans n’importe quel composant que nous voulons utiliser.

Créons une nouvelle application Angular pour commencer à travailler avec WebSocket dans l’application Angular. Nous pouvons créer une nouvelle application Angular en utilisant la commande suivante.

# angular
ng new my_app

Une fois notre application créée, nous irons dans notre dossier d’application à l’aide de la commande suivante.

# angular
cd my_app

Nous allons exécuter notre application en utilisant la commande suivante comme indiqué ci-dessous.

# angular
ng serve

Utiliser RxJS pour implémenter WebSockets dans Angular

Pour commencer, nous devons créer un service très simple qui se connectera à une URL donnée et renverra un sujet RxJS. Ce sujet RxJS sera abonné à tous les services ou composants dans lesquels nous voulons écouter tout nouveau message entrant de la prise connectée.

Nous pouvons créer un nouveau service à l’aide de la commande suivante, comme indiqué ci-dessous.

# angular
ng g service websocketchat

Une fois que nous aurons créé notre nouveau service, nous importerons * depuis la bibliothèque rxjs de notre service. Cela nous permettra de créer le sujet qui peut fonctionner à la fois comme observateur et comme observable.

Notre sujet surveillera tous les messages entrants, et il diffusera également les messages à tous les composants qui se sont abonnés à ce sujet.

Notre code dans notre service ressemblera à ce qui suit.

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);
  }
}

Maintenant que nous avons créé notre service websocketchat, nous avons besoin d’un autre service qui s’interfacera avec notre WebSocket et jouera le rôle d’adaptateur. Il adaptera la sortie du WebSocket sous une forme facilement utilisable sur le front-end.

Nous nommerons notre service chatservice, qui peut être facilement créé en utilisant la commande suivante ci-dessous.

# angular
ng g service chatservice

Une fois que nous aurons créé notre nouveau service, nous importerons notre service websocketchat et observable depuis la bibliothèque rxjs. Nous définirons également notre URL de chat.

Nous allons créer une interface de messages pour définir l'utilisateur du message et le messageContent comme indiqué ci-dessous.

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,
        };
      }))
    );
  }
}

Nous allons mettre à jour notre fichier app.component.ts en important nos deux services dans notre composant. Nous enverrons des messages comme indiqué ci-dessous.

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 = '';
  }
}

Nous allons maintenant créer une interface pour notre application dans laquelle nous allons créer un bouton qui enverra des messages chaque fois que nous cliquerons dessus, comme indiqué ci-dessous.

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

Maintenant, essayons de vérifier comment cela fonctionne.

Lorsque nous cliquons sur le bouton d’envoi, il enverra le message suivant dans la console.

Comme vous pouvez le voir dans l’exemple ci-dessus, il est très facile d’implémenter WebSockets en utilisant rxjs.

Démo ici