FastWeb之MQTT-WebSocket讀取溫濕度

• 適用平臺：WEB(桌面)

1. 說明

  採用MQTT通訊協議，讀取駁接在Arduino上的DHT22溫濕度感測器的數據。MQTT是由IBM開發的通訊協議，為感測器提供一個輕量可靠的二進制通訊設定，使得開發MQTT與物聯網，機器之間的通訊變得非常簡單。

  在網頁端可以使用WebSocket實現對MQTT協議的連線以及訊息的傳輸，該種傳輸方式不需要經過FastWeb所在伺服器的中轉，直接由MQTT Broker向網頁客戶端傳輸，與傳統的MQTT傳輸相比響應速度更快，效能更好。在範例中Arduino開發板與Ethernet W5100網路擴充套件板，組裝方式與前述章節相同。溫濕度感測器DHT22，負極接Ethernet W5100擴充套件板的GND針腳，正極接擴充套件板5V針腳，訊號線接擴充套件板D8針腳。DHT22的特性如下表所示。

名稱	取值
工作電壓	3V–5.5V
溫度測量範圍	-40℃–80℃
溫度測量精度	0.5℃
濕度測量範圍	0–100% RH
濕度測量精度	2% RH

  通過本範例學習，可以掌握UgMQTTws控制元件的基本使用，並結合arduino開發板通過MQTT進行溫濕度採集。

  Arduino開發板與Ethernet W5100網路擴充套件板的連線方式如下圖所示。

2. 零件連線圖

3. 使用零件

序	零件名稱	數量
1	Arduino UNO R3 開發板	1
2	Arduino Ethernet W5100 網路擴充套件板	1
3	DHT22溫濕度 模組	1
4	USB數據線	1
5	麵包板	1
6	杜邦線	3

4. Arduino流程圖

5. Arduino程式

  使用Arduino IDE 編譯並上傳以下Arduino程式。

// pubsubclient MQTT 鏈接庫網址  https://github.com/knolleary/pubsubclient
// 使用溫濕度感測器之鏈接庫 https://github.com/adafruit/DHT-sensor-library
 
#include <DHT.h>
#define dhtPin 8                    //讀取DHT22 Data
#define dhtType DHT22               //選用DHT22 
DHT dht(dhtPin, dhtType);       // Initialize DHT sensor
 
#include <SPI.h>
#include <Ethernet.h>
// MQTT 宣告 ========================================================
#include <PubSubClient.h>
EthernetClient ethClient;
PubSubClient client(ethClient);
 
 
// 設定網路IP地址 (網路擴充卡 MAC 可自行修改 +1 避免衝突)
byte mac[] = {0x90, 0xA2, 0xDA, 0x0E, 0x94, 0xB9 };     
IPAddress ip(192, 168, 0, 165);
IPAddress gateway(192, 168, 0, 1);
IPAddress subnet(255, 255, 255, 0);
 
void setup() {
   Serial.begin(9600);                                   //設定鮑率9600
   dht.begin();                                           //啟動DHT
 
   //設定 MQTT ========================================================
   client.setServer("192.168.0.113", 1883);                 // 連線 MQTT Broker
   client.setCallback(subscribeReceive);                            // 設定從 MQTT Broker讀取主題之後,自動運行之副程式
 
   Ethernet.begin(mac, ip, gateway, subnet);               // 啟動網路
   Serial.println("網路已經開通"); 
 
   delay(1500);
 }
 
void loop() {
   float h = dht.readHumidity();   //讀取濕度
   float t = dht.readTemperature(); //讀取攝氏溫度
   if (isnan(h) || isnan(t)) {
      Serial.println(" 無法從DHT感測器讀取！");
      return;
   }
 
  if (!client.connected()) {                              // 如果未聯機 MQTT Broker 將重新聯機
     reconnect();     
  }
   client.loop();
    
   // MQTT 開始運作發送主題 傳送溫濕度到 MQTT Broker
   char tmp[20];
   char hum[20];
   dtostrf(t,3,2,tmp);                 // 將Float 轉換為 char[]
   dtostrf(h,3,2,hum);
   Serial.println(tmp); 
   Serial.println(hum);
   // MQTT 發送主題(溫濕度) =================
   client.publish("TMP", tmp);
   client.publish("HUM", hum);   
   delay(5000);
}
 
void reconnect() {
  // 一直循環直到連上 MQTT Broker
  while (!client.connected()) {
    Serial.print("正在連線 MQTT Broker...");
    if (client.connect("arduinoClientMQTTDHT","username","password")) {
      Serial.println("MQTT Broker 已經連線上");
      client.subscribe("TMP");
      client.subscribe("HUM");
 
    } else {
      Serial.print("聯機失敗, rc=");
      Serial.print(client.state());
      Serial.println("五秒鐘之後再聯機");
      delay(5000);
    }
  }
}
 
void subscribeReceive(char* topic, byte* payload, unsigned int length)
{
  // Print the topic
  Serial.print("Topic: ");
  Serial.println(topic);
 
  // Print the message
  Serial.print("Message: ");
  for(int i = 0; i < length; i ++)
  {
    Serial.print(char(payload[i]));
  }
 
  // Print a newline
  Serial.println("");
}

