FastWeb之MQTT-WebSocket控制LED燈

• 適用平臺：WEB(桌面)

1. 說明

  本範例採用MQTT通訊協議，控制駁接在Arduino上的LED燈。MQTT是由IBM開發的通訊協議，為感測器提供一個輕量可靠的二進制通訊設定，使得開發MQTT與物聯網，機器之間的通訊變得非常簡單。

  在網頁端可以使用WebSocket實現對MQTT協議的連線以及訊息的傳輸，該種傳輸方式不需要經過FastWeb所在伺服器的中轉，直接由MQTT Broker向網頁客戶端傳輸，與傳統的MQTT傳輸相比響應速度更快，效能更好。

  使用該種協議要求MQTTBroker支援WebSocket，前端在使用中連線WebSocket埠進行傳輸，範例中的LED燈連正極(長腳)處連線電阻再連線到Ethernet W5100擴充套件板的D8針腳，LED燈負極連線到擴充套件板的GND針腳，以下介紹如何讓利用MQTT通訊協議，達到控制的目的。建議FastWeb使用http進行訪問，

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

2. 零件連線圖

3. 使用零件

序	零件名稱	數量
1	Arduino UNO R3 開發板	1
2	Arduino Ethernet W5100 網路擴充套件板	1
3	USB數據線	1
4	網線	1
5	麵包板	1
6	杜邦線	若干
7	LED燈	1
8	220歐姆電阻	1

  Arduino開發板與Ethernet W5100網路擴充套件板組裝完成後的外觀如下圖所示。

4. Arduino流程圖

5. Arduino程式

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

// pubsubclient MQTT 程式庫  https://github.com/knolleary/pubsubclient
 
#include <SPI.h>
#include <Ethernet.h>
// MQTT 宣告 ========================================================
#include <PubSubClient.h>
EthernetClient ethClient;
PubSubClient client(ethClient);
 
#define LED_PIN 8                                         //定義LED針腳為8
#define STRING_LEN 128
 
// 設定網路IP地址 (網路擴充套件卡的 MAC 可自行修改 +1 以避免衝突)
byte mac[] = {0x90, 0xA2, 0xDA, 0x0E, 0x94, 0xB7 };     
IPAddress ip(192, 168, 0, 163);
IPAddress gateway(192, 168, 0, 1);
IPAddress subnet(255, 255, 255, 0);
 
void setup() {
   Serial.begin(9600);
   Ethernet.begin(mac, ip, gateway, subnet);               // 啟動網路
   Serial.println("網路已啟動"); 
  //設置 MQTT ========================================================
  client.setServer("192.168.0.113", 1883);                 // 連線MQTT Broker
  client.setCallback(callback);                            // 設定從 MQTT Broker讀取主題之後，運行子程式。
  client.connect("arduinoClientMQTTLED","username","password");// 使用MQTT Broker 使用者名稱密碼登錄，設定ClientID
  if (client.connected()) {                                 //如果已經連線上MQTT Broker
    client.subscribe("#");                                 // 自動接收來自 MQTT Broker 所有主題資訊
  }
   delay(1500);
   pinMode(LED_PIN, OUTPUT);                               //設定針腳8為輸出模式
}
 
void loop() {
  // MQTT 開始運行接收主題
  if (!client.connected()) {                               // 如果MQTT Broker不通,將重新連線
     reconnect();
  }
  client.loop();
 }
 
// 接收MQTT主題后呼叫運行程式
void callback(char* topic, byte* payload, unsigned int length) {
  String mapre01;                                       // 預定接收的主題1     /LED
  String mapres;                                        // 實際從 MQTT Broker 接收到的主題
  String information;                                   // 實際從 MQTT Broker 接收到的主題內容
  String LEDOpen="1"; 
  //將 char[] 轉為 String charToStringL(需轉換的 Char陣列, 轉換后的 String)
 
  mapre01 = "LED";                                      //LED 的主題 
  charToStringL(topic, mapres);                         //實際從 MQTT Broker 接收到的主題
  for (int i = 0; i < length; i++) {                    //轉換 MQTT Broker 接收到的主題內容為字串
    information = information + (char)payload[i];
  }
  if (mapres != mapre01) {                              // 不顯示發佈的主題
     Serial.print("接收訊息 " + mapres + " [");
     Serial.print(information);
     Serial.print("] ");
  }
 
  if (mapres == mapre01) {
    if (information == LEDOpen) {                
      Serial.println("打開 LED");
      digitalWrite(LED_PIN, HIGH);                      //PIN 8輸出高電平,LED點亮
    }
    else {
      Serial.println("關閉 LED");
      digitalWrite(LED_PIN, LOW);                       //PIN 8輸出低電平,LED熄滅
    }
  }
  delay(500);                                           //延時500ms
  Serial.println();
}
 
