前言

本篇教程是MQTT的進(jìn)階篇，在云服務(wù)器搭建好了MQTT服務(wù)器后，使用網(wǎng)頁(yè)連接MQTT服務(wù)器，并發(fā)布相關(guān)的控制信息到服務(wù)器指定的Topic，ESP32在本地連接WIFI，訂閱相同的Topic，收到控制信息后開(kāi)啟關(guān)閉響應(yīng)的燈光。
教程分為三個(gè)部分：

網(wǎng)頁(yè)的編寫(xiě)以及連接MQTT

硬件實(shí)現(xiàn)部分

實(shí)現(xiàn)效果

資源下載

正文

一、網(wǎng)頁(yè)的編寫(xiě)

網(wǎng)頁(yè)使用Bootstrap進(jìn)行界面布局，再使用jQuery監(jiān)測(cè)按鈕時(shí)間，使用Bootstrap編寫(xiě)的網(wǎng)頁(yè)是響應(yīng)式網(wǎng)頁(yè)，可以在不同的客戶端自適應(yīng)，顯得較為美觀。網(wǎng)頁(yè)再通過(guò)client.publish(topic, ’ ')函數(shù)向服務(wù)器發(fā)送指令，從而向ESP32發(fā)出命令，MQTT部分要通過(guò)引用mqtt.min.js來(lái)實(shí)現(xiàn)。
Bootstrap文檔地址：https://v3.bootcss.com/
核心部分代碼

實(shí)現(xiàn)最后實(shí)現(xiàn)的網(wǎng)頁(yè)效果
在手機(jī)上打開(kāi)

二、硬件實(shí)現(xiàn)

硬件部分使用ESP32作為主控，連接網(wǎng)絡(luò)和MQTT服務(wù)器，接收指令并作出響應(yīng)。

硬件連線

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

核心代碼
在callback回調(diào)函數(shù)中可以設(shè)置收到指令時(shí)的執(zhí)行動(dòng)作

完整的代碼點(diǎn)擊此處下載

三、實(shí)現(xiàn)效果

點(diǎn)擊網(wǎng)頁(yè)相應(yīng)的按鈕，可以實(shí)現(xiàn)相應(yīng)的燈開(kāi)關(guān)。把遠(yuǎn)程控制的網(wǎng)頁(yè)放到我服務(wù)器上，就可以在外網(wǎng)訪問(wèn)了http://www.shenshian.top/MQTT_Control_EMQ.html。

放上視頻效果鏈接視頻效果連接

四、資源下載

點(diǎn)擊這里下載完整的網(wǎng)頁(yè)代碼
ESP32完整的代碼點(diǎn)擊此處下載

總結(jié)

以上是生活随笔為你收集整理的MQTT进阶篇之网页远程控制灯光（云服务器+EMQ+ESP32）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。