Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ein einfacher externer WebSocket-Server und in useLineData.js testen

Browse Source
This commit is contained in:
ISA
2024-09-11 08:58:01 +02:00
parent fb0e8b817d
commit f5e9de16f6
3 changed files with 66 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
hooks/useLineData.js
View File

@@ -9,6 +9,29 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
const messages = useSelector((state) => state.messages); const messages = useSelector((state) => state.messages);
const [lineColors, setLineColors] = useState({}); const [lineColors, setLineColors] = useState({});
const [tooltipContents, setTooltipContents] = 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(() => { useEffect(() => {
let isCancelled = false; // Flag to cancel ongoing operations if component unmounts let isCancelled = false; // Flag to cancel ongoing operations if component unmounts
@@ -30,7 +53,6 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
const newTooltipContents = {}; const newTooltipContents = {};
const valueMap = {}; const valueMap = {};
// Sortiere Statis nach Level
const sortedStatis = [...data1.Statis].sort((a, b) => a.Level - b.Level); const sortedStatis = [...data1.Statis].sort((a, b) => a.Level - b.Level);
sortedStatis.forEach((statis) => { 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) { if (statis.DpName.endsWith("_Messwert") && statis.Value !== "True" && !valueMap[key].messwert) {
valueMap[key].messwert = statis.Value; valueMap[key].messwert = statis.Value;
} }
@@ -52,7 +73,6 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
valueMap[key].schleifenwert = statis.Value; valueMap[key].schleifenwert = statis.Value;
} }
// Füge die Meldung zusammen mit der entsprechenden PrioColor hinzu
if (statis.Message && statis.Message !== "?") { if (statis.Message && statis.Message !== "?") {
valueMap[key].messages.push({ valueMap[key].messages.push({
message: statis.Message, message: statis.Message,
@@ -73,33 +93,28 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
return; return;
} }
// Generiere das HTML für jede Meldung mit der jeweiligen PrioColor const messageDisplay = values.messages.map((msg) => `<span class="inline-block text-gray-800"><span class="inline-block w-2 h-2 rounded-full mr-2" style="background-color: ${msg.prioColor};"></span>${msg.message}</span><br>`).join("");
const messageDisplay =
values.messages.length > 0
? values.messages.map((msg) => `<span class="inline-block text-gray-800"><span class="inline-block w-2 h-2 rounded-full mr-2" style="background-color: ${msg.prioColor};"></span>${msg.message}</span><br>`).join("")
: "";
const prioNameDisplay = statis.PrioName && statis.PrioName !== "?" ? `(${statis.PrioName})` : ""; 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"; colorsByModule[key] = values.messages.length > 0 ? values.messages[0].prioColor : "green";
newTooltipContents[key] = ` newTooltipContents[key] = `
<div class="bg-white rounded-lg m-0 p-2 w-[210px]"> <div class="bg-white rounded-lg m-0 p-2 w-[210px]">
<span class="text-lg font-semibold text-gray-900">${statis.ModulName || "Unknown"}</span> <span class="text-lg font-semibold text-gray-900">${statis.ModulName || "Unknown"}</span>
<br> <br>
<span class="text-md font-bold text-gray-800">${statis.ModulTyp || "N/A"}</span> <span class="text-md font-bold text-gray-800">${statis.ModulTyp || "N/A"}</span>
<br> <br>
<span class="text-md font-bold text-gray-800">Slot: ${statis.Modul || "N/A"}</span> <span class="text-md font-bold text-gray-800">Slot: ${statis.Modul || "N/A"}</span>
<br> <br>
<span class="text-md font-bold text-gray-800">Station: ${namesData[matchingLine.idLD] || "N/A"}</span> <span class="text-md font-bold text-gray-800">Station: ${namesData[matchingLine.idLD] || "N/A"}</span>
<br> <br>
<div style="max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal;"> <div style="max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal;">
${messageDisplay} <!-- Alle Meldungen werden hier mit ihrer Farbe angezeigt --> ${messageDisplay}
</div> </div>
<br> <br>
${values.messwert ? `<span class="inline-block text-gray-800">Messwert: ${values.messwert}</span><br>` : ""} ${values.messwert ? `<span class="inline-block text-gray-800">Messwert: ${values.messwert}</span><br>` : ""}
${values.schleifenwert ? `<span class="inline-block text-gray-800">Schleifenwert: ${values.schleifenwert}</span>` : ""} ${values.schleifenwert ? `<span class="inline-block text-gray-800">Schleifenwert: ${values.schleifenwert}</span>` : ""}
</div> </div>
`; `;
} }
@@ -110,27 +125,27 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
setLineStatusData(data1.Statis); setLineStatusData(data1.Statis);
} }
} catch (error) { } 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 = () => { const scheduleNextFetch = () => {
if (!isCancelled) { if (!isCancelled) {
setTimeout(async () => { fetchData();
await fetchData(); setTimeout(scheduleNextFetch, 20000);
scheduleNextFetch();
}, 20000);
} }
}; };
// Starte den ersten Aufruf
fetchData(); fetchData();
scheduleNextFetch(); scheduleNextFetch();
// Cleanup-Funktion, um sicherzustellen, dass keine weiteren Daten nach dem Unmount gesetzt werden
return () => { return () => {
isCancelled = true; isCancelled = true;
}; };

27
pages/api/websocket.js
View File

@@ -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();
}

19
websocket-server.js Normal file
View File

@@ -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");