Socket.IO teilt sich den HTTP-Port statt eines eigenen Servers auf 3001

Der Socket.IO-Server lief als zweiter Server auf Port 3001 und brauchte
deswegen cors: { origin: "*" }; die Clients bauten ihre Verbindungs-URL aus
window.location.hostname und dem festen Port zusammen.

Er wird jetzt ohne eigenen Port erzeugt und in bin/www per io.attach() an den
bestehenden HTTP-Server gehaengt. Erzeugen und Anhaengen sind getrennt, weil das
Modul beim Laden der Routen ausgewertet wird, also bevor der HTTP-Server
existiert. Die Clients rufen nur noch io() ohne Argument auf und verbinden sich
damit zur Herkunft der Seite zurueck.

Damit entfallen der zweite Port, die CORS-Ausnahme und eine moegliche zweite
Firewall-Regel auf dem Pi. Verifiziert: Port 3001 lauscht nicht mehr, alle
Events (score, timerDurationLeft, timerEnded, scoreSideswitch, refresh) kommen
ueber Port 3000 an, Reconnect funktioniert.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

README.md

@@ -41,7 +41,7 @@ npm start
 ```
 
 Der Server startet mit `nodemon` und ist anschließend unter Port **3000** erreichbar.
-Der Socket.IO-Server läuft separat auf Port **3001**.
+Die WebSocket-Verbindung läuft über denselben Port — es ist kein zweiter Port nötig.
 
 ### Port ändern
 
@@ -65,7 +65,7 @@ scoreboard/
 ├── bin/www                         # HTTP-Server, startet die App
 ├── db.json                         # Persistente Liste bekannter Teamnamen
 ├── controllers/
-│   ├── socketio.js                 # Socket.IO-Server (Port 3001)
+│   ├── socketio.js                 # Socket.IO-Server (teilt sich den HTTP-Port)
 │   ├── timer.js                    # Timer-Logik (Start, Pause, Reset, IncDec)
 │   ├── score.js                    # Score-Logik (Punkte, Teams, Seitenwechsel)
 │   ├── db.js                       # Lesen/Schreiben der Teamnamen in db.json
@@ -73,7 +73,7 @@ scoreboard/
 │   └── cli.js                      # Start/Stop des Kiosk-Browsers auf dem Anzeigerechner
 ├── routes/
 │   ├── admin.js                    # REST-Endpunkte für das Admin-Panel
-│   └── index.js                    # Monitor-Ansicht + WebSocket-Verbindungshandler
+│   └── index.js                    # Monitor-Ansicht (waehlt das passende Template)
 ├── views/
 │   ├── admin.hbs                   # Admin-Panel (Handlebars-Template)
 │   ├── splashscreen.hbs            # Monitor: Vereinslogo
@@ -183,7 +183,7 @@ Admin-Panel (Browser)
         ├── controllers/db.js ──┐   │
         └── controllers/cli.js  │   │  io.sockets.emit(event, data)
                                 │   ▼
-                          db.json   Socket.IO-Server :3001
+                          db.json   Socket.IO (am selben Port)
                                     │
                           WebSocket-Verbindung
                                     │
@@ -197,6 +197,12 @@ Der gesamte Spielzustand (Timer, Score, Teams, Schalter) liegt **im
 Arbeitsspeicher** der Controller. Ein Serverneustart setzt ihn zurück; einzig die
 Teamnamen in `db.json` bleiben erhalten.
 
+Bricht die WebSocket-Verbindung ab — auf dem Pi, der das WLAN selbst aufspannt,
+kommt das vor — verbindet sich der Client automatisch neu und holt sich beim
+`connect`-Event den aktuellen Stand über die REST-Endpunkte. Ein **Wechsel der
+Ansicht** während der Trennung (Splashscreen, Scoreboard ein/aus) wird dabei
+nicht bemerkt; dafür ist "Monitor neu laden" gedacht.
+
 ### WebSocket-Events
 
 | Event | Richtung | Beschreibung |

scoreboard/bin/www

@@ -7,6 +7,7 @@
 var app = require('../app');
 var debug = require('debug')('scoreboard:server');
 var http = require('http');
+var io = require('../controllers/socketio');
 
 /**
  * Get port from environment and store in Express.
@@ -21,6 +22,12 @@ app.set('port', port);
 
 var server = http.createServer(app);
 
+/**
+ * Attach Socket.IO to the same server, so it shares the HTTP port.
+ */
+
+io.attach(server);
+
 /**
  * Listen on provided port, on all network interfaces.
  */

scoreboard/controllers/socketio.js

@@ -1,13 +1,15 @@
-// Erstellt den zentralen Socket.IO-Server auf Port 3001.
+// Erstellt den zentralen Socket.IO-Server.
 // Wird von timer.js, score.js und den Routen importiert,
 // um Events (Timer, Score, Refresh) an alle verbundenen Clients zu senden.
 
 const { Server } = require('socket.io');
 
-// CORS auf "*" gesetzt, da Admin und Monitor auf unterschiedlichen Ports laufen können
-const io = new Server(3001, {
-    cors: { origin: "*" }
-});
+// Der Server wird ohne eigenen Port erzeugt und in bin/www per io.attach() an den
+// HTTP-Server gehaengt. Dieses Modul wird beim Laden der Routen ausgewertet, also
+// bevor der HTTP-Server existiert — daher die Trennung von Erzeugen und Anhaengen.
+// Weil Socket.IO damit unter derselben Herkunft laeuft wie die Seite, entfaellt die
+// CORS-Ausnahme.
+const io = new Server();
 
 // Verbindungs-Handling: der Client meldet sich beim Verbinden selbst mit dem
 // Socket.IO-eigenen 'connect'-Event und holt sich den aktuellen Stand ueber die

scoreboard/public/javascripts/admin.js

@@ -1,5 +1,6 @@
-let wss = "ws://" + window.location.hostname + ":3001"                  // Build socketio endpoint from window.location
-const socket = io(wss);                                                 // Connect to socketio server
+// Socket.IO laeuft am selben Host und Port wie die Seite, io() ohne Argument
+// verbindet sich dorthin zurueck.
+const socket = io();
 
 // ######################################################################################################################################################
 // Websockets event handler

scoreboard/public/javascripts/index.js

@@ -1,5 +1,6 @@
-let wss = "ws://" + window.location.hostname + ":3001"  // Build socketio endpoint from window.location
-const socket = io(wss);                                 // Connect to socketio server
+// Socket.IO laeuft am selben Host und Port wie die Seite, io() ohne Argument
+// verbindet sich dorthin zurueck.
+const socket = io();
 
 // ######################################################################################################################################################
 // Websockets event handler

scoreboard/public/javascripts/indexScore.js

@@ -1,5 +1,6 @@
-let wss = "ws://" + window.location.hostname + ":3001"  // Build socketio endpoint from window.location
-const socket = io(wss);                                 // Connect to socketio server
+// Socket.IO laeuft am selben Host und Port wie die Seite, io() ohne Argument
+// verbindet sich dorthin zurueck.
+const socket = io();
 
 // ######################################################################################################################################################
 // Websockets event handler

scoreboard/public/javascripts/splashscreen.js

@@ -1,5 +1,6 @@
-let wss = "ws://" + window.location.hostname + ":3001"  // Build socketio endpoint from window.location
-const socket = io(wss);                                 // Connect to socketio server
+// Socket.IO laeuft am selben Host und Port wie die Seite, io() ohne Argument
+// verbindet sich dorthin zurueck.
+const socket = io();
 
 // ######################################################################################################################################################
 // Websockets event handler