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.
This commit is contained in:
Torsten Schulz (local)
2025-11-16 00:13:30 +01:00
parent 572de5f7d4
commit baf5bda6f2

View File

@@ -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