ESP32 实战教程：搭建 Web 服务器实现 LED 远程开关控制

优质文章学习记录

08 Apr 2026 — 8 min read

一.实验材料

1.esp32板子

2.led

3.220欧的电阻

4.面包板

二.实验思路

其实做这个实验的核心就是让 ESP32 既当 “WiFi 热点 / 联网设备”，又当 “Web 服务器”，还能响应网页的操作去控制硬件，说白了就是把 “网络请求” 和 “GPIO 引脚控制” 串起来，具体拆成这几步想就很清晰：

1. 先想清楚 “怎么让设备联网”

首先得让 ESP32 能和电脑 / 手机通信，最直接的就是两种方式：要么让 ESP32 连家里的路由器（STA 模式），要么让它自己建个 WiFi 热点（SoftAP 模式）。新手做的话优先选热点模式，不用依赖路由器，手机直接连 ESP32 的热点就能通信，少了 “找路由器 IP、配网络” 的麻烦，先把核心功能跑通再说。

2. 再想 “怎么让 ESP32 变成 Web 服务器”

Web 服务器的本质就是 “监听 80 端口，接收浏览器的请求，返回对应的内容”。所以第一步要初始化 WebServer 库，指定监听 80 端口；然后给不同的 “访问路径” 绑定对应的处理函数 —— 比如访问根路径 “/” 就返回带按键的网页，访问 “/on” 就执行开灯操作，访问 “/off” 就执行关灯操作。这里的关键是：浏览器点一下按键，其实就是给 ESP32 发了一个 HTTP 请求，ESP32 识别请求的路径，就知道该做什么了。

3. 接着想 “网页该怎么写”

网页不用搞复杂，核心就是两个按键，点一下能触发对应的请求。首先 HTML 要简单，加个样式让按键好看点（新手也能看懂），还要动态显示当前 LED 状态 —— 比如开灯后网页上能显示 “当前状态：开启”，这样用户能直观看到效果。按键的实现很简单，用<a>标签套<button>，点击后跳转到 “/on” 或 “/off” 路径，本质就是让浏览器给 ESP32 发这个路径的请求。

4. 最后把 “网络请求” 和 “硬件控制” 绑起来

ESP32 收到 “/on” 请求时，就把控制 LED 的 GPIO 引脚设为高电平（开灯）；收到 “/off” 请求时，把引脚设为低电平（关灯）。操作完硬件后，一定要重定向回根路径，这样用户点完按键会自动回到带状态的主页，而不是停留在空白的 “/on” 页面，体验更顺。

三.实验代码

#include <WiFi.h> #include <WebServer.h> #define ledpin 2 const char* ssid="你的WiFi名称"; const char* password="你的WiFi密码"; WebServer server(80); void handleRoot() { // 获取当前LED状态 String ledState = digitalRead(ledpin) ? "开启" : "关闭"; // 构建HTML页面内容 String html = "<!DOCTYPE html>"; html += "<html lang='zh-CN'>"; html += "<head>"; html += "<meta charset='UTF-8'>"; html += "<meta name='viewport' content='width=device-width, initial-scale=1.0'>"; html += "<title>ESP32 LED控制</title>"; html += "<style>"; html += "body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }"; html += ".btn { padding: 15px 30px; font-size: 20px; margin: 10px; border: none; border-radius: 8px; cursor: pointer; }"; html += ".on { background-color: #4CAF50; color: white; }"; html += ".off { background-color: #f44336; color: white; }"; html += ".status { font-size: 24px; margin: 20px 0; color: #333; }"; html += "</style>"; html += "</head>"; html += "<body>"; html += "<h1>ESP32 LED控制器</h1>"; html += "<div>当前状态：LED " + ledState + "</div>"; // 开灯按键，点击后访问/on路径 html += "<a href='/on'><button>开灯</button></a>"; // 关灯按键，点击后访问/off路径 html += "<a href='/off'><button>关灯</button></a>"; html += "</body>"; html += "</html>"; // 发送HTML页面给客户端 server.send(200, "text/html", html); } void callbackon(){ digitalWrite(ledpin,HIGH); Serial.println("开灯"); } void callbackoff(){ digitalWrite(ledpin,LOW); Serial.println("关灯"); } void setup(){ Serial.begin(115200); pinMode(ledpin,OUTPUT); digitalWrite(ledpin,LOW); WiFi.begin(ssid,password); int num=0; while(WiFi.status()!=WL_CONNECTED&&num<100){ Serial.print("."); delay(50); num++; } if(WiFi.status()==WL_CONNECTED){ Serial.println(WiFi.localIP()); } else{ Serial.println("连接失败"); while(1); } server.on("/",handleRoot); server.on("/on",callbackon); server.on("/off",callbackoff); server.begin(); } void loop(){ server.handleClient(); }

