ESP32C3SuperMini 基于 Arduino 实现 Web 控制 LED

ESP32C3SuperMini 简介

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 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 连网相关

代码 / 函数	作用与使用说明
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请求执行。