Repost "want" after reconnect.

Author: softsimon

frontend/src/app/about/about.component.ts

@@ -13,7 +13,7 @@ export class AboutComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    this.apiService.sendWebSocket({'action': 'want', data: []});
+    this.apiService.webSocketWant([]);
   }
 
 }

frontend/src/app/blockchain/blockchain.component.ts

@@ -26,7 +26,7 @@ export class BlockchainComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    this.apiService.sendWebSocket({'action': 'want', data: ['stats', 'blocks', 'projected-blocks']});
+    this.apiService.webSocketWant(['stats', 'blocks', 'projected-blocks']);
 
     this.txTrackingSubscription = this.memPoolService.txTracking$
       .subscribe((response: ITxTracking) => {
@@ -46,14 +46,14 @@ export class BlockchainComponent implements OnInit, OnDestroy {
           return;
         }
         this.txTrackingLoading = true;
-        this.apiService.sendWebSocket({'action': 'track-tx', 'txId': txId});
+        this.apiService.webSocketStartTrackTx(txId);
       });
 
     this.memPoolService.txIdSearch$
       .subscribe((txId) => {
         if (txId) {
           this.txTrackingLoading = true;
-          this.apiService.sendWebSocket({'action': 'track-tx', 'txId': txId});
+          this.apiService.webSocketStartTrackTx(txId);
         }
       });
 

frontend/src/app/services/api.service.ts

@@ -14,6 +14,8 @@ const API_BASE_URL = '/api/v1';
 })
 export class ApiService {
   private websocketSubject: Observable<IMempoolDefaultResponse> = webSocket<IMempoolDefaultResponse | any>(WEB_SOCKET_URL);
+  private lastWant: string[] | null = null;
+  private goneOffline = false;
 
   constructor(
     private httpClient: HttpClient,
@@ -27,7 +29,10 @@ export class ApiService {
       .pipe(
         retryWhen((errors: any) => errors
           .pipe(
-            tap(() => this.memPoolService.isOffline$.next(true)),
+            tap(() => {
+              this.goneOffline = true;
+              this.memPoolService.isOffline$.next(true);
+            }),
             delay(5000),
           )
         ),
@@ -92,17 +97,31 @@ export class ApiService {
           if (response['live-2h-chart']) {
             this.memPoolService.live2Chart$.next(response['live-2h-chart']);
           }
+
+          if (this.goneOffline === true) {
+            this.goneOffline = false;
+            if (this.lastWant) {
+              this.webSocketWant(this.lastWant);
+            }
+          }
         },
         (err: Error) => {
           console.log(err);
+          this.goneOffline = true;
           console.log('Error, retrying in 10 sec');
           setTimeout(() => this.startSubscription(), 10000);
         });
   }
 
-  sendWebSocket(data: any) {
+  webSocketStartTrackTx(txId: string) {
+    // @ts-ignore
+    this.websocketSubject.next({'action': 'track-tx', 'txId': txId});
+  }
+
+  webSocketWant(data: string[]) {
     // @ts-ignore
-    this.websocketSubject.next(data);
+    this.websocketSubject.next({'action': 'want', data: data});
+    this.lastWant = data;
   }
 
   listTransactionsForBlock$(height: number): Observable<IBlockTransaction[]> {

frontend/src/app/statistics/statistics.component.ts

@@ -154,10 +154,10 @@ export class StatisticsComponent implements OnInit {
       switchMap(() => {
         this.spinnerLoading = true;
         if (this.radioGroupForm.controls['dateSpan'].value === '2h') {
-          this.apiService.sendWebSocket({'action': 'want', data: ['live-2h-chart']});
+          this.apiService.webSocketWant(['live-2h-chart']);
           return this.apiService.list2HStatistics$();
         }
-        this.apiService.sendWebSocket({'action': 'want', data: ['']});
+        this.apiService.webSocketWant([]);
         if (this.radioGroupForm.controls['dateSpan'].value === '24h') {
           return this.apiService.list24HStatistics$();
         }

frontend/src/app/television/television.component.ts

@@ -27,7 +27,7 @@ export class TelevisionComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    this.apiService.sendWebSocket({'action': 'want', data: ['projected-blocks', 'live-2h-chart']});
+    this.apiService.webSocketWant(['projected-blocks', 'live-2h-chart']);
 
     const labelInterpolationFnc = (value: any, index: any) => {
       return index % 6  === 0 ? formatDate(value, 'HH:mm', this.locale) : null;