Smart之MQTTClient控制元件使用

1. 說明

  學習使用MQTTClient控制元件，瞭解MQTT通訊協議的工作模式。通過Smart智慧控制平臺，實現MQTTClient控制元件的使用，學會使用該控制元件后可進行MQTT協議相關的物聯網開發。使用該控制元件需安裝MQTT服務端獲取MQTT伺服器的IP地址與埠號使用者名稱，密碼，TARS提供MQTT伺服器的功能 。

  通過實體的製作和學習，您可以掌握Smart智慧控制平臺內MQTTClient的使用方式，幫助實現在該平臺上MQTT協議物聯網應用的開發。

2. 設計明細

  開啟Smart智慧控制平臺，分別加入下插圖之控制元件。或者通過點選功能表欄[檔案]-[打開專案]選擇範例專案檔案來打開該範例。

  ①：TImage元件，控制元件名稱為Image1。

  ②：TMQTTClient元件，控制元件名稱為MQTTClient1。

  ③：TLabel元件，控制元件名稱為Label1。

  ④：TLabel元件，控制元件名稱為Label2。

  ⑤：TEdit元件，控制元件名稱為EditHost。

  ⑥：TEdit元件，控制元件名稱為EditPort。

  ⑦：TLabel元件，控制元件名稱為Label3。

  ⑧：TLabel元件，控制元件名稱為Label4。

  ⑨：TLabel元件，控制元件名稱為Label5。

  ⑩：TLabel元件，控制元件名稱為Label6。

  (11)：TEdit元件，控制元件名稱為EditTopic。

  (12)：TEdit元件，控制元件名稱為EditSend。

  (13)：TImage元件，控制元件名稱為ImageSend。

  (14)：TSwitchButton元件，控制元件名稱為SwitchButton1。

• Main主窗體設定

  • BorderStyle：設定窗體樣式型別=bsDialog。
  • Caption：設定窗體標題=MQTTClient控制元件使用。
  • ClientHeight：設定窗體客戶區高度=438。
  • ClientWidth：設定窗體客戶區寬度=465。

• ①Image1屬性設定

  • Align：設定對齊方式=alClient。
  • Stretch：設定圖片拉伸=True。
  • Picture：設定圖片。   點選Picture屬性右側的[...]按鈕，打開檔案上傳界面，點選[Load...]從檔案瀏覽器中選擇對應的圖片檔案上傳，返回該界面下，待顯示出圖片後點擊[OK]載入圖片。

  

• ②MQTTClient1屬性設定

  • BrokerHostName：設定MQTT服務端的地址，例如=192.168.0.176。

• ③Label1屬性設定

  • Caption：設定標籤顯示的字幕內容=MQTTClient控制元件使用。
  • Font：設定字型。雙擊該屬性或者點選屬性右側的[...]打開字型設定界面。

  

• ④Label2屬性設定

  • Caption：設定標籤顯示的字幕內容=地址：。
  • Font：設定字型。雙擊該屬性或者點選屬性右側的[...]打開字型設定界面。

  

• ⑤EditHost屬性設定

  • Text：設定編輯框中的文字資訊，此處預設為MQTT服務端的IP地址，例如192.168.0.176。
  • Name：設定控制元件名稱=EditHost。
  • Font：設定字型。雙擊該屬性或者點選屬性右側的[...]打開字型設定界面。

  

• ⑥EditPort屬性設定

  • Text：設定編輯框中的文字資訊，此處預設為MQTT服務端的埠號，例如1883。
  • Name：設定控制元件名稱=EditPort。
  • NumbersOnly：設定是否只顯示數字=True。
  • Font：設定字型。雙擊該屬性或者點選屬性右側的[...]打開字型設定界面。

  

• ⑦Label3屬性設定

  • Caption：設定標籤顯示的字幕內容=埠：。
  • Font：設定字型。雙擊該屬性或者點選屬性右側的[...]打開字型設定界面。

  

• ⑧Label4屬性設定

  • Caption：設定標籤顯示的字幕內容=連線：。
  • Font：設定字型。雙擊該屬性或者點選屬性右側的[...]打開字型設定界面。

  

• ⑨Label5屬性設定

  • Caption：設定標籤顯示的字幕內容=主題：。
  • Font：設定字型。雙擊該屬性或者點選屬性右側的[...]打開字型設定界面。

  

