PinToo之MQTTClient控制元件使用

1. 說明

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

  通過範例學習，可以掌握fxMQTTClient控制元件的基本使用。

2. 設計明細

  開啟PinToo設計器，分別加入下插圖之控制元件。或者點選左上角的[打開模板Lib檔案]選擇模板檔案來打開對應模板。

  ①：TfxMQTTClient元件，控制元件名稱為fxMQTTClient1。

  ②：TfxEdit元件，控制元件名稱為fxEditHost。

  ③：TfxEdit元件，控制元件名稱為fxEditPort。

  ④：TfxEdit元件，控制元件名稱為fxEditTopic。

  ⑤：TfxEdit元件，控制元件名稱為fxEditMessage。

  ⑥：TfxSuperButton元件，控制元件名稱為fxSuperButtonSend。

  ⑦：TfxSwitchButton元件，控制元件名稱為fxSwitchButton1。

• fxRunFrame屬性設定

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

• ①fxMQTTClient1屬性設定

  • BrokerHostName：MQTT中介軟體的IP地址，此處設定為實際使用的MQTT中介軟體伺服器的IP地址，例如192.168.0.176。
  • BrokerPort：MQTT中介軟體使用的埠，預設的埠為1883。

• ②fxEditHost屬性設定

  • TextSettings.Font：設定編輯框中內容的字型樣式，設定Size=18。設定前取消所有StyledSettings中的選項的勾。
  • Text：設定編輯框中的文字內容，此處設定MQTT服務端地址=192.168.0.176。
  • Name：設定控制元件名稱=fxEditHost。
  • Height：設定控制元件高度=35。
  • Width：設定控制元件寬度=260。

• ③fxEditPort屬性設定

  • TextSettings.Font：設定編輯框中內容的字型樣式，設定Size=18。設定前取消所有StyledSettings中的選項的勾。
  • Text：設定編輯框中的文字內容，此處設定MQTT服務埠號=1883。
  • Name：設定控制元件名稱=fxEditPort。
  • KeyBoardType：設定輸入時使用的鍵盤型別，設定為NumberPad，即數字輸入鍵盤。
  • Height：設定控制元件高度=35。
  • Width：設定控制元件寬度=260。

• ④fxEditTopic屬性設定

  • TextSettings.Font：設定編輯框中內容的字型樣式，設定Size=18。設定前取消所有StyledSettings中的選項的勾。
  • Text：設定編輯框中的文字內容，此處設定MQTT服務訂閱主題=Message。
  • TextPrompt：設定編輯框中為空時顯示的文字內容=請輸入發佈的主題。
  • Name：設定控制元件名稱=fxEditTopic。
  • Height：設定控制元件高度=35。
  • Width：設定控制元件寬度=260。

• ⑤fxEditMessage屬性設定

  • TextSettings.Font：設定編輯框中內容的字型樣式，設定Size=18。設定前取消所有StyledSettings中的選項的勾。
  • Text：設定編輯框中的文字內容，此處設定MQTT服務訂閱主題內容=你好，PinToo!。
  • TextPrompt：設定編輯框中為空時顯示的文字內容=請輸入發佈的訊息。
  • Name：設定控制元件名稱=fxEditMessage。
  • Height：設定控制元件高度=35。
  • Width：設定控制元件寬度=260。

