Instant Messaging Chat App

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { WebSocketSubject, webSocket } from 'rxjs/webSocket';

@Injectable({
  providedIn: 'root'
})
export class WebsocketService {
  private chatWebSocket: WebSocketSubject<any>;

  public connect(url: string): void {
    if (!this.chatWebSocket || this.chatWebSocket.closed) {
      this.chatWebSocket = webSocket(url);
    }
  }

  public sendMessage(message: any): void {
    this.chatWebSocket.next(message);
  }

  public getMessages(): Observable<any> {
    return this.chatWebSocket.asObservable();
  }

  public close(): void {
    this.chatWebSocket.complete();
  }
}

import { Component, OnInit, OnDestroy } from '@angular/core';
import { WebsocketService } from './websocket.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.css']
})
export class ChatComponent implements OnInit, OnDestroy {
  message = '';
  messages: string[] = [];
  private subscription: Subscription;

  constructor(private websocketService: WebsocketService) { }

  ngOnInit(): void {
    this.websocketService.connect('wss://yourwebsocketserver.com');
    this.subscription = this.websocketService.getMessages().subscribe((message: string) => {
      this.messages.push(message);
    });
  }

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

  ngOnDestroy(): void {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
    this.websocketService.close();
  }
}