feat: WebSocket durch Socket.io

components/mainComponent/MapComponent.js

@@ -81,6 +81,7 @@ import { cleanupPolylinesForMemory } from "@/utils/polylines/cleanupPolylinesFor
 import { cleanupMarkers } from "@/utils/common/cleanupMarkers";
 import { monitorHeapAndReload } from "@/utils/common/monitorMemory";
 import { monitorHeapWithRedux } from "@/utils/common/monitorMemory";
+import { io } from "socket.io-client";
 //-----------------------------------------------------------------------------------------------------
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   //-------------------------------
@@ -795,17 +796,25 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     return () => clearInterval(interval);
   }, []);
   //--------------------------------------------
-  const socket = new WebSocket("ws://localhost:3000");
 
-  socket.addEventListener("open", () => {
-    console.log("🟢 WebSocket verbunden");
-    socket.send(JSON.stringify({ event: "ping", page: window.location.pathname }));
+  useEffect(() => {
+    const socket = io();
+
+    socket.on("connect", () => {
+      console.log("🔗 Verbunden mit dem Socket.io Server");
     });
 
-  socket.addEventListener("message", event => {
-    console.log("📨 Nachricht vom Server (Text):", event.data); // kein JSON.parse
+    socket.on("message", data => {
+      console.log("📨 Nachricht vom Server:", data);
     });
 
+    socket.emit("message", { event: "ping", page: window.location.pathname });
+
+    return () => {
+      socket.disconnect();
+      console.log("🔌 Verbindung getrennt");
+    };
+  }, []);
   //---------------------------------------------
   //--------------------------------------------
   return (

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.242";
+export const APP_VERSION = "1.1.243";

package.json

@@ -9,7 +9,7 @@
     "axios": "^1.7.9",
     "cookies": "^0.9.1",
     "dotenv": "^16.4.5",
-    "express": "^5.1.0",
+    "express": "^4.19.2",
     "fast-xml-parser": "^4.5.1",
     "http-proxy-middleware": "^3.0.0",
     "leaflet": "^1.9.4",
@@ -29,8 +29,9 @@
     "react-toastify": "^10.0.5",
     "redux": "^5.0.1",
     "redux-thunk": "^3.1.0",
+    "socket.io": "^4.8.1",
+    "socket.io-client": "^4.8.1",
     "tailwindcss": "^3.4.7",
-    "ws": "^8.18.2",
     "xml2js": "^0.6.2"
   },
   "scripts": {

server.js

@@ -1,27 +1,36 @@
 // server.js
-const { createServer } = require("http");
+const express = require("express");
+const http = require("http");
 const next = require("next");
-const WebSocket = require("ws");
+const { Server } = require("socket.io");
 
+const port = parseInt(process.env.PORT, 10) || 3000;
 const dev = process.env.NODE_ENV !== "production";
 const app = next({ dev });
 const handle = app.getRequestHandler();
 
 app.prepare().then(() => {
-  const server = createServer((req, res) => handle(req, res));
+  const expressApp = express();
+  const server = http.createServer(expressApp);
+  const io = new Server(server);
 
-  const wss = new WebSocket.Server({ server });
+  // WebSocket-Logik
+  io.on("connection", socket => {
+    console.log("✅ Client verbunden via socket.io");
 
-  wss.on("connection", ws => {
-    console.log("✅ Client verbunden via WS");
-    ws.send("Hallo vom WS-Server");
-
-    ws.on("message", msg => {
-      console.log("💬 Nachricht vom Client:", msg.toString());
-    });
+    socket.on("message", data => {
+      console.log("💬 Nachricht vom Client:", data);
     });
 
-  server.listen(3000, () => {
-    console.log("🚀 Server mit WS läuft auf http://localhost:3000");
+    socket.emit("message", { message: "Hallo vom socket.io Server" });
+  });
+
+  // Next.js Routen
+  expressApp.all("*", (req, res) => {
+    return handle(req, res);
+  });
+
+  server.listen(port, () => {
+    console.log(`🚀 Server mit socket.io läuft auf http://localhost:${port}`);
   });
 });