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发光二极管处于关闭的状态。