WebSocket in Angular

1. WebSockets in Angular
2. Verwenden Sie RxJS, um WebSockets in Angular zu implementieren

Wir stellen WebSockets in Angular anhand eines Beispiels vor.

WebSockets in Angular

Ein WebSocket ist eine dauerhafte Verbindung zwischen einem Client und einem Server. Es bietet einen bidirektionalen und Vollduplex-Kanal, der über HTTP betrieben wird.

Dieser Vorgang erfolgt über eine einzelne TCP/IP-Socket-Verbindung. Das beste Beispiel für die Verwendung von WebSockets sind Chat-Anwendungen.

Chat-Anwendungen funktionieren auf WebSockets und bieten eine Echtzeitverbindung, die Nachrichten in Echtzeit sendet und empfängt.

Dieses Tutorial zeigt, wie Sie WebSocket in unserer Angular-Anwendung verwenden. Der beste Weg, WebSocket in unserer Angular-Anwendung zu verwenden, besteht darin, unseren WebSocket und Ereignisse im Dienst zu kapseln.

Und wir können diesen Dienst in jeder Komponente verwenden, die wir verwenden möchten.

Lassen Sie uns eine neue Angular-Anwendung erstellen, um mit der Arbeit mit WebSocket in der Angular-Anwendung zu beginnen. Mit dem folgenden Befehl können wir eine neue Angular-Anwendung erstellen.

# angular
ng new my_app

Sobald unsere Anwendung erstellt ist, gehen wir mit dem folgenden Befehl in unseren Anwendungsordner.

# angular
cd my_app

Wir werden unsere Anwendung mit dem folgenden Befehl ausführen, wie unten gezeigt.

# angular
ng serve

Verwenden Sie RxJS, um WebSockets in Angular zu implementieren

Um zu beginnen, müssen wir einen sehr einfachen Dienst erstellen, der eine Verbindung zu einer bestimmten URL herstellt und einen RxJS-Betreff zurückgibt. Dieses RxJS-Subjekt wird für alle Dienste oder Komponenten abonniert, in denen wir auf neue eingehende Nachrichten vom verbundenen Socket lauschen möchten.

Wir können einen neuen Dienst mit dem folgenden Befehl erstellen, wie unten gezeigt.

# angular
ng g service websocketchat

Sobald wir unseren neuen Dienst erstellt haben, importieren wir * aus der rxjs-Bibliothek unseres Dienstes. Es wird uns ermöglichen, das Subjekt zu schaffen, das sowohl als Beobachter als auch als Beobachtbares funktionieren kann.

Unser Betreff wird nach eingehenden Nachrichten Ausschau halten und die Nachrichten auch an alle Komponenten senden, die diesen Betreff abonniert haben.

Unser Code in unserem Service sieht wie folgt aus.

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

Nachdem wir unseren Dienst websocketchat erstellt haben, benötigen wir einen weiteren Dienst, der mit unserem WebSocket verbunden ist und als Adapter fungiert. Es passt die Ausgabe von WebSocket in ein Formular an, das einfach auf dem Frontend verwendet werden kann.

Wir werden unseren Dienst chatservice nennen, der einfach mit dem folgenden Befehl unten erstellt werden kann.

# angular
ng g service chatservice

Sobald wir unseren neuen Dienst erstellt haben, importieren wir unseren Dienst websocketchat und observable aus der Bibliothek rxjs. Wir werden auch unsere Chat-URL definieren.

Wir werden eine Nachrichtenschnittstelle erstellen, um den Benutzer der Nachricht und den messageContent wie unten gezeigt zu definieren.

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

Wir werden unsere Datei app.component.ts aktualisieren, indem wir unsere beiden Dienste in unsere Komponente importieren. Wir werden Nachrichten wie unten gezeigt senden.

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

Jetzt erstellen wir ein Frontend für unsere Anwendung, in dem wir eine Schaltfläche erstellen, die Nachrichten sendet, wenn wir darauf klicken, wie unten gezeigt.

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

Lassen Sie uns nun versuchen, zu überprüfen, wie es funktioniert.

Wenn wir auf die Schaltfläche Senden klicken, wird die folgende Nachricht in der Konsole gesendet.

Wie Sie am obigen Beispiel sehen können, ist es sehr einfach, WebSockets mit rxjs zu implementieren.

Demo hier