Fix: Umstellung auf Socket.io für alle Views und Verbesserung der Event-Registrierung

Änderung:
- Alle Views wurden aktualisiert, um den Daemon WebSocket zu deaktivieren und stattdessen Socket.io für die Event-Registrierung zu verwenden.
- Eine neue Methode `setupSocketEvents` wurde hinzugefügt, um die Socket.io-Events zu registrieren und Protokollausgaben für den Status der Registrierung bereitzustellen.
- Die Logik zur Handhabung von WebSocket-Events wurde vereinfacht und verbessert, um die Stabilität und Nachvollziehbarkeit zu erhöhen.

Diese Anpassung sorgt für eine konsistentere Handhabung von WebSocket-Events und verbessert die Benutzererfahrung durch zuverlässigere Datenaktualisierungen.

backend/services/daemonWebSocketBridge.js

@@ -81,7 +81,7 @@ class DaemonWebSocketBridge {
                 case 'familychanged':
                     // Broadcast an alle verbundenen Clients
                     io.emit(message.event, message.data || {});
-                    console.log(`📤 Event ${message.event} an alle Clients weitergeleitet`);
+                    console.log(`📤 Event ${message.event} an alle Clients weitergeleitet:`, message.data || {});
                     break;
                     
                 case 'workerStatus':

frontend/src/components/falukant/StatusBar.vue

@@ -55,20 +55,14 @@ export default {
         ...mapGetters(['menu']),
     },
     async mounted() {
-    await this.fetchStatus();
+        await this.fetchStatus();
-        if (this.socket) {
+        this.setupSocketEvents();
-            this.socket.on("falukantUpdateStatus", this.fetchStatus);
-        }
-        if (this.daemonSocket) {
-            this.daemonSocket.addEventListener("message", this.handleDaemonSocketMessage);
-        }
     },
     beforeUnmount() {
         if (this.socket) {
             this.socket.off("falukantUpdateStatus", this.fetchStatus);
-        }
+            this.socket.off("stock_change", this.fetchStatus);
-        if (this.daemonSocket) {
+            this.socket.off("familychanged", this.fetchStatus);
-            this.daemonSocket.removeEventListener("message", this.handleDaemonSocketMessage);
         }
     },
     methods: {
@@ -110,7 +104,26 @@ export default {
             }
         },
         // Daemon WebSocket deaktiviert - verwende Socket.io Events
-        // Diese Methode wird nicht mehr verwendet
+        setupSocketEvents() {
+            if (this.socket) {
+                this.socket.on('falukantUpdateStatus', (data) => {
+                    console.log('📨 StatusBar: falukantUpdateStatus empfangen:', data);
+                    this.fetchStatus();
+                });
+                this.socket.on('stock_change', (data) => {
+                    console.log('📨 StatusBar: stock_change empfangen:', data);
+                    this.fetchStatus();
+                });
+                this.socket.on('familychanged', (data) => {
+                    console.log('📨 StatusBar: familychanged empfangen:', data);
+                    this.fetchStatus();
+                });
+                console.log('✅ StatusBar: Socket.io Events registriert');
+            } else {
+                console.log('⚠️ StatusBar: Socket.io noch nicht verfügbar');
+                setTimeout(() => this.setupSocketEvents(), 1000);
+            }
+        },
         openPage(url, hasSubmenu = false) {
             if (hasSubmenu) {
                 return;

frontend/src/views/falukant/BankView.vue

@@ -118,16 +118,27 @@ export default {
     };
   },
   computed: {
-    ...mapState(['daemonSocket'])
+    ...mapState(['socket'])
   },
   async mounted() {
     await this.loadBankOverview();
-    if (this.daemonSocket) this.daemonSocket.addEventListener('message', this.handleDaemonMessage);
+    this.setupSocketEvents();
   },
   beforeUnmount() {
-    if (this.daemonSocket) this.daemonSocket.removeEventListener('message', this.handleDaemonMessage);
+    if (this.socket) {
+      this.socket.off('falukantUpdateStatus', this.loadBankOverview);
+    }
   },
   methods: {
+    setupSocketEvents() {
+      if (this.socket) {
+        this.socket.on('falukantUpdateStatus', this.loadBankOverview);
+        console.log('✅ BankView: Socket.io Events registriert');
+      } else {
+        console.log('⚠️ BankView: Socket.io noch nicht verfügbar');
+        setTimeout(() => this.setupSocketEvents(), 1000);
+      }
+    },
     async loadBankOverview() {
       try {
         const { data } = await apiClient.get('/api/falukant/bank/overview');

frontend/src/views/falukant/BranchView.vue

@@ -73,7 +73,7 @@ export default {
         }
 
         // Daemon WebSocket deaktiviert - verwende Socket.io
-        console.log('✅ BranchView: Socket.io Events werden verwendet');
+        this.setupSocketEvents();
 
         // Live-Socket-Events
         [
@@ -116,6 +116,24 @@ export default {
     },
 
     methods: {
+        setupSocketEvents() {
+            if (this.socket) {
+                this.socket.on('falukantBranchUpdate', (data) => {
+                    console.log('📨 BranchView: falukantBranchUpdate empfangen:', data);
+                    this.loadBranches();
+                    this.loadProducts();
+                });
+                this.socket.on('falukantUpdateStatus', (data) => {
+                    console.log('📨 BranchView: falukantUpdateStatus empfangen:', data);
+                    this.loadBranches();
+                    this.loadProducts();
+                });
+                console.log('✅ BranchView: Socket.io Events registriert');
+            } else {
+                console.log('⚠️ BranchView: Socket.io noch nicht verfügbar');
+                setTimeout(() => this.setupSocketEvents(), 1000);
+            }
+        },
         async loadBranches() {
             try {
                 const result = await apiClient.get('/api/falukant/branches');

frontend/src/views/falukant/DirectorView.vue

@@ -92,20 +92,27 @@ export default {
         };
     },
     computed: {
-        ...mapState(['daemonSocket'])
+        ...mapState(['socket'])
     },
     async mounted() {
         await this.loadDirectors();
-        if (this.daemonSocket) {
+        this.setupSocketEvents();
-            this.daemonSocket.addEventListener('message', this.handleDaemonMessage);
-        }
     },
     beforeUnmount() {
-        if (this.daemonSocket) {
+        if (this.socket) {
-            this.daemonSocket.removeEventListener('message', this.handleDaemonMessage);
+            this.socket.off('falukantUpdateStatus', this.loadDirectors);
         }
     },
     methods: {
+        setupSocketEvents() {
+            if (this.socket) {
+                this.socket.on('falukantUpdateStatus', this.loadDirectors);
+                console.log('✅ DirectorView: Socket.io Events registriert');
+            } else {
+                console.log('⚠️ DirectorView: Socket.io noch nicht verfügbar');
+                setTimeout(() => this.setupSocketEvents(), 1000);
+            }
+        },
         async loadDirectors() {
             try {
                 const { data } = await apiClient.get('/api/falukant/directors');

frontend/src/views/falukant/FamilyView.vue

@@ -194,18 +194,26 @@ export default {
         }
     },
     computed: {
-        ...mapState(['socket', 'daemonSocket'])
+        ...mapState(['socket'])
     },
     async mounted() {
         await this.loadFamilyData();
         await this.loadGifts();
         await this.loadMoodAffects();
         await this.loadCharacterAffects();
-        if (this.daemonSocket) {
+        this.setupSocketEvents();
-            this.daemonSocket.addEventListener('message', this.handleDaemonMessage);
-        }
     },
     methods: {
+        setupSocketEvents() {
+            if (this.socket) {
+                this.socket.on('falukantUpdateStatus', this.loadFamilyData);
+                this.socket.on('familychanged', this.loadFamilyData);
+                console.log('✅ FamilyView: Socket.io Events registriert');
+            } else {
+                console.log('⚠️ FamilyView: Socket.io noch nicht verfügbar');
+                setTimeout(() => this.setupSocketEvents(), 1000);
+            }
+        },
         async loadFamilyData() {
             try {
                 const response = await apiClient.get('/api/falukant/family');

frontend/src/views/falukant/HealthView.vue

@@ -67,7 +67,7 @@ export default {
         };
     },
     computed: {
-        ...mapState(['daemonSocket']),
+        ...mapState(['socket']),
         /**
          * Selected measure object based on selectedTr
          */
@@ -87,16 +87,23 @@ export default {
     },
     async mounted() {
         await this.loadHealthData();
-        if (this.daemonSocket) {
+        this.setupSocketEvents();
-            this.daemonSocket.addEventListener('message', this.handleDaemonMessage);
-        }
     },
     beforeUnmount() {
-        if (this.daemonSocket) {
+        if (this.socket) {
-            this.daemonSocket.removeEventListener('message', this.handleDaemonMessage);
+            this.socket.off('falukantUpdateStatus', this.loadHealthData);
         }
     },
     methods: {
+        setupSocketEvents() {
+            if (this.socket) {
+                this.socket.on('falukantUpdateStatus', this.loadHealthData);
+                console.log('✅ HealthView: Socket.io Events registriert');
+            } else {
+                console.log('⚠️ HealthView: Socket.io noch nicht verfügbar');
+                setTimeout(() => this.setupSocketEvents(), 1000);
+            }
+        },
         async loadHealthData() {
             try {
                 const { data } = await apiClient.get('/api/falukant/health');

frontend/src/views/falukant/HouseView.vue

@@ -88,7 +88,7 @@ export default {
         };
     },
     computed: {
-        ...mapState(['socket', 'daemonSocket']),
+        ...mapState(['socket']),
         allRenovated() {
             return Object.values(this.status).every(v => v >= 100);
         }
@@ -190,13 +190,25 @@ export default {
     },
     async mounted() {
         await this.loadData();
-        if (this.socket) this.socket.on('falukantHouseUpdate', this.loadData);
+        this.setupSocketEvents();
-        if (this.daemonSocket) this.daemonSocket.addEventListener('message', this.handleDaemonMessage);
     },
     beforeUnmount() {
-        if (this.socket) this.socket.off('falukantHouseUpdate', this.loadData);
+        if (this.socket) {
-        if (this.daemonSocket) this.daemonSocket.removeEventListener('message', this.handleDaemonMessage);
+            this.socket.off('falukantHouseUpdate', this.loadData);
-    }
+            this.socket.off('falukantUpdateStatus', this.loadData);
+        }
+    },
+    methods: {
+        setupSocketEvents() {
+            if (this.socket) {
+                this.socket.on('falukantHouseUpdate', this.loadData);
+                this.socket.on('falukantUpdateStatus', this.loadData);
+                console.log('✅ HouseView: Socket.io Events registriert');
+            } else {
+                console.log('⚠️ HouseView: Socket.io noch nicht verfügbar');
+                setTimeout(() => this.setupSocketEvents(), 1000);
+            }
+        }
 };
 </script>
 

frontend/src/views/falukant/NobilityView.vue

@@ -62,7 +62,7 @@
       };
     },
     computed: {
-      ...mapState(['daemonSocket', 'falukantData']),
+      ...mapState(['socket', 'falukantData']),
       gender() {
         return this.current.charactersWithNobleTitle[0]?.gender || 'male';
       },
@@ -72,12 +72,23 @@
     },
     async mounted() {
       await this.loadNobility();
-      if (this.daemonSocket) this.daemonSocket.addEventListener('message', this.handleDaemonMessage);
+      this.setupSocketEvents();
     },
     beforeUnmount() {
-      if (this.daemonSocket) this.daemonSocket.removeEventListener('message', this.handleDaemonMessage);
+      if (this.socket) {
+        this.socket.off('falukantUpdateStatus', this.loadNobility);
+      }
     },
     methods: {
+      setupSocketEvents() {
+        if (this.socket) {
+          this.socket.on('falukantUpdateStatus', this.loadNobility);
+          console.log('✅ NobilityView: Socket.io Events registriert');
+        } else {
+          console.log('⚠️ NobilityView: Socket.io noch nicht verfügbar');
+          setTimeout(() => this.setupSocketEvents(), 1000);
+        }
+      },
       async loadNobility() {
         try {
           const { data } = await apiClient.get('/api/falukant/nobility');

frontend/src/views/falukant/OverviewView.vue

@@ -152,7 +152,7 @@ export default {
         };
     },
     computed: {
-        ...mapState(['daemonSocket']),
+        ...mapState(['socket']),
         getAvatarStyle() {
             if (!this.falukantUser) return {};
             const { gender, age } = this.falukantUser.character;
@@ -203,18 +203,20 @@ export default {
             return window.navigator.language || 'en-US';
         },
     },
+    watch: {
+        socket(newSocket) {
+            if (newSocket) {
+                console.log('🔌 Socket.io verfügbar - registriere Events');
+                this.setupSocketEvents();
+            }
+        }
+    },
     async mounted() {
         await this.fetchFalukantUser();
         await this.fetchAllStock();
         await this.fetchProductions();
         // Daemon WebSocket deaktiviert - verwende Socket.io für alle Events
-        if (this.socket) {
+        this.setupSocketEvents();
-            this.socket.on("falukantUserUpdated", this.fetchFalukantUser);
-            this.socket.on("production_ready", this.handleProductionReadyEvent);
-            console.log('✅ FalukantOverviewView: Socket.io Events registriert');
-        } else {
-            console.log('⚠️ FalukantOverviewView: Kein Socket.io verfügbar');
-        }
     },
     beforeUnmount() {
         if (this.socket) {
@@ -224,6 +226,27 @@ export default {
         // Daemon WebSocket deaktiviert - keine Cleanup nötig
     },
     methods: {
+        setupSocketEvents() {
+            if (this.socket) {
+                this.socket.on("falukantUserUpdated", this.fetchFalukantUser);
+                this.socket.on("production_ready", this.handleProductionReadyEvent);
+                this.socket.on("falukantUpdateStatus", (data) => {
+                    console.log('📨 FalukantOverviewView: falukantUpdateStatus empfangen:', data);
+                    this.fetchFalukantUser();
+                });
+                this.socket.on("falukantBranchUpdate", (data) => {
+                    console.log('📨 FalukantOverviewView: falukantBranchUpdate empfangen:', data);
+                    this.fetchFalukantUser();
+                });
+                console.log('✅ FalukantOverviewView: Socket.io Events registriert');
+            } else {
+                console.log('⚠️ FalukantOverviewView: Socket.io noch nicht verfügbar, versuche es später...');
+                // Versuche es nach kurzer Verzögerung erneut
+                setTimeout(() => {
+                    this.setupSocketEvents();
+                }, 1000);
+            }
+        },
         getAgeGroup(age) {
             if (age <= 1) return "0-1";
             if (age <= 3) return "2-3";