ข้ามไปยังเนื้อหา
TESA Open Knowledge

ของที่คุยกันได้: MQTT และแดชบอร์ด

เป้าหมาย

หัวข้อที่มีชื่อว่า “เป้าหมาย”
  1. อธิบายบทบาทของ broker, topic, publish และ subscribe ได้
  2. รันตัวอย่างให้ค่าเซนเซอร์ขึ้นหน้าเว็บอ่านค่า หรือบอกได้ว่าติดที่ขั้นไหน
  3. ระบุความเสี่ยงของ broker สาธารณะที่ไม่เข้ารหัสได้อย่างน้อย 2 ข้อ

ก่อนเริ่ม

หัวข้อที่มีชื่อว่า “ก่อนเริ่ม”
  • ในบทที่แล้ว คีย์ไหนของ sensors.snapshot() เก็บค่าลูกบิด
  • ถ้าอยากให้เพื่อนอีกจังหวัดเห็นค่าลูกบิดบนบอร์ดของเรา ข้อมูลต้องเดินทางผ่านอะไรบ้าง

ดูของจริงก่อน

หัวข้อที่มีชื่อว่า “ดูของจริงก่อน”

บทนี้เป็นตัวอย่างนำทาง (guided example) ทำตามทีละขั้น

  1. เปิด examples/01_send_to_dashboard.py ใน BENTO IDE
  2. แก้บรรทัด TEAM = "teamXX" เป็นเลขสองหลักที่คุณเลือกเอง เช่น "team37" (ห้ามใช้ team00)
  3. ถ้าใช้บอร์ดจริง แก้ WIFI_SSID กับ WIFI_PASS เป็นวง WiFi ที่บอร์ดต่อได้ (WiFi ที่ต้องล็อกอินผ่านหน้าเว็บมักใช้กับบอร์ดไม่ได้ ใช้ Hotspot มือถือแทน) ถ้าใช้ BENTO Emulator ไม่ต้องแก้สองบรรทัดนี้ WiFi ในอีมูเลเตอร์เป็นของจำลอง
  4. เปิดแท็บใหม่ในเบราว์เซอร์ ไปที่หน้าอ่านค่าของหลักสูตร AIoT in Action แล้วต่อท้ายด้วยเลขทีมเดียวกัน เช่น https://advance-innovation-centre-aic.github.io/embedded-systems-for-aiot-developer/examples/web/my_first_reader.html?team=team37
  5. กลับมารันโปรแกรม ดูป้ายสามขั้นบนจอเปลี่ยนเป็นสีเขียว แล้วดูหน้าเว็บ กล่องตัวเลข knob และ az ควรขึ้นมาและเปลี่ยนทุก 2 วินาที
  6. หมุนลูกบิดหรือเอียงบอร์ด (ในอีมูเลเตอร์ใช้แผง HW) แล้วดูเลขบนหน้าเว็บขยับตาม

เรื่องที่ต้องรู้ถ้าใช้อีมูเลเตอร์ อีมูเลเตอร์พยายามต่อ broker สาธารณะจริงผ่านเบราว์เซอร์ ถ้าต่อไม่ได้ภายในไม่กี่วินาที มันจะแจ้งในลิ้นชัก Console แล้วถอยไปใช้ broker จำลองในเบราว์เซอร์แทน กรณีนั้นข้อความจะไม่ออกจากเครื่องของคุณ และหน้าเว็บจะไม่เห็นอะไร ถ้าเจอแบบนี้ ไม่ใช่ความผิดของโค้ด ลองใหม่ภายหลัง หรือลองจากเครือข่ายอื่น

แนวคิด

หัวข้อที่มีชื่อว่า “แนวคิด”

1. ไปรษณีย์กลางชื่อ broker

หัวข้อที่มีชื่อว่า “1. ไปรษณีย์กลางชื่อ broker”

