MQTT进阶:web端远程控制LED灯

最新推荐文章于 2025-07-01 16:38:47 发布

原创

最新推荐文章于 2025-07-01 16:38:47 发布 · 2.1k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#html #物联网 #arduino

本教程介绍了如何使用MQTT在网页上远程控制ESP32的LED灯。首先，通过Bootstrap创建响应式网页并利用jQuery监听按钮事件，连接MQTT服务器发布指令。然后，ESP32在Arduino IDE环境下编写代码，订阅相关Topic接收控制信号。教程还包括硬件连接、实现效果展示及资源下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

该项目主要有四个步骤
1.控制端网页的编写以及连接MQTT
2.硬件实现部分
3.实现效果
4.资源下载

在这里插入图片描述
EMQ X服务器的编写请参考
https://blog.csdn.net/weixin_44636409/article/details/115897253

一、网页的编写

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

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>mqtt.min.js 测试</title>
 <script src="mqtt.min.js"></script> <!-- 引处MQTT.MINI.JS库文件 -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
	<script src="js/jquery-2.1.4.min.js"></script>
	<script src="js/jquery.cookie.min.js"></script>
<link rel="stylesheet" href="./css/style.css" crossorigin="anonymous">
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="js/bootstrap/js/bootstrap.min.js"></script>
	<script src="js/vue.js"></script>
	<script src="js/mqtt.min.js"></script> <!-- 引处MQTT.MINI.JS库文件 -->
	<!-- <script src="js/app.js"></script> -->
	<title></title>
	<meta name="description"