websockets stabiler machen

src/main/resources/public/js/game.js

@@ -6,7 +6,6 @@ import { setupStartRound } from "./start-round.js";
 const gameId   = getParam("gameId");
 const username = getParam("username");
 
-
 // 1) Parameter prüfen
 if (!gameId || !username) {
     alert("Ungültige oder fehlende URL-Parameter!");
@@ -47,47 +46,57 @@ setTimeout(() => notice.remove(), 3000);
 // 4) Spiel-Code ins DOM schreiben
 document.getElementById("gameId").textContent = gameId;
 
-// 5) WebSocket einrichten und Spieler laden
-const protocol = location.protocol === "https:" ? "wss" : "ws";
-const socket = new WebSocket(
-    `${protocol}://${location.host}/ws/${gameId}?username=${encodeURIComponent(username)}`
-);
+// 5) WebSocket mit Reconnect-Logik
+let socket;
+function connectWebSocket() {
+    const protocol = location.protocol === "https:" ? "wss" : "ws";
+    socket = new WebSocket(
+        `${protocol}://${location.host}/ws/${gameId}?username=${encodeURIComponent(username)}`
+    );
 
-socket.addEventListener("open", () => {
-    console.log("WebSocket connected. Requesting player list...");
-    // Fordere die Spielerliste vom Server an, sobald die Verbindung steht.
-    socket.send(JSON.stringify({ type: "requestPlayers" }));
-    // Binde den Handler für den "Runde starten"-Button
-    setupStartRound(socket);
-});
+    socket.addEventListener("open", () => {
+        console.log("WebSocket connected. Requesting player list...");
+        socket.send(JSON.stringify({ type: "requestPlayers" }));
+        setupStartRound(socket);
+    });
 
-// 6) WebSocket-Nachrichten verarbeiten
-socket.addEventListener("message", ({ data }) => {
-    console.log("WS-Rohdaten:", data);
-    const msg = JSON.parse(data);
+    socket.addEventListener("message", ({ data }) => {
+        console.log("WS-Rohdaten:", data);
+        const msg = JSON.parse(data);
 
+        switch (msg.type) {
+            case "players":
+                console.log("Empfangene Spieler:", msg.players);
+                renderList("#playersList", msg.players, username);
+                break;
+            case "reload":
+                window.location.reload();
+                break;
+            case "round-start":
+                handleRoundStart(msg);
+                break;
+            case "round-result":
+                handleRoundResult(msg);
+                break;
+            case "game-end":
+                handleGameEnd(msg);
+                break;
+            default:
+                console.warn("Unknown WS message type:", msg.type);
+        }
+    });
 
-    switch (msg.type) {
-        case "players":
-            console.log("Empfangene Spieler:", msg.players);
-            renderList("#playersList", msg.players, username);
-            break;
-        case "reload":
-            window.location.reload();
-            break;
-        case "round-start":
-            handleRoundStart(msg);
-            break;
-        case "round-result":
-            handleRoundResult(msg);
-            break;
-        case "game-end":
-            handleGameEnd(msg);
-            break;
-        default:
-            console.warn("Unknown WS message type:", msg.type);
-    }
-});
+    socket.addEventListener("close", () => {
+        console.warn("WebSocket geschlossen, versuche erneut zu verbinden...");
+        setTimeout(connectWebSocket, 2000);
+    });
+
+    socket.addEventListener("error", (e) => {
+        console.error("WebSocket Fehler:", e);
+        socket.close();
+    });
+}
+connectWebSocket();
 
 // 8) Funktion zum Anzeigen einer neuen Runde
 const startBtn   = document.getElementById("startRound");
@@ -156,7 +165,6 @@ function renderScoreboard(scores) {
     });
 }
 
-
 function handleRoundResult({ scores, guesses, owner }) {
     // Scoreboard updaten
     renderScoreboard(scores);
@@ -185,13 +193,14 @@ function handleRoundResult({ scores, guesses, owner }) {
 function handleGameEnd({winner}) {
     resultP.textContent = `🎉 ${winner} hat gewonnen!`;
     setTimeout(() => {
-    startBtn.hidden = false;
-    roundArea.hidden = true;
-    startBtn.disabled = false;
-    // scoreboard leeren
-    scoreboard.innerHTML = "";
+        startBtn.hidden = false;
+        roundArea.hidden = true;
+        startBtn.disabled = false;
+        // scoreboard leeren
+        scoreboard.innerHTML = "";
     }, 6000);
 }
+
 // public/js/game.js
 
 async function playOnSpotify(trackUri, username) {
@@ -218,6 +227,4 @@ async function playOnSpotify(trackUri, username) {
         alert(`Netzwerkfehler: ${err.message}`);
     }
 }
-window.playOnSpotify = playOnSpotify;
-
-
+window.playOnSpotify = playOnSpotify;