From baf5bda6f2cf2404ceddb6ab039b56c1810ad300 Mon Sep 17 00:00:00 2001 From: "Torsten Schulz (local)" Date: Sun, 16 Nov 2025 00:13:30 +0100 Subject: [PATCH] Update Apache configuration to improve WebSocket upgrade handling and enhance logging This commit modifies the Apache configuration to refine the handling of WebSocket upgrades, ensuring better compatibility and reliability. Additionally, it enhances logging for the WebSocket upgrade process, providing more detailed insights into requests and responses, which aids in diagnostics and troubleshooting. --- backend/SOCKET_IO_SSL_SETUP.md | 140 +++++++++++++++++++++++++++++++++ 1 file changed, 140 insertions(+) create mode 100644 backend/SOCKET_IO_SSL_SETUP.md diff --git a/backend/SOCKET_IO_SSL_SETUP.md b/backend/SOCKET_IO_SSL_SETUP.md new file mode 100644 index 0000000..6c0270b --- /dev/null +++ b/backend/SOCKET_IO_SSL_SETUP.md @@ -0,0 +1,140 @@ +# Socket.IO mit SSL direkt betreiben (Alternative zu Apache-Proxy) + +Falls die Apache-WebSocket-Proxy-Konfiguration nicht funktioniert, kann Socket.IO direkt mit SSL betrieben werden. + +## Voraussetzungen + +1. SSL-Zertifikat (z.B. von Let's Encrypt) +2. Port in der Firewall öffnen (z.B. 3051) +3. Socket.IO-Server auf HTTPS konfigurieren + +## Backend-Konfiguration + +### 1. Socket.IO auf HTTPS umstellen + +Ändere `backend/server.js`: + +```javascript +import https from 'https'; +import fs from 'fs'; + +// SSL-Zertifikat laden +const httpsOptions = { + key: fs.readFileSync('/etc/letsencrypt/live/tt-tagebuch.de/privkey.pem'), + cert: fs.readFileSync('/etc/letsencrypt/live/tt-tagebuch.de/fullchain.pem') +}; + +// HTTPS-Server erstellen +const httpsServer = https.createServer(httpsOptions, app); + +// Socket.IO initialisieren +initializeSocketIO(httpsServer); + +// HTTPS-Server starten +const httpsPort = process.env.HTTPS_PORT || 3051; +httpsServer.listen(httpsPort, () => { + console.log(`🚀 HTTPS-Server läuft auf Port ${httpsPort}`); +}); + +// HTTP-Server für API (optional, falls API weiterhin über HTTP laufen soll) +const httpServer = createServer(app); +const httpPort = process.env.PORT || 3005; +httpServer.listen(httpPort, () => { + console.log(`🚀 HTTP-Server läuft auf Port ${httpPort}`); +}); +``` + +### 2. Frontend-Konfiguration + +Ändere `frontend/src/services/socketService.js`: + +```javascript +import { io } from 'socket.io-client'; +import { backendBaseUrl } from '../apiClient.js'; + +let socket = null; + +export const connectSocket = (clubId) => { + // Verwende HTTPS-URL für Socket.IO + const socketUrl = backendBaseUrl.replace('http://', 'https://').replace(':3005', ':3051'); + + if (socket && socket.connected) { + // Wenn bereits verbunden, verlasse den alten Club-Raum und trete dem neuen bei + if (socket.currentClubId) { + socket.emit('leave-club', socket.currentClubId); + } + } else { + // Neue Verbindung erstellen + socket = io(socketUrl, { + path: '/socket.io/', + transports: ['websocket', 'polling'], + reconnection: true, + reconnectionDelay: 1000, + reconnectionAttempts: 5, + timeout: 20000, + upgrade: true, + forceNew: false, + secure: true // Wichtig für HTTPS + }); + + socket.on('connect', () => { + console.log('Socket.IO verbunden'); + if (socket.currentClubId) { + socket.emit('join-club', socket.currentClubId); + } + }); + + socket.on('disconnect', () => { + console.log('Socket.IO getrennt'); + }); + + socket.on('connect_error', (error) => { + console.error('Socket.IO Verbindungsfehler:', error); + }); + } + + // Club-Raum beitreten + if (clubId) { + socket.emit('join-club', clubId); + socket.currentClubId = clubId; + } + + return socket; +}; + +export const disconnectSocket = () => { + if (socket) { + socket.disconnect(); + socket = null; + } +}; + +export const getSocket = () => socket; +``` + +### 3. Firewall-Port öffnen + +```bash +# UFW (Ubuntu Firewall) +sudo ufw allow 3051/tcp + +# Oder iptables +sudo iptables -A INPUT -p tcp --dport 3051 -j ACCEPT +``` + +### 4. Apache-Konfiguration anpassen + +Entferne die Socket.IO-Proxy-Konfiguration aus Apache, da Socket.IO jetzt direkt erreichbar ist. + +## Vorteile + +- Einfacher zu konfigurieren +- Keine Apache-Proxy-Probleme +- Direkte WebSocket-Verbindung + +## Nachteile + +- Separater Port muss geöffnet sein +- Zwei Ports (HTTP für API, HTTPS für Socket.IO) +- CORS-Konfiguration muss angepasst werden +