Approvement of reconnection.

src/app/chat/chat.component.ts

@@ -1,13 +1,14 @@
 import {Plugins, AppState} from '@capacitor/core';
 import {AfterViewChecked, AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import {ChatMessage} from '../chat.message';
-import {Host} from '../host';
+import {Setting} from '../setting';
 import {ApiService} from '../api.service';
 import {WebsocketListener} from '../websocket.listener';
 import {WebsocketService} from '../websocket.service';
 import {LocalNotifications} from '@ionic-native/local-notifications/ngx';
 import {BackgroundMode} from '@ionic-native/background-mode/ngx';
-import {ForegroundService} from '@ionic-native/foreground-service/ngx';
+import {AppComponent} from '../app.component';
+import {Platform} from '@ionic/angular';
 
 const {App} = Plugins;
 
@@ -23,6 +24,7 @@ export class ChatComponent implements OnInit, AfterViewInit, AfterViewChecked, W
   url: string;
 
   @ViewChild('chatPostArea') chatPostArea: ElementRef;
+  @ViewChild('errorMessage') errorMessage: ElementRef;
   chatText: string;
 
   private oldScrollHeight = 0;
@@ -30,17 +32,18 @@ export class ChatComponent implements OnInit, AfterViewInit, AfterViewChecked, W
   private messageLimit = 10;
   private hasBeenReloaded = false;
   private hasFocus = true;
+  private isReconnection = false;
 
   public constructor(
     private apiService: ApiService,
     private websocketService: WebsocketService,
     private localNotifications: LocalNotifications,
     private backgroundMode: BackgroundMode,
-    private foregroundService: ForegroundService
+    private platform: Platform
   ) {
     this.userToken = this.apiService.getFromStorage('token');
     this.userId = Number(this.apiService.getFromStorage('userId'));
-    this.url = Host.URL;
+    this.url = Setting.URL;
     this.websocketService.setListener(this);
     this.websocketService.initializeSocket(this.apiService.getFromStorage('chatToken'));
     this.backgroundMode.disableBatteryOptimizations();
@@ -74,19 +77,34 @@ export class ChatComponent implements OnInit, AfterViewInit, AfterViewChecked, W
 
     this.localNotifications.requestPermission();
 
-    this.foregroundService.start('METAsocket', 'The chat for WowApp', 'ic_stat_notification_icon_enabled');
-
-    this.apiService.getChatHistory(this.userToken, this.messageOffset, this.messageLimit).subscribe(
-      (response) => {
-        this.messages = response;
-        this.messageOffset += this.messageLimit;
-      }
-    );
+    this.apiService.getChatHistory(this.userToken, this.messageOffset, this.messageLimit).toPromise()
+      .then(
+        (response) => {
+          response.forEach(
+            (message: ChatMessage) => {
+              this.messages.push(message);
+              this.messageOffset++;
+            }
+          );
+        }
+      ).catch(
+        (error) => {
+          window.alert('Fehler ' + error.status + ': Verbindung zur Web-API gescheitert!');
+        }
+      );
 
     App.addListener('appStateChange', (state: AppState) => {
       this.hasFocus = state.isActive;
     });
 
+    this.platform.backButton.subscribe(
+      () => {
+        if (window.confirm('Möchtest du wirklich ausloggen?')) {
+          this.onLogout();
+        }
+      }
+    );
+
     setInterval(
       () => {
         this.websocketService.sendKeepAliveMessage();
@@ -129,6 +147,12 @@ export class ChatComponent implements OnInit, AfterViewInit, AfterViewChecked, W
     }
   }
 
+  onLogout() {
+    this.apiService.storeData('token', null);
+
+    AppComponent.token = null;
+  }
+
   onChatMessage(message: ChatMessage): void {
     this.messages.push(message);
     this.messageOffset++;
@@ -140,6 +164,40 @@ export class ChatComponent implements OnInit, AfterViewInit, AfterViewChecked, W
     this.triggerNotification(message);
   }
 
+  onConnection(): void
+  {
+    this.errorMessage.nativeElement.style.display = 'none';
+
+    this.apiService.getChatMessagesMissed(this.userToken, this.messages[this.messages.length - 1].id).toPromise()
+      .then(
+        (messagesMissed) => {
+          if (messagesMissed.length === 0) {
+            return;
+          }
+
+          this.messages.concat(messagesMissed);
+          this.messageOffset += messagesMissed.length;
+        }
+      ).catch(
+      (error) => {
+        console.log('Failed to load messages missed after reconnect!', error);
+      }
+    );
+
+    this.isReconnection = true;
+  }
+
+  onReconnect(): void
+  {
+    this.isReconnection = true;
+  }
+
+  onError(message: string): void
+  {
+    this.errorMessage.nativeElement.style.display = 'block';
+    this.errorMessage.nativeElement.innerText = message;
+  }
+
   triggerNotification(message: ChatMessage): void
   {
     this.localNotifications.schedule(
@@ -150,13 +208,24 @@ export class ChatComponent implements OnInit, AfterViewInit, AfterViewChecked, W
         priority: 2,
         lockscreen: true,
         autoClear: true,
-        icon: Host.URL + '/user/' + message.userId + '/avatar?token=' + this.userToken,
+        icon: Setting.URL + '/user/' + message.userId + '/avatar?token=' + this.userToken,
         smallIcon: 'ic_stat_notification_icon_enabled',
-        led: {color: '#ff00ff', on: 500, off: 500},
+        led: '#ff00ff',
         trigger: { at: new Date(new Date().getTime() + 1000) },
         sound: 'file://assets/audio/murloc.wav',
         vibrate: true
       }
     );
   }
+
+  private hasChatMessage(message: ChatMessage): boolean
+  {
+    for (const messageStored of this.messages) {
+      if (messageStored.id === message.id) {
+        return true;
+      }
+    }
+
+    return false;
+  }
 }