Node-RED + MQTT 儀表板教學

從 Node-RED 安裝、MQTT 節點串接，到建立即時儀表板，將 Raspberry Pi、ESP32、Pico W 的資料視覺化。

很適合搭配 MQTT 課程，讓學生從通訊協定一路看到應用層展示。

Node-RED MQTT Dashboard IoT 視覺化

一、教學目標

理解 Node-RED 在 IoT 系統中的角色
學會在 Raspberry Pi 或 Ubuntu 安裝 Node-RED
學會訂閱 MQTT 訊息並顯示在流程中
學會建立 Dashboard 儀表板
學會讓按鈕控制 LED 或其他裝置

二、Node-RED 是什麼

Node-RED 是一個以流程圖方式開發的低程式碼平台
很適合 IoT、感測器資料處理、自動化與視覺化
每個節點代表一個功能，例如輸入、處理、輸出
非常適合教學，因為學生可以直觀看到資料流動

如果 MQTT 是通訊層，Node-RED 很適合作為應用層與展示層。

三、安裝 Node-RED

方式一，在 Raspberry Pi OS 上安裝

bash <(curl -sL https://raw.githubusercontent.com/node-red/linux-installers/master/deb/update-nodejs-and-nodered)

方式二，在 Ubuntu 上安裝 Node.js 後再裝 Node-RED

sudo apt update
sudo apt install -y nodejs npm
sudo npm install -g --unsafe-perm node-red

啟動 Node-RED

node-red

開啟瀏覽器：

http://樹莓派IP:1880

設成系統服務

sudo systemctl enable nodered.service
sudo systemctl start nodered.service
sudo systemctl status nodered.service

不同系統環境安裝方式略有差異，上課時建議統一一種平台，避免學生步驟不一致。

三之一、若要遠端連線到 Node-RED，先完成必要設定

如果 Node-RED 不只是本機或同一個區域網路使用，而是要讓教室外、家中或其他網段的裝置連線，除了知道 IP 位置之外，還要先完成 Node-RED 與主機端的網路與安全設定。

1. 讓 Node-RED 監聽外部網路介面

編輯 ~/.node-red/settings.js，確認 uiHost 不是只有綁在 127.0.0.1：

uiHost: "0.0.0.0",
uiPort: process.env.PORT || 1880,

這樣 Node-RED 才能接受其他電腦或手機連進來。若仍是 127.0.0.1，就只能本機開瀏覽器存取。

2. 重新啟動 Node-RED

node-red-restart
# 或
sudo systemctl restart nodered.service

3. 確認防火牆與連接埠

Node-RED 預設使用 1880 port
若主機有啟用防火牆，需允許 TCP 1880
若要從網際網路連回家中或實驗室主機，通常還需要路由器做 port forwarding，或改用 VPN / Tailscale

4. 遠端登入時建議啟用帳號密碼保護

若 Node-RED 要給遠端使用，不建議裸露未保護的編輯介面。可在 settings.js 設定 adminAuth：

adminAuth: {
    type: "credentials",
    users: [{
        username: "teacher",
        password: "請改成雜湊後密碼",
        permissions: "*"
    }]
},

正式對外開放時，建議至少做到：帳號密碼保護、不要使用預設弱密碼、最好再加上 HTTPS 或 VPN。

5. Dashboard 的遠端網址

如果只要讓學生看儀表板而不是修改流程，可提供：

http://主機公開IP或網域名稱:1880/ui

若要進入編輯畫面則是：

http://主機公開IP或網域名稱:1880

6. MQTT Broker 若也在遠端主機，Node-RED 端要一起修改

mqtt in / mqtt out 節點中的 Broker 位址不能再填 localhost
應改成遠端 Broker 的 IP 或網域名稱
若 Broker 有帳號密碼，也要在 Node-RED 的 Broker 設定中補上

教學上可提醒學生區分兩件事：一個是「瀏覽器怎麼連到 Node-RED 網頁」，另一個是「Node-RED 怎麼連到 MQTT Broker」。這兩個位址不一定相同。

四、先確認 MQTT Broker 已可用

Node-RED 常搭配 Mosquitto 使用。若先前已在 Raspberry Pi 安裝 Mosquitto，可先測試：

mosquitto_sub -h localhost -t iot/ece2026/test
mosquitto_pub -h localhost -t iot/ece2026/test -m "hello from mosquitto"

若 Broker 在另一台機器，請把 localhost 改成該 Broker IP。

五、Node-RED 基本介面介紹

區域	用途
左側節點區	拖拉各類功能節點
中央工作區	建立流程圖
右側 debug 區	查看訊息輸出與除錯資訊
Deploy 按鈕	部署目前流程

六、建立第一個 MQTT 接收流程

流程目標

接收來自 Pico W 或 ESP32 的資料，然後在 debug 視窗顯示。

需要的節點

mqtt in
debug

設定方式

拖拉 mqtt in 節點到工作區
雙擊節點，設定 Broker 位址，例如 192.168.1.120
Port 設為 1883
Topic 設為 iot/ece2026/#
再拖一個 debug 節點，連接到 mqtt in
按 Deploy

只要 topic 用 # 萬用字元，就可以一次接收整個課堂主題底下的訊息。

七、建立 Dashboard 前先安裝 dashboard 節點

新版 Node-RED 儀表板可使用 node-red-dashboard 或新版 dashboard 套件。教學上可先用經典版。

方式一，使用管理介面安裝

點右上角選單
選 Manage palette
選 Install
搜尋 node-red-dashboard
按 Install

方式二，用指令安裝

cd ~/.node-red
npm install node-red-dashboard

重新啟動

node-red-restart
# 或
sudo systemctl restart nodered.service

八、建立溫度即時顯示儀表板

目標

接收例如 iot/ece2026/picow/temp 的資料，並顯示在儀表板中。

需要節點

mqtt in
json 或 function
ui_gauge
ui_chart
debug

若裝置送出純文字數字

可直接接到儀表板元件。

若裝置送出 JSON，例如：

{"temp": 27.5, "humidity": 61}

Function 節點範例

let data = JSON.parse(msg.payload);
msg.payload = data.temp;
return msg;

完成後可透過以下網址查看

http://樹莓派IP:1880/ui

九、建立濕度與多感測器儀表板

可建立多個群組，例如：

Group 1: 溫度
Group 2: 濕度
Group 3: 裝置狀態

建議元件

元件	用途
`ui_gauge`	顯示溫度、濕度等單一數值
`ui_chart`	顯示時間序列變化
`ui_text`	顯示狀態字串
`ui_switch`	發送開關控制訊號
`ui_button`	按鈕控制

十、從 Node-RED 發送 MQTT 指令控制裝置

這個範例很適合做 LED 開關控制。

流程目標

在 Dashboard 上按一個按鈕
Node-RED 發送 MQTT 訊息到特定 topic
Pico W 或 ESP32 收到後控制 LED

需要節點

ui_switch 或 ui_button
change 或 function
mqtt out

控制 topic 範例

iot/ece2026/picow/led

送出的訊息範例

ON
OFF

Function 節點範例

if (msg.payload === true) {
    msg.payload = "ON";
} else {
    msg.payload = "OFF";
}
return msg;

十一、Pico W / ESP32 接收控制訊息的概念

裝置端只要訂閱控制 topic，例如：

iot/ece2026/picow/led
iot/ece2026/esp32/led

收到 ON 時點亮 LED，收到 OFF 時熄滅 LED。

這樣學生可以很直觀地看到 Node-RED 不只是看資料，也能反向控制裝置。

十二、範例流程設計 1, 只看資料

mqtt in 訂閱 iot/ece2026/picow/temp
接到 ui_gauge 顯示溫度
同時接到 ui_chart 畫趨勢
再接一個 debug 方便除錯

十三、範例流程設計 2, 看資料加控制

接收溫度資料顯示在 Dashboard
再加入 ui_switch
用 mqtt out 把控制訊息送到 LED topic
由 Pico W 或 ESP32 根據訊息切換 LED 狀態

十四、Node-RED 匯入流程 JSON 範例

以下是一個簡化示意，可在 Node-RED 用 Import 匯入後再修改 Broker 與 Dashboard 設定。

[
  {
    "id": "mqtt_in_temp",
    "type": "mqtt in",
    "topic": "iot/ece2026/picow/temp",
    "broker": "broker_1",
    "x": 180,
    "y": 100,
    "wires": [["debug_1", "gauge_1"]]
  },
  {
    "id": "debug_1",
    "type": "debug",
    "x": 430,
    "y": 80,
    "wires": []
  },
  {
    "id": "gauge_1",
    "type": "ui_gauge",
    "name": "Temperature",
    "group": "group_1",
    "order": 1,
    "x": 430,
    "y": 130,
    "wires": []
  }
]

這段是教學示意，不一定能直接用在所有版本，實際上還需要補 broker、tab、group 等設定節點。

十五、進階教學, 把 JSON 分拆成多個欄位

若裝置送出：

{"temp":28.2,"humidity":64,"light":731}

可用 function 節點拆出不同欄位：

let data = JSON.parse(msg.payload);
return [
  { payload: data.temp },
  { payload: data.humidity },
  { payload: data.light }
];

然後連接到 3 個不同的 Dashboard 元件。

十六、如果要把資料存檔或寫入資料庫

可接 file 節點寫到 CSV
可接 MariaDB / MySQL 節點
可接 InfluxDB 節點做時序資料儲存
可接 HTTP request 節點送到 Web API

十七、常見問題與除錯

問題	原因	建議
Node-RED 無法連到 MQTT Broker	IP 或 Port 錯誤	確認 Broker 設定與網路連線
遠端瀏覽器無法開啟 Node-RED 頁面	`uiHost` 仍綁在 `127.0.0.1`、防火牆未開放或未做 port forwarding	檢查 `settings.js`、TCP 1880、防火牆與路由器設定
Dashboard 沒資料	Topic 不一致	確認裝置端與 Node-RED 使用同一 topic
ui 元件沒出現	尚未安裝 dashboard 套件	安裝 `node-red-dashboard`
Deploy 後無反應	流程未正確連線	檢查節點是否已連接並查看 debug 視窗
控制 LED 無效	裝置未訂閱控制 topic	檢查 Pico W / ESP32 的 subscriber 程式

十八、課堂建議流程

先講 MQTT 基礎與 Broker
讓學生用 Python 或裝置成功 publish / subscribe
再安裝 Node-RED
做第一個 MQTT 接收流程
做 Dashboard 視覺化
最後用按鈕控制 LED，完成雙向互動

這種流程很有成就感，因為學生能從看訊息，進展到看到圖表，再進展到控制實體裝置。

十九、作業建議

完成一個顯示溫度的儀表板
完成一個顯示濕度的折線圖
完成一個按鈕控制 LED 的 MQTT 流程
使用 ESP32 或 Pico W 傳送 JSON 資料
進階題，加入資料存檔功能

二十、結語

Node-RED 很適合做為 IoT 課程中的「看得見成果」平台，讓抽象的網路通訊變成學生能操作、能觀察、能除錯的完整系統。

搭配 MQTT、Pico W、ESP32，幾乎就能構成一套非常完整的物聯網教學鏈。