From 1e86b821e8b2ac35044565c3099ed10f750ef081 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Sat, 15 Nov 2025 23:05:27 +0100
Subject: [PATCH] Enhance socket service configuration for improved connection
 handling

This commit updates the socket service in both the backend and frontend to include explicit path and transport settings for Socket.IO. The backend configuration now allows for upgrades from polling to WebSocket, with defined timeouts for upgrades and pings. The frontend configuration adjusts the transport order and adds a timeout for reconnections, ensuring a more robust and efficient socket connection experience. These changes improve the reliability and performance of real-time communication in the application.
---
 apache.conf.example                    | 104 +++++++++++++++++++++++++
 backend/services/socketService.js      |  12 ++-
 frontend/src/services/socketService.js |  10 ++-
 3 files changed, 123 insertions(+), 3 deletions(-)
 create mode 100644 apache.conf.example

diff --git a/apache.conf.example b/apache.conf.example
new file mode 100644
index 0000000..b09b97a
--- /dev/null
+++ b/apache.conf.example
@@ -0,0 +1,104 @@
+# Beispiel Apache-Konfiguration für tt-tagebuch.de
+# Diese Datei sollte in /etc/apache2/sites-available/tt-tagebuch.de.conf eingefügt werden
+# 
+# WICHTIG: Folgende Module müssen aktiviert sein:
+# sudo a2enmod proxy
+# sudo a2enmod proxy_http
+# sudo a2enmod proxy_wstunnel
+# sudo a2enmod rewrite
+# sudo a2enmod ssl
+# sudo a2enmod headers
+# sudo systemctl restart apache2
+
+<VirtualHost *:80>
+    ServerName tt-tagebuch.de
+    ServerAlias www.tt-tagebuch.de
+    
+    # Redirect HTTP zu HTTPS
+    Redirect permanent / https://tt-tagebuch.de/
+</VirtualHost>
+
+<VirtualHost *:443>
+    ServerName tt-tagebuch.de
+    ServerAlias www.tt-tagebuch.de
+
+    # SSL-Konfiguration (anpassen je nach Zertifikat)
+    SSLEngine on
+    SSLCertificateFile /path/to/ssl/cert.pem
+    SSLCertificateKeyFile /path/to/ssl/key.pem
+    # Optional: SSLCertificateChainFile /path/to/ssl/chain.pem
+
+    # SSL-Einstellungen
+    SSLProtocol all -SSLv2 -SSLv3
+    SSLCipherSuite HIGH:!aNULL:!MD5
+    SSLHonorCipherOrder on
+
+    # Logging
+    ErrorLog ${APACHE_LOG_DIR}/tt-tagebuch.de-error.log
+    CustomLog ${APACHE_LOG_DIR}/tt-tagebuch.de-access.log combined
+
+    # Max Upload Size
+    LimitRequestBody 52428800
+
+    # WebSocket-Proxy für Socket.IO
+    # WICHTIG: Diese Location muss VOR der allgemeinen /api Location stehen
+    <LocationMatch "^/socket\.io/">
+        ProxyPass ws://localhost:3005/socket.io/
+        ProxyPassReverse ws://localhost:3005/socket.io/
+        
+        # WebSocket-Upgrade Headers
+        RewriteEngine on
+        RewriteCond %{HTTP:Upgrade} websocket [NC]
+        RewriteCond %{HTTP:Connection} upgrade [NC]
+        RewriteRule ^/?(.*) "ws://localhost:3005/$1" [P,L]
+        
+        # Fallback für HTTP (Polling)
+        ProxyPass http://localhost:3005/socket.io/
+        ProxyPassReverse http://localhost:3005/socket.io/
+        
+        # Headers
+        ProxyPreserveHost On
+        RequestHeader set X-Forwarded-Proto "https"
+        RequestHeader set X-Real-IP %{REMOTE_ADDR}s
+    </LocationMatch>
+
+    # API-Routen
+    <Location /api/>
+        ProxyPass http://localhost:3005/api/
+        ProxyPassReverse http://localhost:3005/api/
+        
+        ProxyPreserveHost On
+        RequestHeader set X-Forwarded-Proto "https"
+        RequestHeader set X-Real-IP %{REMOTE_ADDR}s
+    </Location>
+
+    # Statische Frontend-Dateien
+    DocumentRoot /var/www/tt-tagebuch.de/frontend/dist
+    
+    <Directory /var/www/tt-tagebuch.de/frontend/dist>
+        Options -Indexes +FollowSymLinks
+        AllowOverride All
+        Require all granted
+        
+        # Fallback auf index.html für Vue Router
+        RewriteEngine On
+        RewriteBase /
+        RewriteRule ^index\.html$ - [L]
+        RewriteCond %{REQUEST_FILENAME} !-f
+        RewriteCond %{REQUEST_FILENAME} !-d
+        RewriteRule . /index.html [L]
+    </Directory>
+
+    # Cache-Control für statische Assets
+    <LocationMatch "\.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$">
+        ExpiresActive On
+        ExpiresDefault "access plus 1 year"
+        Header set Cache-Control "public, immutable"
+    </LocationMatch>
+
+    # Security Headers
+    Header always set X-Frame-Options "SAMEORIGIN"
+    Header always set X-Content-Type-Options "nosniff"
+    Header always set X-XSS-Protection "1; mode=block"
+</VirtualHost>
+
diff --git a/backend/services/socketService.js b/backend/services/socketService.js
index de9f33b..2c101e8 100644
--- a/backend/services/socketService.js
+++ b/backend/services/socketService.js
@@ -8,7 +8,17 @@ export const initializeSocketIO = (httpServer) => {
       origin: true,
       credentials: true,
       methods: ['GET', 'POST']
-    }
+    },
+    // Wichtig für Reverse Proxy (Nginx): Path und Transports explizit setzen
+    path: '/socket.io/',
+    transports: ['websocket', 'polling'],
+    // Erlaube Upgrade von polling zu websocket
+    allowUpgrades: true,
+    // Timeout für Upgrade
+    upgradeTimeout: 10000,
+    // Ping-Timeout für Verbindungen
+    pingTimeout: 60000,
+    pingInterval: 25000
   });
 
   io.on('connection', (socket) => {
diff --git a/frontend/src/services/socketService.js b/frontend/src/services/socketService.js
index cc77871..2a03ab8 100644
--- a/frontend/src/services/socketService.js
+++ b/frontend/src/services/socketService.js
@@ -13,10 +13,16 @@ export const connectSocket = (clubId) => {
     // Neue Verbindung erstellen
     // Verwende backendBaseUrl direkt, Socket.IO erkennt automatisch den Port
     socket = io(backendBaseUrl, {
-      transports: ['websocket', 'polling'],
+      path: '/socket.io/',
+      transports: ['polling', 'websocket'], // Polling zuerst, dann Upgrade zu WebSocket
       reconnection: true,
       reconnectionDelay: 1000,
-      reconnectionAttempts: 5
+      reconnectionAttempts: 5,
+      timeout: 20000,
+      // Erlaube Upgrade von polling zu websocket
+      upgrade: true,
+      // Force new connection
+      forceNew: false
     });
 
     socket.on('connect', () => {