alex9ufo 聰明人求知心切: Node Red MQTT

Node Red MQTT

https://hackmd.io/@joe94113/node-red_mqtt_esp32_and_open_api

wokwi程式修改mqtt_server = "broker.mqtt-dashboard.com"; // MQTT 服務器地址

#include <WiFi.h>  
#include <PubSubClient.h>
#include <DHTesp.h>

const int DHT_PIN = 15;  // DHT 感測器的連接 PIN
DHTesp dht; 
const char* ssid = "Wokwi-GUEST"; // WiFi SSID
const char* password = ""; // WiFi 密碼
const char* mqtt_server = "broker.mqtt-dashboard.com"; // MQTT 服務器地址

WiFiClient espClient;
PubSubClient client(espClient);
unsigned long lastMsg = 0; // 記錄上一次消息發送的時間
float temp = 0; // 溫度變量
float hum = 0; // 濕度變量

// 設置 WiFi 連接
void setup_wifi() { 
  delay(10);
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);

  WiFi.mode(WIFI_STA); 
  WiFi.begin(ssid, password);

  // 等待 WiFi 連接
  while (WiFi.status() != WL_CONNECTED) { 
    delay(500);
    Serial.print(".");
  }

  randomSeed(micros());

  Serial.println("");
  Serial.println("WiFi connected");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
}

// MQTT 消息回調函數
void callback(char* topic, byte* payload, unsigned int length) { 
  Serial.print("Message arrived [");
  Serial.print(topic);
  Serial.print("] ");
  for (int i = 0; i < length; i++) { 
    Serial.print((char)payload[i]);
  }
}

// 重連 MQTT 服務器
void reconnect() { 
  while (!client.connected()) {
    Serial.print("Attempting MQTT connection...");
    String clientId = "ESP32Client-";
    clientId += String(random(0xffff), HEX);
    if (client.connect(clientId.c_str())) {
      Serial.println("Connected");
      client.publish("/ThinkIOT/Publish", "Welcome");
      client.subscribe("/ThinkIOT/Subscribe"); 
    } else {
      Serial.print("failed, rc=");
      Serial.print(client.state());
      Serial.println(" try again in 5 seconds");
      delay(5000);
    }
  }
}

// 初始化設置
void setup() {
  pinMode(2, OUTPUT);     
  Serial.begin(115200);
  setup_wifi(); 
  client.setServer(mqtt_server, 1883);
  client.setCallback(callback); 
  dht.setup(DHT_PIN, DHTesp::DHT22); // 初始化 DHT22
}

// 主循環
void loop() {
  // 如果未連接 MQTT，則嘗試重新連接
  if (!client.connected()) {
    reconnect();
  }
  client.loop();

  unsigned long now = millis();
  if (now - lastMsg > 2000) { // 每 2 秒發布一次數據
    lastMsg = now;
    TempAndHumidity  data = dht.getTempAndHumidity();

    String temp = String(data.temperature, 2);
    client.publish("/Thinkitive/temp", temp.c_str()); // 發布溫度數據
    String hum = String(data.humidity, 1); 
    client.publish("/Thinkitive/hum", hum.c_str());   // 發布濕度數據

    Serial.print("Temperature: ");
    Serial.println(temp);
    Serial.print("Humidity: ");
    Serial.println(hum);
  }
}

看到這個提示別擔心，這通常是因為瀏覽器基於安全性考量暫時關閉了腳本功能。只要幾個簡單的步驟就能重新開啟。

以下是針對目前主流瀏覽器的開啟教學：

1. Google Chrome (電腦版)

點擊瀏覽器右上角的 「三個點」 圖示，選擇 「設定」。
在左側選單點擊 「隱私權和安全性」。
點擊 「網站設定」。
向下滑動找到「內容」區塊，點擊 「JavaScript」。
勾選 「網站可以使用 JavaScript」。
回到原本的網頁並 重新整理 (F5)。

2. Microsoft Edge

點擊右上角的 「三個點」 圖示，選擇 「設定」。
在左側選單選擇 「Cookie 和網站權限」。
在「所有權限」清單中找到並點擊 「JavaScript」。
將 「允許 (建議)」 的開關切換為 開啟狀態。
重新整理網頁。

Node-RED 中安裝 MQTT broker 的步驟，並可以開始使用 MQTT 進行消息傳輸

