创客入门神器（ESP32+Arduino）10分钟实现web控制LED

优质文章学习记录

06 Apr 2026 — 10 min read

在AI大模型技术浪潮的推动下，编程正从专业领域走向大众化。以ESP32和Arduino为代表的开源硬件平台，正在系统性降低创客的电子开发门槛，让创意落地变得前所未有的简单。随着AI编程工具与开源硬件的深度融合，电子创作正经历从"技术驱动"到"创意驱动"的转变。这种变革不仅催生了更多教育科技产品，更预示着智能硬件开发将迎来全民化时代，让每个普通人都能成为改变世界的创客。

ESP32C3SuperMini是一款基于 Espressif ESP32-C3 WiFi/蓝牙双模芯片的 IoT 迷你开发板。ESP32-C3 是一款32 位 RISC-V CPU，包含FPU（浮点单元），支持IEEE 802.11 b/g/n WiFi和蓝牙 5 (LE)协议。该板附带外部天线，可增强无线应用的信号强度。有11个可用作PWM引脚的数字I/O和4个可用作ADC引脚的模拟I/O。它支持UART、I2C 和 SPI等四种串行接口。

ESP32C3SuperMini定位为高性能、低功耗、高性价比的物联网迷你开发板，适用于低功耗物联网应用和无线可穿戴应用。

一、快速开始

（1）硬件环境：

1 个ESP32C3SuperMini
1 台电脑
1 根 USB Type-C数据线

（2）软件环境：

Arduino IDE下载安装

到arduino官方网站下载，你电脑操作系统对应的Arduino IDE版本。

https://www.arduino.cc/en/software/

查找esp32，选esp32 by Espressif Systems，2.0.17-cn版本（3.x.x版本安装下载失败）：

2、设置开发板型号与端口

选择设置好对应的开发板型号：

设置开发板下载与通信串口：

首先在windows系统中查找对应的设备串口号，例如下图中显示的COM14。

注：如果开发板通过type-c数据线接入PC，系统没有显示串口设备，是数据线问题或板子问题；显示异常设备是串口驱动没有安装。

在文件 > 工具，选中对应的开发板及端口。

到这一步软硬件环境就准备好，下面就进行编程开发。

二、编程与下载运行

（1）控制LED灯

菜单中打开文件 > 新建项目。

步骤1.将以下代码复制到Arduino IDE的新建项目区。

// 设置LED使用的GPIO引脚 int led = 8; void setup() { // 初始化GPIO为输出模式 pinMode(led, OUTPUT); } void loop() { digitalWrite(led, HIGH); // turn the LED off delay(1000); //延时1000ms digitalWrite(led, LOW); // turn the LED on delay(1000); //延时1000ms }

保存项目，选择工具栏上右箭头图标"-->"编译并上传项目。

上传后，您将看到板子上的LED 闪烁，每次闪烁之间有 1 秒的延迟。

（2）web控制LED灯

#include <WiFi.h> const char* ssid = "wifi"; // 设置wifi名称 const char* password = "1234"; // 设置wifi密码 WiFiServer server(80); //wifi服务器对象初始化 void setup() { Serial.begin(115200); pinMode(8, OUTPUT); delay(10); Serial.println(); Serial.print("Connecting to "); Serial.println(ssid); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println(""); Serial.println("WiFi connected."); Serial.println("IP address: "); Serial.println(WiFi.localIP()); server.begin(); } void loop(){ WiFiClient client = server.available(); // if (client) { Serial.println("New Client."); String; while (client.connected()) { if (client.available()) { char c = client.read(); Serial.write(c); if (c == '\n') { if (currentLine.length() == 0) { client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html; charset=utf-8"); client.println(); client.print("<div>"); client.print("Click <a href=\"/L\">打开LED</a><br><br>"); client.print("Click <a href=\"/H\">关闭LED</a>"); client.print("</div>"); client.println(); break; } else {; } } else if (c != '\r') { currentLine += c; } if (currentLine.endsWith("GET /H")) { digitalWrite(8, HIGH); } if (currentLine.endsWith("GET /L")) { digitalWrite(8, LOW); } } } client.stop(); Serial.println("Client Disconnected."); } }

注：有时网络连接异常时需要按一下boot键

浏览器中输出串口显示的开发板IP，出现下述页面就可控制板上的LED灯。

三、实现原理分析

（1）实现原理

1、代码整体功能

代码实现了两个核心功能：

ESP32 作为 WiFi 客户端，连接到指定名称和密码的路由器，获取局域网 IP 地址；
在 ESP32 上启动一个基于 TCP 80 端口的简易 Web 服务器，当电脑 / 手机浏览器访问该 IP 时，会显示两个超链接：点击 /H 打开引脚 8 的 LED，点击 /L 关闭引脚 8 的 LED。

2、Web 服务原理

Web 服务基于 HTTP 协议 + TCP 80 端口 实现，核心是 “请求 - 响应” 模型：

ESP32 启动 TCP 服务器监听 80 端口（HTTP 协议默认端口）；
浏览器（客户端）向 ESP32 的 IP:80 发送 HTTP 请求（如 GET /L、GET /H）；
ESP32 解析请求内容，根据请求数据（/H//L）执行对应操作（返回网页 / 控制 LED）；
ESP32 向浏览器返回 HTTP 响应（状态码、网页内容），完成一次交互后关闭连接。

