Reconnect when the socket closes

src/app/shared/services/socket.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
-import { BehaviorSubject, Subject } from "rxjs";
+import { BehaviorSubject,Subject } from "rxjs";
 import { config } from "../../../assets/config/config";
 
 
@@ -10,8 +10,7 @@ import { config } from "../../../assets/config/config";
 export class SocketService {
   gateway = config.gateway;
 
-
-  websocket$!: WebSocketSubject<any> ;
+  websocket$: WebSocketSubject<any> | undefined  ;
   private isConnected: boolean = false;
   private messagesSubject$ = new Subject();
   public messages$ = this.messagesSubject$.asObservable();
@@ -20,22 +19,25 @@ export class SocketService {
 
   constructor() {
   }
-  public connect(cfg: { reconnect: boolean } = {reconnect: false}): void {
-    if (!this.websocket$ || this.websocket$.closed) {
-      console.log('Trying to open a WebSocket connection…');
+
+  public connect(cfg: { reconnect: boolean } = { reconnect: false }): void {
+    if (cfg.reconnect || !this.websocket$ || this.websocket$.closed) {
+      console.log(cfg.reconnect ? 'Reconnecting WebSocket…' : 'Trying to open a WebSocket connection…');
       this.websocket$ = this.getNewWebSocket();
       this.websocket$.subscribe((messages) => {
         this.messagesSubject$.next(messages);
       });
     }
+
   }
 
   close() {
-    this.websocket$.complete();
+    this.websocket$?.complete();
+    this.websocket$ = undefined;
   }
 
   sendMessage(msg: any) {
-    this.websocket$.next(msg);
+    this.websocket$?.next(msg);
   }
 
   private getNewWebSocket() {
@@ -51,6 +53,7 @@ export class SocketService {
       closeObserver: {
         next: () => {
           console.log('Connection closed');
+          this.websocket$ = undefined;
           this.isConnected = false;
           this.connect({reconnect: true});
           this.statusSubject.next(this.isConnected);