MQTT控制LED灯(WEB)
# 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++]);
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
# 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");
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
//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;
2
3
4
5
6
7
8
9
10
11
12
13
// 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;
}
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
//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;
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Make sure to add code blocks to your code group
# 8. 运行结果
使用鼠标点击工具栏保存到数据库,然后点击运行(Run),测试运行结果。
点击右侧的开关图像,开关打开,上方的灯泡切换为亮灯的状态,同时连接Arduino开发板的LED发光二极管处于点亮的状态;在亮灯状态下,点击右侧的开关图像,开关关闭,上方的灯泡切换为灯灭的状态,同时连接Arduino开发板的LED发光二极管处于关闭的状态。