• ⑥fxSuperButtonSend屬性設定

  • Height：設定控制元件高度=150。
  • Width：設定控制元件寬度=150。
  • ButtonType：設定按鈕型別，設定為TfxSvgButton。
  • Enabled：設定是否啟用按鈕，設定為False。
  • Name：設定控制元件名稱=fxSuperButtonSend。
  • Opacity：設定按鈕的透明度=0.9。
  • ButtonType.SvgData：設定SVG數據，其數據內容如下。

  <path d="M132.746246337891,7.70252180099487 C132.705505371094,7.6810245513916 132.525421142578,7.60215091705322 132.084686279297,7.60215091705322 C131.674133300781,7.60215091705322 130.946823120117,7.67488241195679 129.803207397461,8.01801490783691 C124.769569396973,9.82205009460449 24.4941444396973,45.760196685791 21.8088188171387,46.6689834594727 C21.6777381896973,46.71337890625 21.5388355255127,46.7598686218262 21.3936538696289,46.8084449768066 C20.5035724639893,47.1063537597656 19.3957176208496,47.4769859313965 18.4343013763428,47.9199333190918 C17.8161582946777,48.2047119140625 17.4337959289551,48.439094543457 17.2017860412598,48.6078758239746 C19.6911087036133,50.8016700744629 33.8943023681641,62.2861709594727 37.8143768310547,65.4522705078125 L116.579032897949,19.7935810089111 L56.1739768981934,79.8014831542969 L63.1645126342773,88.4129180908203 L63.122917175293,88.4467010498047 C73.1373062133789,100.709884643555 88.0415649414063,118.887023925781 90.617301940918,121.839538574219 C91.146369934082,121.196136474609 91.9655456542969,119.7080078125 92.5567474365234,117.463256835938 L92.6014175415039,117.314163208008 C93.1873092651367,115.576446533203 130.51139831543,15.8407144546509 132.380783081055,10.8454484939575 C133.105712890625,8.55770492553711 132.789093017578,7.78907585144043 132.746246337891,7.70252323150635 Z" p-id="14800" fill="#FF53AFFD" stroke="Null"></path>
  <path d="M53.9265785217285,84.3349609375 L50.6866340637207,92.4487152099609 L50.834888458252,92.3747253417969 L53.9571571350098,84.3727722167969 Z" p-id="14801" fill="#FF53AFFD" stroke="Null"></path>
  <path d="M136.459564208984,4.98160362243652 C135.799957275391,4.07756280899048 134.505462646484,3 132.084686279297,3 C131.009765625,3 129.808685302734,3.20632648468018 128.412841796875,3.63042759895325 L128.305480957031,3.66588544845581 C127.252632141113,4.04322099685669 22.9908256530762,41.4103012084961 20.3335590362549,42.3097381591797 C20.2070846557617,42.352596282959 20.0732078552246,42.397403717041 19.9331912994385,42.444034576416 C17.0474071502686,43.4097785949707 13.0949487686157,44.7323341369629 12.4385547637939,47.7499008178711 C12.2150573730469,48.7770690917969 12.3088684082031,50.3379211425781 14.0245351791382,51.9402313232422 L14.0641803741455,51.9761085510254 C16.5215358734131,54.1662712097168 32.0355567932129,66.7011108398438 35.3348350524902,69.3645172119141 L43.603401184082,101.126571655273 L47.9539985656738,98.9539947509766 L48.0702896118164,99.00048828125 L48.1223564147949,98.8699645996094 L60.6059722900391,92.6361694335938 C66.1710739135742,99.4476165771484 86.2981262207031,124.056365966797 87.6787643432617,125.436981201172 L87.6957931518555,125.444793701172 C88.7522811889648,126.479644775391 89.8389205932617,126.6796875 90.5648345947266,126.6796875 L90.5658111572266,126.6796875 C92.24853515625,126.6796875 93.7434997558594,125.634658813477 95.0088195800781,123.540679931641 C95.7974166870117,122.235565185547 96.4970855712891,120.53971862793 96.9827423095703,118.725082397461 C97.9828338623047,115.922637939453 123.326843261719,48.1677169799805 136.710723876953,12.4049005508423 L136.746887207031,12.3006210327148 C137.784942626953,9.06290817260742 137.690704345703,6.66878890991211 136.459594726563,4.98160028457642 Z M92.5567626953125,117.463256835938 C91.9656982421875,119.7080078125 91.1463928222656,121.196136474609 90.6173095703125,121.839538574219 C88.0415802001953,118.887161254883 73.1373138427734,100.709884643555 63.122932434082,88.4467010498047 L63.1645355224609,88.4129180908203 L56.1739883422852,79.8014831542969 L116.579048156738,19.793586730957 L37.8143882751465,65.4522705078125 C33.8944549560547,62.2861785888672 19.6912651062012,50.8016700744629 17.2017993927002,48.6078796386719 C17.4336738586426,48.4390983581543 17.8161735534668,48.2045745849609 18.4343166351318,47.9199371337891 C19.3955936431885,47.4769859313965 20.5035877227783,47.1063537597656 21.3936672210693,46.8084449768066 C21.5388488769531,46.7598686218262 21.6777534484863,46.71337890625 21.8088359832764,46.6689910888672 C24.4941577911377,45.7602043151855 124.769584655762,9.82205104827881 129.803253173828,8.01801681518555 C130.946823120117,7.67488384246826 131.674133300781,7.6021523475647 132.084686279297,7.6021523475647 C132.525421142578,7.6021523475647 132.705505371094,7.68102598190308 132.74626159668,7.70252323150635 C132.789123535156,7.78907585144043 133.105712890625,8.55756664276123 132.380920410156,10.8453092575073 C130.511566162109,15.8405694961548 93.1873474121094,115.576293945313 92.6015777587891,117.314025878906 L92.556770324707,117.463256835938 Z M50.686637878418,92.4486999511719 L53.9264450073242,84.3349456787109 L53.9571571350098,84.3726501464844 L58.2397689819336,89.6483612060547 L50.1088409423828,94.2351531982422 L50.8347587585449,92.3745727539063 L50.6866416931152,92.4486999511719 Z M88.0424194335938,41.6554412841797 L51.8676452636719,77.5923309326172 L51.5293960571289,77.9284820556641 L45.8108787536621,92.2492370605469 L39.9743995666504,69.5196228027344 L88.0424194335938,41.6554489135742 Z" p-id="14802" fill="Black" stroke="Null"></path>
  <path d="M51.5292587280273,77.9286193847656 L51.8675079345703,77.5924682617188 L88.0424194335938,41.6554374694824 L39.9742584228516,69.5197601318359 L45.8105964660645,92.2493438720703 Z" p-id="14803" fill="White" stroke="Null"></path>
  <path d="M58.2399024963379,89.6484985351563 L53.9571571350098,84.3727722167969 L50.8348960876465,92.3747253417969 L50.1088409423828,94.2352905273438 Z" p-id="14804" fill="#FF1083EA" stroke="Null"></path>
  

