Enhance Socket.IO integration and improve error handling

- Updated CORS configuration for Socket.IO to allow all origins and added specific allowed headers.
- Improved error handling for Socket.IO connections, including detailed logging for connection errors and upgrade attempts.
- Implemented cleanup logic for socket connections during page reloads to prevent stale connections.
- Enhanced reconnection logic with unlimited attempts and improved logging for connection status.
- Updated frontend socket service to manage club room joining and leaving more effectively, with better state handling.
- Configured Vite for improved hot module replacement (HMR) settings to support local development.

backend/services/socketService.js

@@ -3,46 +3,140 @@ import { Server } from 'socket.io';
 let io = null;
 
 export const initializeSocketIO = (httpServer) => {
+  // Verhindere doppelte Initialisierung
+  if (io) {
+    console.warn('⚠️  Socket.IO wurde bereits initialisiert. Überspringe erneute Initialisierung.');
+    return io;
+  }
+
   io = new Server(httpServer, {
     cors: {
-      origin: true,
+      origin: (origin, callback) => {
+        // Erlaube alle Origins für Socket.IO (da wir direkten HTTPS-Zugang haben)
+        callback(null, true);
+      },
       credentials: true,
-      methods: ['GET', 'POST']
+      methods: ['GET', 'POST'],
+      allowedHeaders: ['Content-Type', 'Authorization', 'authcode', 'userid']
     },
     // Wichtig für Reverse Proxy (Apache/Nginx): Path und Transports explizit setzen
     path: '/socket.io/',
-    transports: ['websocket', 'polling'],
+    transports: ['polling', 'websocket'], // Polling zuerst für bessere Kompatibilität
     // Erlaube Upgrade von polling zu websocket
     allowUpgrades: true,
-    // Timeout für Upgrade
-    upgradeTimeout: 10000,
+    // Timeout für Upgrade - erhöht für bessere Kompatibilität
+    upgradeTimeout: 30000,
     // Ping-Timeout für Verbindungen
     pingTimeout: 60000,
     pingInterval: 25000,
     // Wichtig für Reverse Proxy: Erlaube WebSocket-Upgrades auch ohne Origin-Header
     allowEIO3: true,
     // Erlaube WebSocket-Upgrades auch wenn der Request von einem Proxy kommt
-    serveClient: false
+    serveClient: false,
+    // Verbesserte Cookie-Handling für Cross-Origin
+    cookie: {
+      name: 'io',
+      httpOnly: false,
+      sameSite: 'lax',
+      path: '/'
+    },
+    // Erlaube Cross-Origin-Verbindungen
+    connectTimeout: 45000,
+    // Erlaube WebSocket-Upgrades auch bei Cross-Origin
+    perMessageDeflate: false, // Deaktiviert für bessere Kompatibilität
+    maxHttpBufferSize: 1e6 // 1MB
+  });
+  
+  // Verbesserte WebSocket-Upgrade-Logging
+  io.engine.on('upgrade', (req, socket, head) => {
+    console.log(`🔄 Socket.IO Upgrade-Versuch: ${req.url}`);
+    console.log(`   Headers:`, req.headers);
+  });
+  
+  io.engine.on('upgradeError', (err, req, socket, head) => {
+    console.error('❌ Socket.IO Upgrade Error:', err.message || err);
+    if (req) {
+      console.error('   URL:', req.url);
+      console.error('   Headers:', req.headers);
+      console.error('   Method:', req.method);
+    }
+    if (err.stack) {
+      console.error('   Stack:', err.stack);
+    }
+  });
+
+  // Error-Handling für Socket.IO
+  io.engine.on('connection_error', (err) => {
+    // "Session ID unknown" ist normal nach Server-Neustarts - weniger alarmierend loggen
+    if (err.message && err.message.includes('Session ID unknown')) {
+      console.warn('⚠️  Socket.IO: Unbekannte Session-ID (normal nach Server-Neustart)');
+      if (err.context && err.context.sid) {
+        console.warn(`   Session-ID: ${err.context.sid}`);
+      }
+      // Client wird automatisch reconnecten - kein weiteres Action nötig
+      return;
+    }
+    
+    // Andere Fehler normal loggen
+    console.error('❌ Socket.IO Connection Error:', err.message || err);
+    if (err.req) {
+      console.error('   Request:', err.req.url);
+      console.error('   Method:', err.req.method);
+    }
+    console.error('   Code:', err.code);
+    console.error('   Type:', err.type);
+    console.error('   Context:', err.context);
+    if (err.stack) {
+      console.error('   Stack:', err.stack);
+    }
+  });
+  
+  // Detailliertes Request-Logging für Debugging
+  io.engine.on('initial_headers', (headers, req) => {
+    // Logge nur bei Problemen
+    if (process.env.DEBUG_SOCKETIO === 'true') {
+      console.log('📡 Socket.IO Request:', req.method, req.url);
+    }
   });
 
   io.on('connection', (socket) => {
+    console.log(`✅ Socket.IO Client verbunden: ${socket.id}`);
+    console.log(`   Transport: ${socket.conn.transport.name}`);
+    console.log(`   Origin: ${socket.handshake.headers.origin || 'unknown'}`);
+
+    // Logge Transport-Upgrades
+    socket.conn.on('upgrade', () => {
+      console.log(`🔄 Socket.IO Transport Upgrade für ${socket.id}: ${socket.conn.transport.name}`);
+    });
+
+    socket.conn.on('upgradeError', (error) => {
+      console.error(`❌ Socket.IO Transport Upgrade Error für ${socket.id}:`, error.message);
+    });
+
     // Client tritt einem Club-Raum bei
     socket.on('join-club', (clubId) => {
       const room = `club-${clubId}`;
       socket.join(room);
+      console.log(`   Client ${socket.id} tritt Raum bei: ${room}`);
     });
 
     // Client verlässt einen Club-Raum
     socket.on('leave-club', (clubId) => {
       const room = `club-${clubId}`;
       socket.leave(room);
+      console.log(`   Client ${socket.id} verlässt Raum: ${room}`);
     });
 
-    socket.on('disconnect', () => {
-      // Socket getrennt
+    socket.on('disconnect', (reason) => {
+      console.log(`❌ Socket.IO Client getrennt: ${socket.id}, Grund: ${reason}`);
+    });
+
+    socket.on('error', (error) => {
+      console.error(`❌ Socket.IO Client Error für ${socket.id}:`, error);
     });
   });
 
+  console.log('✅ Socket.IO erfolgreich initialisiert');
   return io;
 };