void reconnect() {
  // 一直循環直到連線上 MQTT Broker
  while (!client.connected()) {
    Serial.print("正在連線 MQTT Broker...");
    if (client.connect("arduinoClientMQTTLED","uername","password")) {
      Serial.println("MQTT Broker 已經連線上");
      client.subscribe("#");
    } else {
      Serial.print("連線失敗, rc=");
      Serial.print(client.state());
      Serial.println("五秒之後再進行連線");
      delay(5000);
    }
  }
}
 
//將 char[] 轉為 String 自定函式
void charToStringL(const char S[], String & D)
{
  byte at = 0;
  const char *p = S;
  D = "";
 
  while (*p++) {
    D.concat(S[at++]);
  }
}

6. 設計明細

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

  ①：TUgLabel元件，控制元件名稱為UgLabel01。

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

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

  ④：TUgSwitchImage元件，控制元件名稱為UgSwitchImage01。

• 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的連線使用者名稱。

• ①UgLabel01屬性設定

  • Caption：設定顯示的字幕內容=MQTT-WebSocket控制LED燈。
  • Font.Color：設定顯示的字型顏色=clWhite。
  • Size：設定字型大小=10。

• ②UgSwitchImage02屬性設定

  • Height：設定控制元件高度=50。
  • Width：設定控制元件寬度=50。
  • Stretch：設定畫面拉伸=True。雙擊該控制元件，打開影象編輯器列表，點選新增按鈕打開檔案上傳界面，點選右側的[Browse...]打開影象瀏覽界面，選擇影象后，點選[確定]按鈕返回到檔案上傳界面，點選[Upload]將檔案上傳至編輯器中，待圖片顯示后，關閉該對話方塊，注意開狀態的圖片位於索引0，關狀態的圖片位於索引1。

  

  

• ③UgImage01屬性設定

  • Height：設定控制元件高度=360。
  • Width：設定控制元件寬度=480。
  • Stretch：設定畫面拉伸=True。
  • Picture：設定影象（背景圖片）。點選Picture屬性右側的[√]，打開影象編輯器，點選[Load]按鈕打開檔案上傳界面，點選右側的[Browse...]打開影象瀏覽界面，選擇影象后，點選[確定]按鈕返回到檔案上傳界面，點選[Upload]將檔案上傳至編輯器中，待圖片顯示后，點選[Save]按鈕即可。

  

  

• ④UgSwitchImage01屬性設定

  • Height：設定控制元件高度=50。
  • Width：設定控制元件寬度=50。
  • Stretch：設定畫面拉伸=True。雙擊該控制元件，打開影象編輯器列表，點選新增按鈕打開檔案上傳界面，點選右側的[Browse...]打開影象瀏覽界面，選擇影象后，點選[確定]按鈕返回到檔案上傳界面，點選[Upload]將檔案上傳至編輯器中，待圖片顯示后，關閉該對話方塊，注意開狀態的圖片位於索引0，關狀態的圖片位於索引1。當IsChecked屬性為True時，顯示索引為0的圖片，反之，顯示索引為1的圖片。

  

  

7. 程式設計

7.1. 程式初始設定

  該程式無程式初始設定。

7.2. 事件設定

• ④UgSwitchImage-OnSwitch事件

  點選以開啟/關閉燈光。

//JScript
function ugSwitchImage01OnSwitch(sender)
//開燈關燈
{
  if (ugSwitchImage01.IsChecked)
  {
    UgMQTTws01.Publish("LED","1");
  }
  Else
  { 
    UgMQTTws01.Publish("LED","0");
  }
}

//PasScript
procedure ugSwitchImage01OnSwitch(sender: tobject);
//開燈關燈
begin
  if ugSwitchImage01.IsChecked Then
  Begin
    UgMQTTws01.Publish('LED','1');
  End
  Else if ugSwitchImage01.IsChecked = False Then
  Begin 
    UgMQTTws01.Publish('LED','0');
  End;
end;

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

• UgMQTTws01-OnMessage事件

  當接收到訂閱資訊時，更新LED燈的狀態。

//JScript
function ugMQTTws01OnMessage(atopic,apayload)
{
  if (atopic == "LED"){ 
    if (apayload == "1")
    {
      ugSwitchImage02.IsChecked = true;
    }
    else if (apayload == "0")
    {
      ugSwitchImage02.IsChecked = false;
    }
  }
}

//PasScript
procedure ugMQTTws01OnMessage(const atopic: string;apayload: string);
begin
  if atopic = 'LED' Then
  begin 
    if apayload = '1' Then
    Begin
      ugSwitchImage02.IsChecked := True;
    End
    else if apayload = '0' Then
    Begin
      ugSwitchImage02.IsChecked := False;
    End;
  end;
end;

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

8. 運行結果

  使用滑鼠點選工具欄儲存到資料庫，然後點選運行（Run），測試運行結果。

  點選右側的開關影象，開關打開，上方的燈泡切換為亮燈的狀態，同時連線Arduino開發板的LED發光二極管處於點亮的狀態；在亮燈狀態下，點選右側的開關影象，開關關閉，上方的燈泡切換為燈滅的狀態，同時連線Arduino開發板的LED發光二極管處於關閉的狀態。