当前位置：首页 > news >正文

用ESP32和Arduino IDE搭建一个能远程控制LED的Web服务器（附完整代码）

news 2026/5/3 9:13:03

用ESP32和Arduino IDE搭建一个能远程控制LED的Web服务器（附完整代码）

想象一下，躺在沙发上用手机就能控制客厅的灯光，或者在外出时远程查看家里的照明状态——这种智能家居的便捷体验，其实用一块不到百元的ESP32开发板就能实现。作为乐鑫科技推出的明星产品，ESP32凭借其强大的Wi-Fi/BLE双模通信能力和丰富的外设接口，已经成为物联网项目开发的首选平台。今天，我们就从零开始，手把手教你如何用ESP32搭建一个可通过浏览器远程控制LED的Web服务器系统。

1. 硬件准备与电路搭建

在开始编写代码前，我们需要先准备好硬件并完成电路连接。这个项目所需的核心元件非常简单：

ESP32开发板（推荐使用ESP32-DevKitC）
LED灯（普通5mm直径即可）
220欧姆电阻（用于限流保护）
面包板和杜邦线（用于临时连接）
Micro USB数据线（用于供电和程序烧录）

电路连接示意图如下：

ESP32 GPIO2 ——[220Ω]—— LED(+) —— LED(-) —— GND

实际操作时需要注意：

长脚为LED正极，需通过电阻连接GPIO2
短脚为LED负极，直接连接GND
电阻值可在220Ω-1kΩ间选择，值越大LED亮度越低

提示：如果使用其他GPIO引脚，记得在代码中相应修改。避免使用GPIO0、GPIO12等有特殊功能的引脚。

2. 开发环境配置

确保你的Arduino IDE已经正确配置了ESP32开发环境。如果尚未安装，按以下步骤操作：

打开Arduino IDE，进入"文件 > 首选项"

在"附加开发板管理器网址"中添加：

https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json

打开"工具 > 开发板 > 开发板管理器"，搜索"esp32"并安装最新版

安装完成后，在开发板选择中挑与你硬件匹配的型号（如"ESP32 Dev Module"）。接着安装必要的库：

#include <WiFi.h> #include <WebServer.h>

这两个库将分别负责Wi-Fi连接和Web服务器功能。WebServer库是ESP32 Arduino核心自带的，无需额外安装。

3. 核心代码实现

下面是我们项目的完整代码框架，我将分段解释每个部分的作用：

// 网络配置 const char* ssid = "你的WiFi名称"; const char* password = "你的WiFi密码"; // 创建WebServer实例，监听80端口 WebServer server(80); // LED控制引脚 const int ledPin = 2; bool ledState = false; // 根页面HTML内容 String getHTML() { String html = R"( <!DOCTYPE html> <html> <head> <title>ESP32 LED控制</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: Arial; text-align: center; margin-top: 50px; } .btn { padding: 10px 20px; font-size: 16px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; } </style> </head> <body> <h1>ESP32远程LED控制</h1> <p>当前LED状态: )"; html += (ledState ? "ON" : "OFF"); html += R"(</p> <button class="btn" onclick="toggleLED()">切换LED</button> <script> function toggleLED() { fetch('/toggle') .then(response => response.text()) .then(data => { document.querySelector('p').innerHTML = '当前LED状态: ' + data; }); } </script> </body> </html> )"; return html; } // 处理根目录请求 void handleRoot() { server.send(200, "text/html", getHTML()); } // 处理LED切换请求 void handleToggle() { ledState = !ledState; digitalWrite(ledPin, ledState); server.send(200, "text/plain", ledState ? "ON" : "OFF"); } void setup() { Serial.begin(115200); pinMode(ledPin, OUTPUT); // 连接Wi-Fi WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println(""); Serial.println("WiFi连接成功"); Serial.println("IP地址: "); Serial.println(WiFi.localIP()); // 设置路由 server.on("/", handleRoot); server.on("/toggle", handleToggle); server.begin(); Serial.println("HTTP服务器已启动"); } void loop() { server.handleClient(); }

3.1 代码关键点解析

Web界面设计：
- 使用响应式设计，适配手机和电脑浏览器
- 通过CSS美化按钮样式
- 采用现代fetch API实现无刷新状态更新
状态同步机制：
- 每次切换操作后，服务器返回最新状态
- 前端JavaScript动态更新显示内容
- 避免了传统表单提交导致的页面刷新
路由处理：
- /路径返回完整HTML页面
- /toggle路径处理LED切换逻辑

4. 高级功能扩展

基础功能实现后，我们可以考虑添加更多实用特性：

4.1 多设备控制

修改HTML部分，添加多个控制按钮：

<button class="btn" onclick="controlLED(1)">LED1</button> <button class="btn" onclick="controlLED(2)">LED2</button> <script> function controlLED(num) { fetch('/control?led=' + num) .then(response => response.text()) .then(data => { // 更新界面状态 }); } </script>

相应地在Arduino代码中添加：

void handleControl() { int ledNum = server.arg("led").toInt(); // 根据ledNum控制不同LED server.send(200, "text/plain", "OK"); }

4.2 状态持久化

使用EEPROM保存LED状态，重启后恢复：

#include <EEPROM.h> void saveState() { EEPROM.write(0, ledState); EEPROM.commit(); } void loadState() { ledState = EEPROM.read(0); digitalWrite(ledPin, ledState); } void setup() { EEPROM.begin(1); loadState(); // ...其他初始化代码 }

4.3 安全增强

添加基础认证功能：

void handleRoot() { if(!server.authenticate("admin", "password")) { return server.requestAuthentication(); } server.send(200, "text/html", getHTML()); }