前言

本篇教程是MQTT的進階篇，在云服務器搭建好了MQTT服務器后，使用網頁連接MQTT服務器，并發布相關的控制信息到服務器指定的Topic，ESP32在本地連接WIFI，訂閱相同的Topic，收到控制信息后開啟關閉響應的燈光。
教程分為三個部分：

網頁的編寫以及連接MQTT

硬件實現部分

實現效果

資源下載

正文

一、網頁的編寫

網頁使用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完整的代碼點擊此處下載

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。