• ⑩Label6屬性設定

  • Caption：設定標籤顯示的字幕內容=主題：。
  • Font：設定字型。雙擊該屬性或者點選屬性右側的[...]打開字型設定界面。

  

• (11)EditTopic屬性設定

  • Text：設定編輯框中的文字資訊，此處預設為MQTT的訂閱資訊，例如Message。
  • Name：設定控制元件名稱=EditTopic。
  • Font：設定字型。雙擊該屬性或者點選屬性右側的[...]打開字型設定界面。

  

• (12)EditSend屬性設定

  • Name：設定控制元件名稱=EditSend。
  • TextHint：設定內容為空時顯示的提示資訊=在此輸入要發送的內容。
  • Font：設定字型。雙擊該屬性或者點選屬性右側的[...]打開字型設定界面。

  

• (13)ImageSend屬性設定

  • Height：設定控制元件高度=97。
  • Width：設定控制元件寬度=105。
  • Stretch：設定圖片拉伸=True。
  • Picture：設定顯示的圖片。點選Picture屬性右側的[...]按鈕，打開檔案上傳界面，點選[Load...]從檔案瀏覽器中選擇對應的圖片檔案上傳，返回該界面下，待顯示出圖片後點擊[OK]載入圖片。

  

• (14)SwitchButton1屬性設定

  • Height：設定控制元件高度=56。
  • Width：設定控制元件寬度=56。
  • Stretch：設定圖片拉伸=True。
  • SwitchOff：設定IsChecked=False時顯示的圖片。點選SwitchOff屬性右側的[...]按鈕，打開檔案上傳界面，點選[Load...]從檔案瀏覽器中選擇對應的圖片檔案上傳，返回該界面下，待顯示出圖片後點擊[OK]載入圖片。

  

  • SwitchOn：設定IsChecked=True時顯示的圖片。點選SwitchOn屬性右側的[...]按鈕，打開檔案上傳界面，點選[Load...]從檔案瀏覽器中選擇對應的圖片檔案上傳，返回該界面下，待顯示出圖片後點擊[OK]載入圖片。

  

3. 程式設計

3.1. 程式初始設定

  在程式啟動時，將地址與埠號賦值給MQTT控制元件。

constructor TMyHandler.Create(AOwner: TComponent);
begin
  FThis :=TBaseForm(AOwner);
  FThis.MQTTClient1.BrokerHostName := FThis.EditHost.Text;
  FThis.MQTTClient1.BrokerPort := StrToInt(FThis.EditPort.Text);
end;

3.2. 事件設定

• (14)SwitchButton1-OnSwitch事件

  開啟或者關閉MQTT客戶端。

procedure TMyHandler.SwitchButton1Switch;
//開啟關閉MQTT客戶端
begin
  FThis.MQTTClient1.BrokerHostName := FThis.EditHost.Text;
  FThis.MQTTClient1.BrokerPort := StrToInt(FThis.EditPort.Text);
  FThis.MQTTClient1.Enabled := FThis.SwitchButton1.IsChecked;
  FThis.ImageSend.Enabled := FThis.SwitchButton1.IsChecked;
end;

• (13)ImageSend-OnClick事件

  點選發送的圖片按鈕以發送MQTT訂閱資訊。

procedure TMyHandler.ImageSendClick;
//向特定主題發佈訊息
begin
  if FThis.EditTopic.Text = '' then
  begin
    ShowMessage('發送的主題不可為空！');
    Exit;  
  end;
  if FThis.EditSend.Text = '' then
  begin
    ShowMessage('發送的訊息不可為空！');
    Exit;
  end;
  FThis.MQTTClient1.Subscribe(FThis.EditTopic.Text);
  FThis.MQTTClient1.PublishStr(FThis.EditTopic.Text, FThis.EditSend.Text);  
end;

• ②MQTTClient1-OnPublishReceived事件

  當MQTT客戶端接收到訂閱資訊時彈出訊息框顯示接收內容。

procedure TMyHandler.MQTTClient1PublishReceived;
//訂閱主題接收資訊並顯示
begin
  ShowMessage('接收主題名稱：' + ATopic + ' 接收內容：' + APayload);
end;

4. 運行結果

  通過工具欄儲存，將程式儲存為 sdb 專案檔案。

  使用滑鼠點選工具欄運行（Run），測試運行結果。填寫MQTT的地址以及埠號，點選連線右側的開關打開連線，填寫主題以及內容后，點選下方的發送圖示，此時會彈窗顯示接收到的主題以及訂閱資訊。