前言

本篇教程是MQTT的进阶篇，在云服务器搭建好了MQTT服务器后，使用网页连接MQTT服务器，并发布相关的控制信息到服务器指定的Topic，ESP32在本地连接WIFI，订阅相同的Topic，收到控制信息后开启关闭响应的灯光。
教程分为三个部分：

1. 网页的编写以及连接MQTT
2. 硬件实现部分
3. 实现效果
4. 资源下载
   

正文

一、网页的编写

网页使用Bootstrap进行界面布局，再使用jQuery监测按钮时间，使用Bootstrap编写的网页是响应式网页，可以在不同的客户端自适应，显得较为美观。网页再通过client.publish(topic, ’ ')函数向服务器发送指令，从而向ESP32发出命令，MQTT部分要通过引用mqtt.min.js来实现。
Bootstrap文档地址：https://v3.bootcss.com/
核心部分代码

实现最后实现的网页效果
在手机上打开

二、硬件实现

硬件部分使用ESP32作为主控，连接网络和MQTT服务器，接收指令并作出响应。

硬件连线

# ESP32----------RGBLED
# GND---------------GND
# P21--------------R
# P19--------------G
# P18--------------B

核心代码
在callback回调函数中可以设置收到指令时的执行动作

完整的代码点击此处下载

三、实现效果

点击网页相应的按钮，可以实现相应的灯开关。把远程控制的网页放到我服务器上，就可以在外网访问了http://www.shenshian.top/MQTT_Control_EMQ.html。

放上视频效果链接视频效果连接

四、资源下载

点击这里下载完整的网页代码
ESP32完整的代码点击此处下载