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:
140
backend/SOCKET_IO_SSL_SETUP.md
Normal file
140
backend/SOCKET_IO_SSL_SETUP.md
Normal 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
|
||||
|
||||
Reference in New Issue
Block a user