[{"id":"073cac6e5e434d41","type":"mqtt out","z":"de93e29c07cca82f","name":"","topic":"sensors/livingroom/temp","qos":"","retain":"","respTopic":"","contentType":"","userProps":"","correl":"","expiry":"","broker":"841df58d.ee5e98","x":310,"y":180,"wires":[]},{"id":"ceb8068819adc757","type":"inject","z":"de93e29c07cca82f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":"","topic":"","payload":"22","payloadType":"num","x":110,"y":180,"wires":[["073cac6e5e434d41"]]},{"id":"5fc97feb1b566004","type":"mqtt in","z":"de93e29c07cca82f","name":"","topic":"sensors/livingroom/temp","qos":"2","datatype":"auto-detect","broker":"841df58d.ee5e98","nl":false,"rap":false,"inputs":0,"x":150,"y":260,"wires":[["6c6dc58f97ab8f86"]]},{"id":"6c6dc58f97ab8f86","type":"debug","z":"de93e29c07cca82f","name":"","active":true,"console":"false","complete":"false","x":350,"y":260,"wires":[]},{"id":"bcca028dd9cde448","type":"debug","z":"de93e29c07cca82f","name":"debug 19","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":340,"y":40,"wires":[]},{"id":"20f600cc71d280e5","type":"debug","z":"de93e29c07cca82f","name":"debug 20","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":340,"y":100,"wires":[]},{"id":"a4ee27d876e6c883","type":"aedes broker","z":"de93e29c07cca82f","name":"","mqtt_port":"1884","mqtt_ws_bind":"port","mqtt_ws_port":"","mqtt_ws_path":"","cert":"","key":"","ca":"","certname":"","keyname":"","caname":"","persistence_bind":"memory","dburl":"","persist_to_file":false,"usetls":false,"x":130,"y":80,"wires":[["bcca028dd9cde448"],["20f600cc71d280e5"]]},{"id":"841df58d.ee5e98","type":"mqtt-broker","name":"","broker":"broker.hivemq.com","port":"1883","clientid":"","autoConnect":true,"usetls":false,"compatmode":false,"protocolVersion":"4","keepalive":"15","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","birthMsg":{},"closeTopic":"","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willPayload":"","willMsg":{},"userProps":"","sessionExpiry":""}]

Node-RED 中配置 MQTT 並訂閱 ESP32 發送資料

[{"id":"06616414d9f0a6f3","type":"aedes broker","z":"3b843e74e7ab6ef8","name":"","mqtt_port":"1884","mqtt_ws_bind":"port","mqtt_ws_port":"","mqtt_ws_path":"","cert":"","key":"","certname":"","keyname":"","dburl":"","usetls":false,"x":130,"y":80,"wires":[["866a2384f6992b64"],["b013bf4fca5a488e"]]},{"id":"866a2384f6992b64","type":"debug","z":"3b843e74e7ab6ef8","name":"debug 19","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":340,"y":40,"wires":[]},{"id":"b013bf4fca5a488e","type":"debug","z":"3b843e74e7ab6ef8","name":"debug 20","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":340,"y":100,"wires":[]},{"id":"ceb3112cd35e970e","type":"mqtt in","z":"3b843e74e7ab6ef8","name":"","topic":"/Thinkitive/temp","qos":"0","datatype":"auto-detect","broker":"b9efc827e98bf7f9","nl":false,"rap":true,"rh":0,"inputs":0,"x":120,"y":180,"wires":[["7c6bdec976aab81d"]]},{"id":"a51c937face296dc","type":"mqtt in","z":"3b843e74e7ab6ef8","name":"","topic":"/Thinkitive/hum","qos":"0","datatype":"auto-detect","broker":"b9efc827e98bf7f9","nl":false,"rap":true,"rh":0,"inputs":0,"x":120,"y":240,"wires":[["f06f1d6381b63b69"]]},{"id":"7c6bdec976aab81d","type":"ui_gauge","z":"3b843e74e7ab6ef8","name":"TRMP","group":"70d1d491db52e4fe","order":7,"width":6,"height":4,"gtype":"gage","title":"ESP32溫度","label":"","format":"{{value}}","min":0,"max":"150","colors":["#00b500","#e6e600","#ec2727"],"seg1":"","seg2":"","diff":false,"className":"","x":330,"y":180,"wires":[]},{"id":"f06f1d6381b63b69","type":"ui_gauge","z":"3b843e74e7ab6ef8","name":"","group":"70d1d491db52e4fe","order":12,"width":6,"height":4,"gtype":"gage","title":"ESP32濕度","label":"","format":"{{value}}","min":0,"max":"60","colors":["#15cb15","#e6e600","#ca3838"],"seg1":"","seg2":"","diff":false,"className":"","x":350,"y":240,"wires":[]},{"id":"b9efc827e98bf7f9","type":"mqtt-broker","name":"broker.mqtt-dashboard.com","broker":"broker.mqtt-dashboard.com","port":"1883","clientid":"","autoConnect":true,"usetls":false,"protocolVersion":"4","keepalive":"60","cleansession":true,"autoUnsubscribe":true,"birthTopic":"","birthQos":"0","birthRetain":"false","birthPayload":"","birthMsg":{},"closeTopic":"","closeQos":"0","closeRetain":"false","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willRetain":"false","willPayload":"","willMsg":{},"userProps":"","sessionExpiry":""},{"id":"70d1d491db52e4fe","type":"ui_group","name":"esp32圖表","tab":"2156c1cf7f043d72","order":2,"disp":true,"width":"6","collapse":false,"className":""},{"id":"2156c1cf7f043d72","type":"ui_tab","name":"天氣圖表","icon":"dashboard","disabled":false,"hidden":false}]

Node-RED 中連接到一個公開的氣象資料 API，並抓取各地區的溫度等氣象資訊

兩個圖表一起顯示 Node-Red

alex9ufo 聰明人求知心切

2026年4月22日星期三

Node Red MQTT

1. Google Chrome (電腦版)

2. Microsoft Edge

沒有留言:

張貼留言

ESP32 and Node-RED with MQTT (Publish and Subscribe)

2026年4月22日 星期三

Node Red MQTT

1. Google Chrome (電腦版)

2. Microsoft Edge

沒有留言:

張貼留言

ESP32 and Node-RED with MQTT (Publish and Subscribe)

2026年4月22日星期三