torsten/yourpart3
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Ä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.
This commit is contained in:
Torsten Schulz (local)
2025-09-08 12:06:56 +02:00
parent 975a1dd7ca
commit 917b04fb5e
10 changed files with 159 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/components/falukant/StatusBar.vue
View File

@@ -55,20 +55,14 @@ export default {
...mapGetters(['menu']),
},
async mounted() {
await this.fetchStatus();
if (this.socket) {
this.socket.on("falukantUpdateStatus", this.fetchStatus);
}
if (this.daemonSocket) {
this.daemonSocket.addEventListener("message", this.handleDaemonSocketMessage);
}
await this.fetchStatus();
this.setupSocketEvents();
},
beforeUnmount() {
if (this.socket) {
this.socket.off("falukantUpdateStatus", this.fetchStatus);
}
if (this.daemonSocket) {
this.daemonSocket.removeEventListener("message", this.handleDaemonSocketMessage);
this.socket.off("stock_change", this.fetchStatus);
this.socket.off("familychanged", this.fetchStatus);
}
},
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;

17
frontend/src/views/falukant/BankView.vue
View File

@@ -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');

20
frontend/src/views/falukant/BranchView.vue
View File

@@ -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');

19
frontend/src/views/falukant/DirectorView.vue
View File

@@ -92,20 +92,27 @@ export default {
};
},
computed: {
...mapState(['daemonSocket'])
...mapState(['socket'])
},
async mounted() {
await this.loadDirectors();
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.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');

16
frontend/src/views/falukant/FamilyView.vue
View File

@@ -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.daemonSocket.addEventListener('message', this.handleDaemonMessage);
}
this.setupSocketEvents();
},
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');

19
frontend/src/views/falukant/HealthView.vue
View File

@@ -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.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.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');

24
frontend/src/views/falukant/HouseView.vue
View File

@@ -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);
if (this.daemonSocket) this.daemonSocket.addEventListener('message', this.handleDaemonMessage);
this.setupSocketEvents();
},
beforeUnmount() {
if (this.socket) this.socket.off('falukantHouseUpdate', this.loadData);
if (this.daemonSocket) this.daemonSocket.removeEventListener('message', this.handleDaemonMessage);
}
if (this.socket) {
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>

17
frontend/src/views/falukant/NobilityView.vue
View File

@@ -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');

39
frontend/src/views/falukant/OverviewView.vue
View File

@@ -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.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');
}
this.setupSocketEvents();
},
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";