3、核心工作流程

WiFi 连网核心：通过 WiFi.begin() 发起连接，WiFi.status() 等待连接成功，WiFi.localIP() 获取访问地址；
Web 服务核心：WiFiServer 监听 80 端口，server.available() 检测客户端连接，通过 client.read() 解析 HTTP 请求路径，client.print() 返回响应内容；
业务逻辑核心：通过判断请求路径（GET /H/GET /L），调用 digitalWrite() 控制 LED 电平。

（2）关键函数分析

1、WiFi 连网相关

代码 / 函数	作用与使用说明
`WiFi.begin(ssid, password)`	核心连网函数：传入 WiFi 名称（ssid）和密码（password），触发 ESP32 向指定路由器发起连接请求。⚠️ 注意：调用后不会立即连接成功，需要等待状态确认。
`WiFi.status()`	检测 WiFi 连接状态的核心函数，返回值是枚举类型，代码中只关注 `WL_CONNECTED` （连接成功），其他常见值：- `WL_DISCONNECTED` ：未连接；- `WL_CONNECT_FAILED` ：密码错误 / SSID 不存在；- `WL_NO_SSID_AVAIL` ：未找到指定 WiFi。
`WiFi.localIP()`	连接成功后，获取 ESP32 在局域网中的 IP 地址（如 192.168.1.100），这是浏览器访问 Web 服务的核心地址，通过串口打印出来供用户查看。
`while (WiFi.status() != WL_CONNECTED)`	循环等待连网：因为 WiFi 连接需要 1~3 秒，通过 500ms 延时的循环，直到状态变为 “已连接” 才继续执行后续代码（启动 Web 服务器）。

2、Web 服务相关

核心对象与启动函数

代码 / 函数	作用与使用说明
`WiFiServer server(80)`	创建 TCP 服务器对象，指定监听 80 端口（HTTP 协议默认端口，浏览器访问时无需手动加端口）。
`server.begin()`	启动 Web 服务器：让 ESP32 开始监听 80 端口的客户端连接请求（如浏览器的访问）。
`WiFiClient client = server.available()`	检测是否有客户端（浏览器）发起连接请求：- 无请求时返回空，`client`为 false；- 有请求时返回一个客户端对象，代表与该浏览器的连接，后续通过这个对象读写数据。

客户端交互核心逻辑

if (client) { // 有客户端连接 while (client.connected()) { // 只要客户端未断开连接，就持续处理 if (client.available()) { // 检测客户端是否有数据（HTTP 请求）发送过来 char c = client.read(); // 读取一个字节的请求数据 // ... 解析数据、处理请求 ... } } client.stop(); // 处理完请求后，关闭与客户端的连接 }

代码 / 函数	作用与使用说明
`client.connected()`	判断当前客户端是否处于连接状态：如果浏览器还没断开，就继续处理数据；如果断开，结束循环。
`client.available()`	检测客户端是否有可读取的字节（即浏览器发送的 HTTP 请求内容），返回可读取的字节数，非 0 时表示有数据。
`client.read()`	读取客户端发送的一个字节数据：HTTP 请求是文本格式（如 `GET /H HTTP/1.1`），通过逐字节读取来解析请求路径。
`client.println()` /`client.print()`	向客户端（浏览器）发送响应数据： - `println()`：发送字符串 + 换行符； - `print()`：仅发送字符串；代码中用来返回 HTTP 响应头、网页 HTML 内容。
`client.stop()`	关闭与客户端的连接：HTTP 是 “短连接”，处理完一次请求后主动关闭连接，释放资源。

HTTP 请求解析逻辑（代码中最核心的业务处理）

浏览器发送的 HTTP 请求示例（点击 /H 时）：

GET /H HTTP/1.1 Host: 192.168.1.100 ...（其他请求头）

代码通过逐字节读取拼接成 currentLine，再通过以下逻辑解析：

代码逻辑	作用与使用说明
`if (c == '\n')`	检测换行符：HTTP 请求的每行内容以 `\r\n`结尾，`\n` 代表一行的结束。如果 `currentLine`为空（连续两个 `\n`），说明请求头解析完成，开始返回响应。
`currentLine += c` (c != '\r')	拼接请求行内容：跳过回车符 `\r`，将有效字符拼接成 `currentLine` ，最终得到如 `GET /H HTTP/1.1` 的字符串。
`currentLine.endsWith("GET /H")`	解析请求路径：判断请求是否是 “打开 LED”，如果是，执行 `digitalWrite(8, HIGH)`；同理，`endsWith("GET /L")`对应关闭 LED。
HTTP 响应头（`client.println("HTTP/1.1 200 OK")` ）	向浏览器返回响应状态：- `HTTP/1.1 200 OK` ：表示请求处理成功；- `Content-type:text/html` ：告诉浏览器返回的是 HTML 格式内容；响应头结束后必须加一个空行（`client.println()` ），这是 HTTP 协议的要求。

3、硬件控制相关

代码 / 函数	作用与使用说明
`pinMode(8, OUTPUT)`	将引脚 8 设置为输出模式：ESP32 控制 LED 必须先设置引脚模式为输出。
`digitalWrite(8, HIGH/LOW)`	控制引脚电平：HIGH 为高电平（LED 亮），LOW 为低电平（LED 灭），对应解析后的 `/H`/`/L`请求执行。