web — หน้าเว็บที่คุยกับบอร์ดผ่าน MQTT

หน้าเว็บสามหน้าที่ใช้คู่กับบทเรียน 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