ESP32C3SuperMini 基于 Arduino 实现 Web 控制 LED

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

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

二、编程与下载运行

（1）控制 LED 灯

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

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

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

三、实现原理分析

（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、硬件控制相关