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,26 +46,24 @@ setTimeout(() => notice.remove(), 3000);
 // 4) Spiel-Code ins DOM schreiben
 document.getElementById("gameId").textContent = gameId;
 
-// 5) WebSocket einrichten und Spieler laden
+// 5) WebSocket mit Reconnect-Logik
-const protocol = location.protocol === "https:" ? "wss" : "ws";
+let socket;
-const socket = new WebSocket(
+function connectWebSocket() {
+    const protocol = location.protocol === "https:" ? "wss" : "ws";
+    socket = new WebSocket(
         `${protocol}://${location.host}/ws/${gameId}?username=${encodeURIComponent(username)}`
-);
+    );
 
-socket.addEventListener("open", () => {
+    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);
-});
+    });
 
-// 6) WebSocket-Nachrichten verarbeiten
+    socket.addEventListener("message", ({ 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);
@@ -87,7 +84,19 @@ socket.addEventListener("message", ({ data }) => {
             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);
@@ -192,6 +200,7 @@ function handleGameEnd({winner}) {
         scoreboard.innerHTML = "";
     }, 6000);
 }
+
 // public/js/game.js
 
 async function playOnSpotify(trackUri, username) {
@@ -219,5 +228,3 @@ async function playOnSpotify(trackUri, username) {
     }
 }
 window.playOnSpotify = playOnSpotify;
-
-