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，并且已经登陆。

  点击[发送]按钮，发布信息，订阅同主题的设备将会接收到消息。