介绍如何使用 ESP32-C3 SuperMini 开发板配合 Arduino IDE 实现通过 Web 页面控制 LED 灯。内容包括硬件环境准备、软件安装配置、代码编写与上传，以及底层原理分析。ESP32 作为 WiFi 客户端连接路由器并启动 TCP 80 端口 Web 服务器，浏览器访问 IP 地址后发送 HTTP 请求控制引脚电平，从而实现远程开关 LED。
ESP32-C3 是一款 32 位 RISC-V CPU，包含 FPU（浮点单元），支持 IEEE 802.11 b/g/n WiFi 和蓝牙 5 (LE) 协议。ESP32C3SuperMini 是一款基于该芯片的 IoT 迷你开发板，附带外部天线以增强无线信号强度，拥有 11 个数字 I/O 引脚和 4 个模拟 I/O 引脚，支持 UART、I2C 和 SPI 等接口。
访问 arduino 官方网站下载对应操作系统的版本。 https://www.arduino.cc/en/software/
在 Arduino IDE 中查找 esp32，选择 esp32 by Espressif Systems，推荐使用 2.0.17-cn 版本（3.x.x 版本可能存在安装问题）：
在工具栏中选择对应的开发板型号及端口。 首先在 Windows 系统中查找对应的设备串口号（例如 COM14）。如果系统未显示串口设备，请检查数据线或安装串口驱动。
在 文件 > 工具 中选中对应的开发板及端口。
新建项目并将以下代码复制到 Arduino IDE：
// 设置 LED 使用的 GPIO 引脚
int led = 8;
void setup() {
// 初始化 GPIO 为输出模式
pinMode(led, OUTPUT);
}
void loop() {
digitalWrite(led, HIGH); // 打开 LED
delay(1000); // 延时 1000ms
digitalWrite(led, LOW); // 关闭 LED
delay(1000); // 延时 1000ms
}
保存后点击编译并上传图标。上传成功后，板载 LED 将每秒闪烁一次。
#include <WiFi.h>
const char* ssid = "wifi"; // 设置 WiFi 名称
const char* password = "1234"; // 设置 WiFi 密码
WiFiServer server(80); // WiFi 服务器对象初始化
String currentLine = "";
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 currentLine = "";
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 {
currentLine = "";
}
} 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。
/H 打开 LED，点击 /L 关闭 LED。基于 HTTP 协议 + TCP 80 端口 的请求 - 响应模型：
GET /L）；WiFi.begin() 发起连接，WiFi.status() 等待成功，WiFi.localIP() 获取地址；WiFiServer 监听端口，server.available() 检测连接，client.read() 解析请求；digitalWrite() 控制电平。| 代码 / 函数 | 作用与使用说明 |
|---|---|
WiFi.begin(ssid, password) | 核心连网函数：传入 WiFi 名称和密码，触发连接请求。注意调用后需等待状态确认。 |
WiFi.status() | 检测连接状态，关注 WL_CONNECTED（已连接）。其他值包括 WL_DISCONNECTED（未连接）、WL_CONNECT_FAILED（密码错误）等。 |
WiFi.localIP() | 获取 ESP32 在局域网中的 IP 地址，供浏览器访问使用。 |
while (WiFi.status() != WL_CONNECTED) | 循环等待连网，通常需 1~3 秒，期间通过延时避免阻塞后续代码。 |
| 代码 / 函数 | 作用与使用说明 |
|---|---|
WiFiServer server(80) | 创建 TCP 服务器对象，指定监听 80 端口（HTTP 默认端口）。 |
server.begin() | 启动 Web 服务器，开始监听客户端连接请求。 |
WiFiClient client = server.available() | 检测是否有客户端连接。无请求返回空，有请求返回客户端对象用于读写数据。 |
if (client) { // 有客户端连接
while (client.connected()) { // 只要客户端未断开
if (client.available()) { // 检测是否有数据发送过来
char c = client.read(); // 读取字节数据
// ... 解析数据、处理请求 ...
}
}
client.stop(); // 处理完请求后关闭连接
}
| 代码 / 函数 | 作用与使用说明 |
|---|---|
client.connected() | 判断当前客户端是否处于连接状态。 |
client.available() | 检测客户端是否有可读取的字节数，非 0 表示有数据。 |
client.read() | 读取一个字节数据，用于逐字节解析 HTTP 请求文本。 |
client.println() / client.print() | 向客户端发送响应数据，前者含换行符，后者不含。 |
client.stop() | 关闭与客户端的连接，释放资源。 |
浏览器发送的 HTTP 请求示例（点击 /H 时）：
GET /H HTTP/1.1
Host: 192.168.1.100
...
代码通过逐字节读取拼接成 currentLine，再通过以下逻辑解析：
| 代码逻辑 | 作用与使用说明 |
|---|---|
if (c == '\n') | 检测换行符，代表一行结束。连续两个 ` |
| ` 说明请求头解析完成。 | |
currentLine += c (c != '\r') | 拼接请求行内容，跳过回车符，得到如 GET /H HTTP/1.1 的字符串。 |
currentLine.endsWith("GET /H") | 解析请求路径，判断是否为'打开 LED'，执行对应 digitalWrite。 |
client.println("HTTP/1.1 200 OK") | 返回响应状态码及类型，响应头结束后必须加空行。 |
| 代码 / 函数 | 作用与使用说明 |
|---|---|
pinMode(8, OUTPUT) | 将引脚 8 设置为输出模式。 |
digitalWrite(8, HIGH/LOW) | 控制引脚电平：HIGH 亮，LOW 灭。 |
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online