6. 設計明細

  開啟FastWeb設計器，分別加入下插圖之控制元件。或者通過點選[匯入]按鈕選擇模板檔案來打開模板。

  ①：TUgImage元件，控制元件名稱為UgImage01。

  ②：TUgSwitchImage元件，控制元件名稱為ugSwitchImage01。

  ③：TUgLabel元件，控制元件名稱為UgLabel05。

  ④：TUgLabel元件，控制元件名稱為UgLabel06。

• fxRunFrame屬性設定

  • Height：設定頁面高度=800。
  • Width：設定頁面寬度=400。

• UgWebRunFrame屬性設定

  • Height：設定窗體高度=360。
  • Width：設定窗體寬度=480。

• UgMQTTws01屬性設定

  • Visible：設定控制元件是否可見。設定為False。
  • MQTTOptions：設定MQTT選項。
    • CleanSession：設定為True。
    • ClientID：設定客戶端ID號，與已連線的客戶端ID不能重複。
    • HostName：設定MQTT Broker的地址。
    • Password：設定MQTT Broker的帳號密碼。
    • Port：設定WebSocket服務的埠號，預設為9001。
    • Topic：設定MQTT的主題，啟動時自動訂閱該主題。
    • UserName：設定MQTT Broker的連線使用者名稱。

• ①UgImage01屬性設定

  • Align：設定對齊方式=alClient。
  • Stretch：設定畫面拉伸=True。
  • Picture：設定影象（背景）。點選Picture屬性右側的[√]，打開影象編輯器，點選[Load]按鈕打開檔案上傳界面，點選右側的[Browse...]打開影象瀏覽界面，選擇影象后，點選[確定]按鈕返回到檔案上傳界面，點選[Upload]將檔案上傳至編輯器中，待圖片顯示后，點選[Save]按鈕即可。

  

  

• ②ugSwitchImage01屬性設定

  • Height：設定控制元件高度=128。
  • Width：設定控制元件寬度=128。
  • 雙擊該控制元件打開圖片編輯界面。點選新增按鈕打開檔案上傳界面。點選[Load]按鈕打開檔案上傳界面，點選右側的[Browse...]打開影象瀏覽界面，選擇影象后，點選[確定]按鈕返回到檔案上傳界面，點選[Upload]將檔案上傳至編輯器中，待圖片顯示后，點選[Save]按鈕即可。

  

  

• ③UgLabel05屬性設定

  • Caption：設定標籤字幕內容=℃。
  • Font.Color：設定字幕的顏色=clWhite。
  • Font.Size：設定字幕的大小=24。
  • Font.Style.fsBold：設定字型加粗=True。

• ④UgLabel06屬性設定

  • Caption：設定標籤字幕內容=%RH。
  • Font.Color：設定字幕的顏色=clWhite。
  • Font.Size：設定字幕的大小=24。
  • Font.Style.fsBold：設定字型加粗=True。

7. 程式設計

7.1. 程式初始設定

  該程式無程式初始設定。

7.2. 事件設定

• UgMQTTws01-OnMessage事件

  當接收到訂閱資訊時，顯示內容。

//JScript
function ugMQTTws01OnMessage(atopic,apayload)
{
  if (atopic == "TMP")
  {
    UgLabel05.Caption = apayload + "℃";
  }
  else if (atopic == "HUM") 
  {
    UgLabel06.Caption = apayload + "%RH";
  }
}

//PasScript
procedure ugMQTTws01OnMessage(const atopic: string;apayload: string);
begin
  if atopic = 'TMP' Then
  begin 
    UgLabel05.Caption := apayload + '℃';
  end
  else if atopic = 'HUM' Then
  Begin
    UgLabel06.Caption := apayload + '%RH';
  End;
end;

// Make sure to add code blocks to your code group

• ②ugSwitchImage01-OnSwitch事件

  點選以開啟/關閉溫濕度訂閱。

//JScript
function ugSwitchImage01OnSwitch(sender)
//開啟、關閉計數器
{
  if (ugSwitchImage01.IsChecked){
    ugMQTTws01.Subscribe("HUM");
    ugMQTTws01.Subscribe("TMP");
  }
  else{
    ugMQTTws01.Unsubscribe("HUM");
    ugMQTTws01.Subscribe("TMP");
    UgLabel05.Caption = "0.0℃";
    UgLabel06.Caption = "0.0%RH";
  }
}

//PasScript
procedure ugSwitchImage01OnSwitch(sender: tobject);
//開啟、關閉計數器
begin
  if ugSwitchImage01.IsChecked Then
  Begin
    ugMQTTws01.Subscribe('HUM');
    ugMQTTws01.Subscribe('TMP');
  End
  else If ugSwitchImage01.IsChecked = False Then
  Begin
    ugMQTTws01.Unsubscribe('HUM');
    ugMQTTws01.Subscribe('TMP');
    UgLabel05.Caption := '0.0℃';
    UgLabel06.Caption := '0.0%RH';
  End;
end;

// Make sure to add code blocks to your code group

8. 運行結果

  使用滑鼠點選工具欄儲存到資料庫，然後點選運行（Run），測試運行結果。將圖中的撥桿撥向「開」，數值顯示屏中的溫濕度數據每隔五秒更新一次。