reconect when socket close

src/app/modules/overview/overall-ground/overall-ground.component.ts

@@ -1,7 +1,7 @@
-import {ChangeDetectorRef, Component, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import {SocketService} from "../../../shared/services/socket.service";
 import {Subscription} from "rxjs";
-import * as L from "leaflet";
+
 
 @Component({
   selector: 'app-overall-ground',

src/app/modules/overview/overview.module.ts

@@ -6,9 +6,8 @@ import {RouterModule} from "@angular/router";
 import {overviewRoutes} from "./overview.routing";
 import {MapComponent} from "./map/map.component";
 import {SharedMaterialModule} from "../../shared/shared-material.module";
-import {MatIconModule} from "@angular/material/icon";
 import { CameraStreamComponent } from './camera-stream/camera-stream.component';
-import {FormsModule} from "@angular/forms";
+
 
 @NgModule({
   declarations: [

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, catchError, delayWhen, EMPTY, Observable, retryWhen, Subject, tap, timer} 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);