web — หน้าเว็บที่คุยกับบอร์ดผ่าน MQTT
This content is not available in your language yet.
หน้าเว็บสามหน้าที่ใช้คู่กับบทเรียน 1.4–1.6 และ 2.1–2.3 เปิดในเบราว์เซอร์ได้เลย ไม่ต้องติดตั้งโปรแกรมใด
ทุกหน้าคุยกับ broker สาธารณะ broker.hivemq.com ผ่าน MQTT over WebSocket (wss://broker.hivemq.com:8884/mqtt)
ส่วนบอร์ดคุยกับ broker ตัวเดียวกันที่พอร์ต 1883 · ทั้งสองทางใช้หัวข้อชุด bento-aiot/<ทีม>/...
| ไฟล์ | ใช้ทำอะไร |
|---|---|
| my_first_reader.html | อ่านค่าของทีมตัวเอง หนึ่งกล่องต่อหนึ่งคีย์ของ JSON และส่งคำสั่งกลับไปที่ .../cmd |
| mqtt_dashboard.html | หน้ารวมที่เห็นทุกบอร์ดเป็นการ์ด (สำหรับเรียนเป็นกลุ่ม) |
| class_game.html | เกมกดเร็วทั้งห้อง ใช้คู่กับ 08_class_race.py ในบทเรียน 2.3 |
วิธีเปิด
หัวข้อที่มีชื่อว่า “วิธีเปิด”- เปิดจากเว็บ สำเนาที่เผยแพร่ของหลักสูตรต้นฉบับเปิดได้ทันที เช่น
https://advance-innovation-centre-aic.github.io/embedded-systems-for-aiot-developer/examples/web/my_first_reader.html?team=team05
เปลี่ยน
team05ท้ายลิงก์เป็นรหัสของคุณ (ต้องตรงกับTEAMในไฟล์ Python ฝั่งบอร์ด) หน้าที่เผยแพร่บนเว็บ AIC รับเฉพาะรหัสรูปteamNNถ้าใช้รหัสของตัวเองอย่างnok4821ให้ใช้วิธีเปิดจากไฟล์ข้างล่าง เพราะสำเนาในรีโพนี้รับรหัส a-z 0-9 ยาว 4–16 ตัว แบบเดียวกับที่ไฟล์ฝั่งบอร์ดยอม - เปิดจากไฟล์ ดาวน์โหลดไฟล์ไปเปิดในเบราว์เซอร์ แล้วแก้บรรทัด
let TEAM = "teamXX";ต้นไฟล์ให้เป็นรหัสของคุณ (หรือต่อท้ายลิงก์ของไฟล์ด้วย?team=<รหัส>)
ข้อควรรู้
หัวข้อที่มีชื่อว่า “ข้อควรรู้”- broker สาธารณะ ใครก็อ่านได้ ใครก็เขียนได้ ห้ามส่งข้อมูลส่วนตัวหรือรหัสผ่านผ่านช่องทางนี้
- เฟิร์มแวร์ส่งแบบ retain ไม่ได้ เปิดหน้าเว็บหลังบอร์ดส่งไปแล้วจะว่างจนกว่าข้อความถัดไปมาถึง
- ถ้าเครือข่ายกันพอร์ต 8884 ขาออก หน้าเว็บจะต่อ broker ไม่ได้ ลองย้ายโน้ตบุ๊กมาต่อ Hotspot เดียวกับบอร์ด
- หน้าเว็บใช้ไลบรารี MQTT.js 5.16.0 จาก CDN
ที่มา: examples/web/ ของ AIoT in Action (AIC มหาวิทยาลัยบูรพา) · โค้ดสัญญาอนุญาต MIT
TESA Open Knowledge · © 2026 สมาคมสมองกลฝังตัวไทย (TESA) · CC BY-NC 4.0
Content is licensed CC BY-NC 4.0. Reuse it non-commercially and credit the Thai Embedded Systems Association (TESA) every time. · How to cite TESA