Minimal Angular WebSocket Service

websocket.service.ts

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

const WS_SERVER_URL = '<YOUR_WEBSOCKET_URL>';

@Injectable({ providedIn: 'root' })
export class WebsocketService {
  private ws$ = new ReplaySubject<WebSocket>(1);

  constructor() {
    const socket = new WebSocket(WS_SERVER_URL);
    socket.onopen = () => {
      console.log('Successfully connected to the WebSocket at', WS_SERVER_URL);
      this.ws$.next(socket);
    };
  }

  public listen<T = any>(): Observable<T> {
    return this.ws$.pipe(
      switchMap(
        (socket) =>
          new Observable((subscriber: Observer<MessageEvent<T>>) => {
            socket.onmessage = (message) => subscriber.next(message);
            socket.onerror = (error) => subscriber.error(error);
            socket.onclose = () => subscriber.complete();
            return () => socket.close();
          })
      ),
      map((event: MessageEvent<T>) => event.data)
    );
  }

  public send(data: unknown): void {
    this.ws$.subscribe((socket) => {
      socket.send(JSON.stringify(data));
    });
  }
}