Add Socket. Synchronität ist immernoch komisch

src/app/game/game.component.ts

@@ -15,7 +15,6 @@ import {environment} from '../../environments/environment';
 export class GameComponent implements OnInit {
 
   socket: any;
-  init = true;
   sessionName = '';
   isWatchdog = false;
   isExplainer = false;
@@ -65,7 +64,7 @@ export class GameComponent implements OnInit {
       this.fillGamestatus();
       this.team = String(params.get('team'));
       this.socket = io(environment.tabuServerURL);
-      this.listen()
+      this.listen();
     });
     this.startTimer();
   }
@@ -80,9 +79,6 @@ export class GameComponent implements OnInit {
     this.socket.on(this.sessionName + ':endRound', (data: any) => {
       console.log('GAME: ', data);
       if (JSON.parse(data)) {
-        if (this.init) {
-          this.init = false;
-        }
         console.log('GAME END: ', data);
         this.socket.disconnect();
         this.router.navigate([this.sessionName + '/' + this.team]);
@@ -91,6 +87,7 @@ export class GameComponent implements OnInit {
   }
 
   onTimesUp(): void{
+    this.socket.disconnect()
     this.router.navigate([this.sessionName + '/' + this.team]);
   }
 

src/app/guesser/guesser.component.ts

@@ -2,12 +2,15 @@ import { Component, OnInit } from '@angular/core';
 import {TabuMiddlewareService} from '../dao/TabuMiddlewareService';
 import {GameStatus} from '../interface/gameStatus';
 import {ActivatedRoute, Router} from '@angular/router';
+import {io} from 'socket.io-client';
+import {environment} from '../../environments/environment';
 @Component({
   selector: 'app-guesser',
   templateUrl: './guesser.component.html',
   styleUrls: ['./guesser.component.scss']
 })
 export class GuesserComponent implements OnInit {
+  socket: any;
   sessionName = '';
   TIME_LIMIT = 100;
   timePassed = 0;
@@ -30,23 +33,31 @@ export class GuesserComponent implements OnInit {
     this.activatedRoute.paramMap.subscribe(params => {
       this.sessionName = String(params.get('sessionName'));
       this.team = String(params.get('team'));
-      this.service.getGamestatus({spielname: this.sessionName}).then(value => {
-        const status = JSON.parse(value.status);
-        if (status) {
-          this.gameStatus.sessionID = JSON.parse(value.sessionID);
-          this.gameStatus.red = JSON.parse(value.red);
-          this.gameStatus.blue = JSON.parse(value.blue);
-          this.gameStatus.redTurn = JSON.parse(value.redTurn);
-          this.gameStatus.activeExplainer = JSON.parse(value.activeExplainer);
-          this.gameStatus.activeWatchdog = JSON.parse(value.activeWatchdog);
-        }
-        console.log(this.gameStatus);
-      });
+      this.fillGamestatus();
+      this.socket = io(environment.tabuServerURL);
+      this.listen();
     });
     this.startTimer();
   }
 
+  listen(): any {
+    this.socket.on(this.sessionName + ':newCard', (data: any) => {
+      this.service.getCard({cardID: data}).then(value => {
+        this.fillGamestatus();
+      });
+    });
+    this.socket.on(this.sessionName + ':endRound', (data: any) => {
+      console.log('GAME: ', data);
+      if (JSON.parse(data)) {
+        console.log('GAME END: ', data);
+        this.socket.disconnect();
+        this.router.navigate([this.sessionName + '/' + this.team]);
+      }
+    });
+  }
+
   onTimesUp(): void{
+    this.socket.disconnect();
     this.router.navigate([this.sessionName + '/' + this.team]);
   }
 
@@ -65,4 +76,18 @@ export class GuesserComponent implements OnInit {
       this.timeRemaining = this.timeRemaining -= 1;
     }, 1000);
   }
+
+  fillGamestatus(): void {
+    this.service.getGamestatus({spielname: this.sessionName}).then(value => {
+      const status = JSON.parse(value.status);
+      if (status) {
+        this.gameStatus.sessionID = JSON.parse(value.sessionID);
+        this.gameStatus.red = JSON.parse(value.red);
+        this.gameStatus.blue = JSON.parse(value.blue);
+        this.gameStatus.redTurn = JSON.parse(value.redTurn);
+        this.gameStatus.activeExplainer = JSON.parse(value.activeExplainer);
+        this.gameStatus.activeWatchdog = JSON.parse(value.activeWatchdog);
+      }
+    });
+  }
 }

src/app/overview/overview.component.ts

@@ -56,6 +56,7 @@ export class OverviewComponent implements OnInit {
         this.membership = 'Wähle dein Team';
       }
       else {
+        this.socket.disconnect();
         this.router.navigate(['error']);
         return;
       }
@@ -71,12 +72,12 @@ export class OverviewComponent implements OnInit {
         console.log('OVERVIEW: ', data);
         if (((this.team === 'red' && this.nextTeam === 'Rot') || (this.team === 'blue' && this.nextTeam === 'Blau'))
           && !this.wantToBeExplainer) {
-          this.socket.disconnect();
           console.log('OVERVIEW GO GUESSER: ', data);
+          this.socket.disconnect();
           this.router.navigate([this.sessionName + '/' + this.team + '/guesser']);
         } else if ((this.team === 'red' || this.team === 'blue') && !this.wantToBeExplainer) {
-          this.socket.disconnect();
           console.log('OVERVIEW GO WATCHDOG: ', data);
+          this.socket.disconnect();
           this.router.navigate([this.sessionName + '/' + this.team + '/watchdog']);
         }
       }
@@ -97,11 +98,13 @@ export class OverviewComponent implements OnInit {
   nextRound(): void {
     this.wantToBeExplainer = true;
     this.service.newRound({spielname: this.sessionName});
+    this.socket.disconnect()
     this.router.navigate([this.router.url + '/explainer']);
   }
 
   joinTeam(team: string): void {
     this.team = team;
+    this.socket.disconnect()
     this.router.navigate([this.sessionName + '/' + team]);
   }
 

src/environments/environment.ts

@@ -4,8 +4,8 @@
 
 export const environment = {
   production: false,
-  //tabuMiddlewareURL: 'http://localhost:8080/',
-  tabuMiddlewareURL: 'http://tabu-middleware.willers.digital/',
+  tabuMiddlewareURL: 'http://localhost:8080/',
+  //tabuMiddlewareURL: 'http://tabu-middleware.willers.digital/',
   tabuServerURL: 'http://localhost:3000/'
   //tabuServerURL: 'ws://tabu-server.willers.digital'
 };