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的地址以及端口号，点击连接右侧的开关打开连接，填写主题以及内容后，点击下方的发送图标，此时会弹窗显示接收到的主题以及订阅信息。