MQTT เป็นวิธีส่งข้อความสั้น ๆ ระหว่างอุปกรณ์ที่นิยมมากในงาน IoT หัวใจของมันคือ broker ซึ่งเปรียบได้กับไปรษณีย์กลาง

  • อุปกรณ์ที่มีข้อมูลจะ publish (ส่ง) ข้อความไปที่ broker พร้อมระบุ topic (หัวข้อ) เช่น bento-aiot/team37/telemetry
  • ใครก็ตามที่อยากรู้เรื่องนั้นจะ subscribe (บอกรับ) หัวข้อนั้นไว้กับ broker
  • broker ส่งต่อข้อความให้ทุกคนที่บอกรับหัวข้อนั้น ผู้ส่งกับผู้รับไม่ต้องรู้จักกันเลย
  บอร์ด ──publish──►  broker  ──ส่งต่อ──►  หน้าเว็บที่ subscribe ไว้
          bento-aiot/team37/telemetry

ในตัวอย่างนี้ บอร์ด (หรืออีมูเลเตอร์) เป็นผู้ publish และหน้าเว็บอ่านค่าเป็นผู้ subscribe หัวข้อ bento-aiot/team37/# เครื่องหมาย # แปลว่า “ทุกหัวข้อย่อยที่อยู่ใต้นี้”

2. บันไดสามขั้นที่ห้ามสลับ

หัวข้อที่มีชื่อว่า “2. บันไดสามขั้นที่ห้ามสลับ”

ข้อมูลจะออกจากบอร์ดได้ต้องผ่านสามขั้นตามลำดับ WiFi ต้องได้เลข IP ก่อน จึง แนะนำตัวกับ broker ได้ แล้วจึง publish ได้ ตัวอย่างวาดป้ายสามขั้นบนจอ ขั้นที่ผ่านเป็นสีเขียว ขั้นที่ไม่ผ่านเป็นสีแดงพร้อมเหตุผล โปรแกรมที่ดีบอกได้เสมอว่าติดที่ขั้นไหน

3. ข้อความหน้าตาอย่างไร

หัวข้อที่มีชื่อว่า “3. ข้อความหน้าตาอย่างไร”

ค่าที่ส่งถูกจัดเป็นข้อความรูปแบบ JSON ด้วย json.dumps() เช่น

{"id": "team37", "n": 5, "knob": 42, "az": 9.79}

หน้าเว็บอ่านค่าวาดกล่องหนึ่งกล่องต่อหนึ่งคีย์ จึงไม่ต้องแก้หน้าเว็บเมื่อเราเพิ่มคีย์ใหม่

4. broker สาธารณะไม่ใช่ที่ส่งความลับ

หัวข้อที่มีชื่อว่า “4. broker สาธารณะไม่ใช่ที่ส่งความลับ”

broker.hivemq.com ที่พอร์ต 1883 เปิดให้ทุกคนใช้ฟรีและ ไม่เข้ารหัส ใครก็ subscribe หัวข้อของเราได้ และใครก็ publish ปลอมเข้ามาในหัวข้อเดียวกันได้ ถ้ามีคนเลือกเลขทีมเดียวกับคุณ คุณอาจเห็นค่าของเขาปนมา เหมาะกับการเรียนเท่านั้น งานจริงใช้ MQTTs (MQTT ผ่าน TLS ที่เข้ารหัส) กับ broker ที่ต้องยืนยันตัวตน ซึ่งเป็นเรื่องในหลักสูตรระดับถัดไป

ตัวอย่างสมบูรณ์

หัวข้อที่มีชื่อว่า “ตัวอย่างสมบูรณ์”

examples/01_send_to_dashboard.py ย่อมาจาก examples/s02/05_value_leaves_the_board.py ของหลักสูตร AIoT in Action ส่วนหน้าเว็บอ่านค่าคือ examples/web/my_first_reader.html ของหลักสูตรเดียวกัน

  • ท่าที่ 1 ตรวจ TEAM ถ้ายังเป็น teamXX โปรแกรมไม่ยอมรัน เพราะชื่อที่ซ้ำกับคนอื่นจะทำให้ broker เตะอีกฝั่งหลุด
  • ท่าที่ 2 WiFi wifi.connect(ssid, password) คืน True หรือ False แล้วถาม wifi.ip() ว่าได้เลข IP จริงไหม ("0.0.0.0" แปลว่ายังไม่ได้)
  • ท่าที่ 3 broker mqtt.connect(BROKER, port=1883, client_id=..., keepalive=60) คืน True เมื่อต่อสำเร็จ
  • ท่าที่ 4 publish อ่านเซนเซอร์ ประกอบ JSON แล้ว mqtt.publish(TOPIC, body) ทุก 2 วินาที ดักทั้ง False และ OSError
  • ท่าที่ 5 สรุป mqtt.is_connected() ตอบว่า “ตอนนี้” ยังต่ออยู่ไหม

