DustBoy Live — MQTT Workshop

Flow:
DustBoy Sensor → Mosquitto Broker (mqtt.laris.co:9002)
→ Cloudflare Worker WSS Bridge (dustboy-wss-bridge.laris.workers.dev)
→ Browser WebSocket → This Page

Topic: DUSTBOY/+/+/+/status
Protocol: MQTT over WebSocket (WSS)
Library: mqtt.js (unpkg CDN)

// 1. Connect to MQTT broker via WebSocket
const client = mqtt.connect('wss://dustboy-wss-bridge.laris.workers.dev/mqtt');

client.on('connect', () => {
  console.log('Connected!');
  // Subscribe to all DustBoy sensors
  client.subscribe('DUSTBOY/+/+/+/status');
});

client.on('error', (e) => console.log('Error:', e));
client.on('offline', () => console.log('Offline'));

// 2. Listen for messages
client.on('message', (topic, message) => {
  // topic = "DUSTBOY/Model-N/ID/xxx/status"
  // message = JSON string with sensor data
  const raw = message.toString();
  console.log(topic, raw);
});

// MQTT Wildcards:
//   + = one level    (DUSTBOY/+/+/+/status)
//   # = all levels   (DUSTBOY/#)

// 3. Parse sensor data from JSON
function parse(topic, raw) {
  const obj = JSON.parse(raw);
  const parts = topic.split('/');
  const isModelT = parts[1] === 'Model-T';

  // Model-T: { pm2_5, pm10, temp, humid, rssi, nickname }
  // Model-N: { d: { pm2_5, pm10, temperature_c, humidity_rh } }

  let pm25, pm10, temp, humid, name;
  if (isModelT) {
    pm25 = obj.pm2_5; pm10 = obj.pm10;
    temp = obj.temp;  humid = obj.humid;
    name = obj.nickname || parts[2];
  } else {
    const d = obj.d || obj;
    pm25 = d.pm2_5; pm10 = d.pm10;
    temp = d.temperature_c; humid = d.humidity_rh;
    name = d.myName || parts[3];
  }
  return { name, pm25, pm10, temp, humid };
}

// 4. Color by PM2.5 level (Thailand AQI)
function pmColor(pm25) {
  if (pm25 <= 25)  return '#3fb950';  // Good
  if (pm25 <= 50)  return '#fbbf24';  // Moderate
  if (pm25 <= 100) return '#f87171';  // Unhealthy
  return '#c084fc';                  // Hazardous
}

// Update card in DOM
function updateCard(sensor) {
  const card = document.getElementById('card-' + sensor.id);
  // ... set innerHTML with PM2.5 number + color
}

Prompt:
"basic mosquitto html subscribe wss dustboy-wss-bridge.laris.workers.dev"

สิ่งที่ต้องรู้:
1. WSS URL ของ broker — wss://dustboy-wss-bridge.laris.workers.dev/mqtt
2. Topic pattern — DUSTBOY/+/+/+/status
3. Library — <script src="https://unpkg.com/mqtt/dist/mqtt.min.js">

แค่ 3 บรรทัด connect + subscribe + on message — จบ!