Webduino Blockly 「積木方城市」：用 MQTT 做到真正 Webduino 網頁協同同步顯示裝置狀態


在前一篇「Webduino Blockly 「積木方城市」：用 MQTT 打通所有 Webduino 開發板的「任督二脈」」文章中，介紹在 Webduino 中如何使用 MQTT 進行多個開發板間的訊息溝通，在這次的文章將再來探討，如何用 MQTT 做到真正 Webduino 網頁協同同步顯示裝置狀態！

在以下的 Webduino 官方 Demo 影片中，可以看到電腦與行動裝置畫面可以隨著 Webduino 的 RFID 裝置的切換，同步更新顯示！




雖然透過核選開發板積木上的「協同控制」可以達到多個連線裝置同時控制 Webduino 開發板，但是，不同裝置上的畫面是各自獨立的，並不會隨著其中一個裝置的操控而同步將其他裝置上的畫面一併進行更新！如果想要達到 Webduino 官方 Demo 影片中的效果，只要用 MQTT 就可以完成喔！



一、先來看看使用 MQTT 協同同步顯示網頁的執行結果：





二、Blockly 程式說明：初始化設定與 MQTT 接收訊息的設定



※ 20200817 補充：

在 2019 年 Webduino 已經修正 MQTT 預設積木如下圖，如果沒有要使用特定 MQTT 伺服器時，就不需要加入「連線至 MQTT 伺服器」積木，只要使用「MQTT」的第三個「當從 my/topic 收到訊息時…執行」積木，就會直接使用 Webduino 預設的 MQTT 伺服器來發送訊息！



三、Blockly 程式說明：點擊燈泡時的變數設定與 MQTT 傳送訊息的設定



四、Blockly 完整程式：加入 Smart 開發板與 LED 燈

MQTT1 點擊燈泡與MQTT2 點擊燈泡的程式內容完全相同，主要是讓大家可以方便同時開啟兩個專案進行測試，實際體驗透過 MQTT 的方式來同步不同的裝置狀態！








五、在 Blockly、行動裝置與客製化網頁頁面中同步控制 Smart 開發板與 LED 燈





※ 延伸閱讀：

留言

張貼留言