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

在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、代码整体功能

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

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

2、Web 服务原理

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

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

3、核心工作流程

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

（2）关键函数分析

1、WiFi 连网相关

2、Web 服务相关

核心对象与启动函数

客户端交互核心逻辑

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

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

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

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

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

3、硬件控制相关