add some way to read mqtt data

src/routes/(app)/[slug]/+page.svelte

@@ -1,8 +1,42 @@
 <script lang="ts">
-  import { onMount } from "svelte";
+  import { onMount, onDestroy } from "svelte";
 
   const { data } = $props();
 
+  let mqttMessage = $state("Waiting for MQTT message...");
+  let eventSource;
+
+  onMount(() => {
+    // Connect to the SSE endpoint
+    eventSource = new EventSource("/mqtt");
+
+    eventSource.onopen = () => {
+      console.log("SSE connection opened.");
+    };
+
+    eventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        mqttMessage = data.message;
+        console.log("Received SSE message:", mqttMessage);
+      } catch (e) {
+        console.error("Error parsing SSE message:", e);
+      }
+    };
+
+    eventSource.onerror = (error) => {
+      console.error("SSE Error:", error);
+      eventSource.close(); // Close the connection on error
+    };
+  });
+
+  onDestroy(() => {
+    if (eventSource) {
+      console.log("Closing SSE connection.");
+      eventSource.close(); // Clean up the connection when the component is destroyed
+    }
+  });
+
   let canvasEl: HTMLCanvasElement;
   let ctx;
 
@@ -55,5 +89,6 @@
 
 <div style="display: flex; justify-content: center; align-items: center; height: 100%;">
   <h1 class="text-center text-4xl font-bold">Floor {data.slug}</h1>
+  <span>{mqttMessage}</span>
   <canvas bind:this={canvasEl} class="obj-contain" width="800%" height="600%"></canvas>
 </div>

src/routes/mqtt/+server.js

@@ -0,0 +1,93 @@
+// src/routes/mqtt/+server.js
+import * as mqtt from "mqtt";
+import { writable } from "svelte/store";
+
+// A Svelte store to hold the latest MQTT message.
+// In a real application, you might want to store more data or
+// use a more robust way to manage messages, but for a basic example, this works.
+const latestMessage = writable("No message yet");
+
+let client = null;
+
+// Function to connect to MQTT
+function connectMqtt() {
+  if (client && client.connected) {
+    return; // Already connected
+  }
+
+  // Replace with your MQTT broker details
+  const BROKER_URL = "mqtt://kada49.it:1883"; // Example public broker
+  const TOPIC = "esp8266/+/data"; // Replace with your desired topic
+
+  client = mqtt.connect(BROKER_URL);
+
+  client.on("connect", () => {
+    console.log("Connected to MQTT broker!");
+    client.subscribe(TOPIC, (err) => {
+      if (!err) {
+        console.log(`Subscribed to topic: ${TOPIC}`);
+      } else {
+        console.error(`Subscription error: ${err}`);
+      }
+    });
+  });
+
+  client.on("message", (topic, message) => {
+    const payload = message.toString();
+    console.log(`Received message from topic "${topic}": ${payload}`);
+    latestMessage.set(payload); // Update the Svelte store
+  });
+
+  client.on("error", (err) => {
+    console.error(`MQTT error: ${err}`);
+    if (client) {
+      client.end(); // Close connection on error
+    }
+    client = null;
+    // Implement re-connection logic here if needed
+  });
+
+  client.on("close", () => {
+    console.log("MQTT connection closed.");
+    client = null;
+    // Implement re-connection logic here if needed
+  });
+}
+
+// Connect to MQTT when the server starts
+connectMqtt();
+
+/** @type {import("./$types").RequestHandler} */
+export async function GET({ request }) {
+  const headers = {
+    "Content-Type": "text/event-stream",
+    "Cache-Control": "no-cache",
+    Connection: "keep-alive",
+  };
+
+  return new Response(
+    new ReadableStream({
+      start(controller) {
+        console.log("Client connected to SSE stream.");
+
+        const unsubscribe = latestMessage.subscribe((message) => {
+          if (message !== "No message yet") {
+            const data = `data: ${JSON.stringify({ message: message })}\n\n`;
+            controller.enqueue(data);
+          }
+        });
+
+        // Handle client disconnection
+        request.signal.addEventListener("abort", () => {
+          console.log("Client disconnected from SSE stream.");
+          unsubscribe(); // Stop listening to store updates
+          controller.close();
+        });
+      },
+      cancel() {
+        console.log("SSE stream cancelled.");
+      },
+    }),
+    { headers },
+  );
+}