（粗糙代码）

代码里的收获：

1.server.on 是用来实现点击html页面上的设定按键，调用函数，达到开关灯，和进入原始界面的效果

2.server.handleClient() 是用来持续保持监听的

四.实验图片

五.遇到的问题与解决

做这个 ESP32 Web 服务器控制 LED 的实验，看似简单，但新手很容易卡在各种小问题上，我把实操中遇到的核心问题和对应的解决办法整理如下：

问题 1：连接 ESP32 热点后，浏览器访问 IP 地址一直打不开网页

现象：手机 / 电脑连好了 ESP32 的 WiFi 热点，输入串口显示的 IP（比如 192.168.4.1），浏览器提示 “无法访问”“连接超时”。排查 & 解决：

先看串口监视器：确认代码上传成功后，串口有没有打印 “WiFi 热点已启动，IP 地址：192.168.4.1”，如果没打印，大概率是 WiFi 初始化失败，重新上传代码或重启 ESP32。
检查设备网络：手机连 ESP32 热点后，关掉手机的移动数据（避免系统自动切换网络）；电脑连热点后，确认 IPv4 地址是 192.168.4.x 网段（不是的话手动设置：IP 填 192.168.4.2，网关填 192.168.4.1）。
端口是否被占用：确认代码里 WebServer 监听的是 80 端口（默认端口，浏览器访问时不用加端口号），如果改了端口，访问时要加 “IP: 端口号”（比如 192.168.4.1:8080）。

问题 2：网页能打开，但点击 “开灯 / 关灯” 按键没反应，LED 不亮

现象：网页加载正常，能看到按键和状态，但点击按键后，LED 没变化，网页状态也不更新。排查 & 解决：

先查引脚配置：确认代码里的ledPin是实际控制的引脚（比如板载 LED 是 GPIO2，有些开发板是 GPIO13），可以先写个简单的闪烁程序测试引脚是否正常。
查路由绑定：确认代码里server.on("/on", handleOn)和server.on("/off", handleOff)这两行没写错，路径名（/on、/off）要和 HTML 里<a href='/on'>的路径完全一致（区分大小写！比如 / On 和 /on 是两个路径）。
查电平逻辑：有些 LED 是 “低电平点亮”（共阳接法），这时要把digitalWrite(ledPin, HIGH)改成LOW，LOW改成HIGH，可以先手动给引脚接 3.3V/GND 测试 LED 点亮逻辑。

问题 3：HTML 页面显示乱码（中文变成问号 / 方块）

现象：网页里的 “开灯”“当前状态” 等中文显示异常，英文正常。排查 & 解决：核心是没加字符编码声明！在 HTML 的<head>里必须加<meta charset='UTF-8'>，而且要放在<head>的最前面，ESP32 返回 HTML 时，浏览器才会用 UTF-8 解码中文。另外，Arduino IDE 编写代码时，要确保文件编码也是 UTF-8（IDE 顶部 “文件”->“首选项”，确认 “编码” 选 UTF-8）。

问题 4：代码上传失败，提示 “端口被占用” 或 “无法连接开发板”

现象：点击上传后，IDE 提示 “Failed to upload”，串口监视器也打不开。排查 & 解决：

关闭占用串口的软件：比如串口助手、其他 IDE 的串口监视器，Windows 用户可以在 “设备管理器” 里看 ESP32 对应的 COM 口是否被占用。
重启开发板：上传前先按 ESP32 的 “BOOT” 键，再点击上传，直到 IDE 显示 “Connecting...” 再松开，解决引导模式问题。
检查数据线：用原装数据线（有些数据线只有充电功能，没有数据传输），插电脑后置 USB 口（前置口电压不稳）。

问题 5：网页点击按键后，跳转到空白页面，不返回主页

现象：点击 “开灯” 后，浏览器跳转到http://192.168.4.1/on，页面空白，需要手动刷新才能看到状态变化。排查 & 解决：忘记加重定向代码！在“开灯”()和“关灯”()函数里，必须加server.redirect("/");，让 ESP32 处理完 GPIO 操作后，自动跳回根路径（主页），而不是停留在 /on 或 /off 路径（这两个路径没有返回任何 HTML 内容）。