ภาพจอจาก BENTO Emulator ของตัวอย่างในบทนี้ (คลิกชื่อไฟล์เพื่อเปิดโค้ด)

จอของ examples/01_send_to_dashboard.py ขณะรันใน BENTO Emulator
01_send_to_dashboard.py

เช็กความเข้าใจ

หัวข้อที่มีชื่อว่า “เช็กความเข้าใจ”

ตอบคำถามใน quiz.yaml ถูกตั้งแต่ 80% ขึ้นไปถือว่าผ่าน

แล็บ

หัวข้อที่มีชื่อว่า “แล็บ”

วาดแผนภาพของคุณเองบนกระดาษ แสดงเส้นทางของข้อความหนึ่งใบจากลูกบิดไปจนถึงตัวเลขบนหน้าเว็บ ให้มีคำว่า broker, topic, publish และ subscribe ครบ ถ่ายรูปแผนภาพคู่กับภาพหน้าจอหน้าเว็บที่เห็นค่าของคุณ (หรือภาพป้ายบนจอที่บอกว่าติดขั้นไหน) เก็บไว้ใน portfolio

ไปต่อ

หัวข้อที่มีชื่อว่า “ไปต่อ”
  • หลักสูตร AIoT in Action ต่อยอดเรื่องนี้ไปถึงการรับคำสั่งกลับจากหน้าเว็บ และการส่งข้อมูลแบบเข้ารหัสขึ้น TESAIoT Platform
  • อ่านเพิ่มเรื่อง MQTT ได้ที่ https://mqtt.org/

สะท้อนคิด

หัวข้อที่มีชื่อว่า “สะท้อนคิด”

ถ้าจะใช้ระบบแบบนี้เฝ้าตู้แช่ของร้านค้า ข้อมูลอะไรที่คุณยอมให้คนอื่นเห็นได้ และข้อมูลอะไรที่ต้องไม่หลุดออกไปเด็ดขาด

คำถามทบทวน

ลองตอบเองก่อน แล้วค่อยเปิดดูเฉลย

  1. ใน MQTT ใครทำหน้าที่ส่งต่อข้อความจากผู้ส่งไปยังผู้ที่บอกรับหัวข้อนั้น (เป้าหมายข้อ 1)

    1. บอร์ดที่ publish
    2. broker
    3. เราเตอร์ WiFi
    4. หน้าเว็บที่ subscribe
    ดูเฉลย

    คำตอบ: B. broker

    broker เป็นตัวกลาง ผู้ส่งกับผู้รับไม่ต้องรู้จักกันเลย รู้แค่ชื่อหัวข้อก็พอ

  2. หน้าเว็บ subscribe หัวข้อ bento-aiot/team37/# จะได้รับข้อความจากหัวข้อใด (เป้าหมายข้อ 1)

    1. bento-aiot/team38/telemetry
    2. bento-aiot/team37/telemetry
    3. team37/bento-aiot/telemetry
    4. ทุกหัวข้อบน broker
    ดูเฉลย

    คำตอบ: B. bento-aiot/team37/telemetry

    # แปลว่าทุกหัวข้อย่อยที่อยู่ใต้ bento-aiot/team37/ เท่านั้น ไม่รวมทีมอื่น

  3. เรียงบันไดสามขั้นที่ข้อมูลต้องผ่านก่อนออกจากบอร์ด (เป้าหมายข้อ 2)

    1. publish ข้อความ
    2. WiFi ได้เลข IP
    3. แนะนำตัวกับ broker
    ดูเฉลย

    ลำดับที่ถูก: B. WiFi ได้เลข IP → C. แนะนำตัวกับ broker → A. publish ข้อความ

    ไม่มี IP ก็คุยกับ broker ไม่ได้ ไม่ได้แนะนำตัวกับ broker ก็ publish ไม่ได้

  4. ป้ายขั้นที่ 1 เป็นสีเขียว แต่ขั้นที่ 2 เป็นสีแดงว่า "ต่อไม่ได้ เน็ตอาจกันพอร์ต 1883" สาเหตุที่เป็นไปได้มากที่สุดคือข้อใด (เป้าหมายข้อ 2)

    1. รหัส WiFi ผิด
    2. เครือข่ายที่ใช้อยู่ปิดกั้นพอร์ต 1883 หรือ broker ไม่ตอบ
    3. ลูกบิดเสีย
    4. หน้าเว็บยังไม่ได้เปิด
    ดูเฉลย

    คำตอบ: B. เครือข่ายที่ใช้อยู่ปิดกั้นพอร์ต 1883 หรือ broker ไม่ตอบ

    ขั้นที่ 1 ผ่านแปลว่า WiFi กับ IP ใช้ได้แล้ว ปัญหาอยู่ระหว่างบอร์ดกับ broker เช่นเครือข่ายองค์กรที่กันพอร์ตนี้ หน้าเว็บไม่เกี่ยวกับขั้นนี้

  5. ข้อใดคือความเสี่ยงของการใช้ broker สาธารณะที่พอร์ต 1883 (เลือกได้มากกว่าหนึ่งข้อ) (เป้าหมายข้อ 3)

    1. คนอื่น subscribe อ่านข้อมูลของเราได้
    2. คนอื่น publish ข้อมูลปลอมเข้ามาในหัวข้อเดียวกันได้
    3. ข้อมูลเดินทางโดยไม่เข้ารหัส
    4. บอร์ดจะเสียหายทางกายภาพ
    ดูเฉลย

    คำตอบ: A. คนอื่น subscribe อ่านข้อมูลของเราได้ · B. คนอื่น publish ข้อมูลปลอมเข้ามาในหัวข้อเดียวกันได้ · C. ข้อมูลเดินทางโดยไม่เข้ารหัส

    broker สาธารณะไม่ยืนยันตัวตนและพอร์ต 1883 ไม่เข้ารหัส เหมาะกับการเรียนเท่านั้น งานจริงใช้ MQTTs กับ broker ที่ยืนยันตัวตน