• ⑦fxSwitchButton1屬性設定

  • Height：設定控制元件高度=55。
  • Width：設定控制元件寬度=95。

3. 程式設計

  點選程式設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。該程式需要引用 TMSMQTTConnection 、 TMSMQTTClient 、TMSMQTTGlobal 單元。

3.1. 程式初始設定

  該程式無初始設定。

3.2. 事件設定

• ⑦fxSwitchButton1-OnSwitch事件

  點選切換開啟或者關閉MQTT客戶端。

Procedure fxSwitchButton1OnSwitch(Sender: TObject);
//開啟、關閉MQTT客戶端
Begin
  if fxSwitchButton1.IsChecked Then
  begin
    fxMQTTClient1.BrokerHostName := fxEditHost.Text;
    fxMQTTClient1.BrokerPort := StrToInt(fxEditPort.Text);  
    fxMQTTClient1.Connect(false);
    fxSuperButtonSend.Enabled := True; 
   End;
  else
  begin
    fxMQTTClient1.Disconnect;
    fxSuperButtonSend.Enabled := False;    
  End;
End;

• ⑥fxSuperButtonSend-OnClick事件

  點選發送按鈕，發送訂閱主題。

Procedure fxSuperButtonSendOnClick(Sender: TObject);
//發送資訊
Begin
  if fxEditTopic.Text = '' Then
  begin
    ShowMessage('主題不可為空！');
    Exit;
  End;
  if fxEditMessage.Text = '' Then
  begin
    ShowMessage('內容不可為空！');
    Exit;
  End;
  fxMQTTClient1.Subscribe(fxEditTopic.Text,qosAtMostOnce);
  fxMQTTClient1.Publish(fxEditTopic.Text,fxEditMessage.Text,qosAtMostOnce,false);  
End;

• ①fxMQTTClient1-OnPublishReceivedUTF8事件

  當MQTT客戶端接收到事件后彈出訊息框顯示內容。

Procedure fxMQTTClient1OnPublishReceivedUTF8(ASender: TObject; APacketID: Word; ATopic: string; APayload: string);
//接收資訊
Begin
  ShowMessage('接收主題：' + ATopic + ' 接收內容：' + APayload);
End;

4. 運行結果

  使用滑鼠在 PinToo 功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。

  通過同步中心，將程式上傳至手機PinToo運行；同步時，請確保手機已經運行PinToo，並且已經登陸。

  點選[發送]按鈕，發佈資訊，訂閱同主題的設備將會接收到訊息。