diff --git a/hooks/useLineData.js b/hooks/useLineData.js index cb19e99a4..2a3e79b09 100644 --- a/hooks/useLineData.js +++ b/hooks/useLineData.js @@ -9,6 +9,29 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { const messages = useSelector((state) => state.messages); const [lineColors, setLineColors] = useState({}); const [tooltipContents, setTooltipContents] = useState({}); + const [webSocketMessages, setWebSocketMessages] = useState([]); + + useEffect(() => { + const ws = new WebSocket("ws://localhost:3001"); // Verwende den externen WebSocket-Server + + ws.onopen = () => { + console.log("WebSocket-Verbindung hergestellt"); + }; + + ws.onmessage = (event) => { + const message = JSON.parse(event.data); + setWebSocketMessages((prev) => [...prev, message]); + console.log("WebSocket-Nachricht erhalten:", message); + }; + + ws.onclose = () => { + console.log("WebSocket-Verbindung geschlossen"); + }; + + return () => { + ws.close(); + }; + }, []); useEffect(() => { let isCancelled = false; // Flag to cancel ongoing operations if component unmounts @@ -30,7 +53,6 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { const newTooltipContents = {}; const valueMap = {}; - // Sortiere Statis nach Level const sortedStatis = [...data1.Statis].sort((a, b) => a.Level - b.Level); sortedStatis.forEach((statis) => { @@ -44,7 +66,6 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { }; } - // Sammle Messwert und Schleifenwert if (statis.DpName.endsWith("_Messwert") && statis.Value !== "True" && !valueMap[key].messwert) { valueMap[key].messwert = statis.Value; } @@ -52,7 +73,6 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { valueMap[key].schleifenwert = statis.Value; } - // Füge die Meldung zusammen mit der entsprechenden PrioColor hinzu if (statis.Message && statis.Message !== "?") { valueMap[key].messages.push({ message: statis.Message, @@ -73,33 +93,28 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { return; } - // Generiere das HTML für jede Meldung mit der jeweiligen PrioColor - const messageDisplay = - values.messages.length > 0 - ? values.messages.map((msg) => `${msg.message}
`).join("") - : ""; + const messageDisplay = values.messages.map((msg) => `${msg.message}
`).join(""); const prioNameDisplay = statis.PrioName && statis.PrioName !== "?" ? `(${statis.PrioName})` : ""; - // Setze die Hauptfarbe für das Modul basierend auf der PrioColor der ersten Meldung colorsByModule[key] = values.messages.length > 0 ? values.messages[0].prioColor : "green"; newTooltipContents[key] = `
- ${statis.ModulName || "Unknown"} -
- ${statis.ModulTyp || "N/A"} -
- Slot: ${statis.Modul || "N/A"} -
- Station: ${namesData[matchingLine.idLD] || "N/A"} -
-
- ${messageDisplay} -
-
- ${values.messwert ? `Messwert: ${values.messwert}
` : ""} - ${values.schleifenwert ? `Schleifenwert: ${values.schleifenwert}` : ""} + ${statis.ModulName || "Unknown"} +
+ ${statis.ModulTyp || "N/A"} +
+ Slot: ${statis.Modul || "N/A"} +
+ Station: ${namesData[matchingLine.idLD] || "N/A"} +
+
+ ${messageDisplay} +
+
+ ${values.messwert ? `Messwert: ${values.messwert}
` : ""} + ${values.schleifenwert ? `Schleifenwert: ${values.schleifenwert}` : ""}
`; } @@ -110,27 +125,27 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { setLineStatusData(data1.Statis); } } catch (error) { - if (!isCancelled) { - console.error("Fehler beim Abrufen der Daten:", error); + console.error("Fehler beim Abrufen der Daten:", error); + + // Füge einen try-catch Block für den Reload hinzu + try { + window.location.reload(); + } catch (reloadError) { + console.error("Fehler beim Neuladen der Seite:", reloadError); } } }; - // Funktion für rekursiven Aufruf mit Timeout const scheduleNextFetch = () => { if (!isCancelled) { - setTimeout(async () => { - await fetchData(); - scheduleNextFetch(); - }, 20000); + fetchData(); + setTimeout(scheduleNextFetch, 20000); } }; - // Starte den ersten Aufruf fetchData(); scheduleNextFetch(); - // Cleanup-Funktion, um sicherzustellen, dass keine weiteren Daten nach dem Unmount gesetzt werden return () => { isCancelled = true; }; diff --git a/pages/api/websocket.js b/pages/api/websocket.js deleted file mode 100644 index 20b4c6716..000000000 --- a/pages/api/websocket.js +++ /dev/null @@ -1,27 +0,0 @@ -// /pages/api/websocket.js -import { Server } from "ws"; - -export default function handler(req, res) { - if (!res.socket.server.ws) { - console.log("Starting WebSocket server"); - const wss = new Server({ server: res.socket.server }); - - wss.on("connection", (ws) => { - console.log("New WebSocket connection"); - - ws.on("message", (message) => { - console.log("Received:", message); - // Beispielnachricht an den Client senden - ws.send(JSON.stringify({ message: "Hallo von WebSocket-Server" })); - }); - - // Schließe die Verbindung - ws.on("close", () => { - console.log("WebSocket connection closed"); - }); - }); - - res.socket.server.ws = wss; - } - res.end(); -} diff --git a/websocket-server.js b/websocket-server.js new file mode 100644 index 000000000..63ada340e --- /dev/null +++ b/websocket-server.js @@ -0,0 +1,19 @@ +const WebSocket = require("ws"); + +// Starte den WebSocket-Server auf Port 3001 +const wss = new WebSocket.Server({ port: 3001 }); + +wss.on("connection", (ws) => { + console.log("New WebSocket connection"); + + ws.on("message", (message) => { + console.log("Received:", message); + ws.send(JSON.stringify({ message: "Hallo vom WebSocket-Server" })); + }); + + ws.on("close", () => { + console.log("WebSocket connection closed"); + }); +}); + +console.log("WebSocket-Server läuft auf ws://localhost:3001");