ساخت داشبورد وب زنده با MQTT روی WebSocket

مرورگرها نمی‌توانند مستقیماً به پورت 8883 بروکر وصل شوند، اما می‌توانند از WebSocket استفاده کنند. بروکر mqttcloud.ir روی wss://mqtt.mqttcloud.ir/mqtt هم در دسترس است؛ همان MQTT با همان قواعد، فقط از مسیری که مرورگر پشتیبانی می‌کند و با رمزنگاری TLS.

هر چیزی که در کد صفحه وب باشد، از جمله نام کاربری و رمز، برای هر بازدیدکننده قابل مشاهده است. پس برای داشبورد یک اکانت MQTT جدا بسازید و دستگاه web-dashboard را زیر آن ثبت کنید. اگر داشبورد عمومی است، فرض کنید رمز آن دیر یا زود دیده می‌شود. چون هر اکانت فقط به تاپیک‌های خودش دسترسی دارد، دستگاه‌های اصلی شما در اکانت دیگر در امان می‌مانند.

این فایل HTML را ذخیره و در مرورگر باز کنید. آخرین دمای دریافتی را نشان می‌دهد و با یک دکمه فرمان می‌فرستد:

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/mqtt@5/dist/mqtt.min.js"></script>
</head>
<body>
  <h1>دمای انبار: <span id="temp">—</span></h1>
  <p id="status">در حال اتصال…</p>
  <button id="fan">روشن کردن فن</button>

  <script>
    const USER = "alice-web";
    const client = mqtt.connect("wss://mqtt.mqttcloud.ir/mqtt", {
      clientId: "web-dashboard",
      username: USER,
      password: "YOUR_PASSWORD",
    });

    client.on("connect", () => {
      document.getElementById("status").textContent = "متصل";
      client.subscribe(`${USER}/warehouse/temp`);
    });

    client.on("message", (topic, payload) => {
      const data = JSON.parse(payload.toString());
      document.getElementById("temp").textContent = data.c + " °C";
    });

    client.on("close", () => {
      document.getElementById("status").textContent = "قطع شد، تلاش دوباره…";
    });

    document.getElementById("fan").onclick = () =>
      client.publish(`${USER}/warehouse/fan/cmd`, "on", { qos: 1 });
  </script>
</body>
</html>

در این مثال اکانت وب alice-web است، پس داشبورد فقط به تاپیک‌های alice-web/... دسترسی دارد. دستگاه‌هایی که می‌خواهید روی داشبورد ببینید باید داده خود را روی همین تاپیک‌ها منتشر کنند؛ یعنی آن دستگاه‌ها هم زیر اکانت alice-web ثبت می‌شوند. اگر می‌خواهید داشبورد و دستگاه‌ها کاملاً جدا باشند، یک برنامه سمت سرور (مثلاً با پایتون یا Node.js) می‌تواند داده‌ها را از یک اکانت بخواند و روی اکانت دیگر منتشر کند.

mqtt.js پس از قطع اتصال خودش دوباره وصل می‌شود؛ اگر صفحه مدام قطع و وصل شد، احتمالاً دو تب یا دو نفر با یک Client ID باز کرده‌اند. برای هر نسخه از داشبورد شناسه جدا ثبت کنید.