อ้างอิงบทเรียนนี้

ถ้านำบทเรียนนี้ไปสอน ทำสไลด์ หรือทำเอกสารต่อ ให้อ้างอิงด้วยข้อความนี้ ถ้าดัดแปลงเนื้อหา ให้เติม (ดัดแปลง)ต่อท้ายชื่อบทเรียน

"ของที่คุยกันได้: MQTT และแดชบอร์ด" จาก TESA Open Knowledge โดยสมาคมสมองกลฝังตัวไทย (Thai Embedded Systems Association: TESA) https://github.com/tesaiot/tesa-qualification-program สัญญาอนุญาต CC BY-NC 4.0

ข้อความอ้างอิงภาษาอังกฤษ: "Connected things: MQTT and a dashboard" from TESA Open Knowledge by the Thai Embedded Systems Association (TESA), https://github.com/tesaiot/tesa-qualification-program, licensed under CC BY-NC 4.0

ลิงก์บทเรียน: https://tesaiot.github.io/tesa-qualification-program/courses/explorer/m02-sense-and-connect/l02-connected-things/

บทเรียนนี้ดัดแปลงจากต้นฉบับด้านล่าง เมื่ออ้างอิงให้คงเครดิตต้นฉบับไว้ด้วย
https://github.com/Advance-Innovation-Centre-AIC/embedded-systems-for-aiot-developer/blob/a80bbe88a34bcb9bb8d991f42f9252b77cdab079/examples/s02/05_value_leaves_the_board.py · ตัวอย่างโค้ดทุกไฟล์ในหลักสูตรนี้ย่อและดัดแปลงจากตัวอย่างของ AIoT in Action (MIT) ใช้ API ของ BENTO MicroPython ตามที่ตัวอย่างต้นฉบับใช้ ไม่มีการเพิ่มคำสั่งใหม่

วิธีอ้างอิง TESA ฉบับเต็ม

TESA Open Knowledge · © 2026 สมาคมสมองกลฝังตัวไทย (TESA) · CC BY-NC 4.0

เนื้อหาเผยแพร่ภายใต้ CC BY-NC 4.0 นำไปใช้ต่อในงานที่ไม่ใช่เพื่อการค้าได้ โปรดอ้างอิงสมาคมสมองกลฝังตัวไทย (TESA) ทุกครั้ง · วิธีอ้างอิง TESA