基于 ESP32C3 与 Arduino 的 Web 服务器 LED 远程控制实战

上传成功后，板载 LED 将以 1 秒间隔闪烁。

2. 进阶功能：Web 控制 LED

此段代码让 ESP32 连接 WiFi 并启动简易 Web 服务器，通过浏览器访问 IP 地址即可控制 LED。

#include <WiFi.h>

const char* ssid = "wifi";      // 替换为你的 WiFi 名称
const char* password = "1234";  // 替换为你的 WiFi 密码
WiFiServer server(80);          // 创建 HTTP 服务器对象

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) {
            // 发送 HTTP 响应头
            client.println("HTTP/1.1 200 OK");
            client.println("Content-Type: text/html; charset=utf-8");
            client.println();
            
            // 返回 HTML 页面内容
            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 地址，在浏览器输入该地址即可看到控制页面。

三、原理分析

1. 核心功能逻辑

代码主要实现了两个步骤：

1. WiFi 连接：ESP32 作为客户端连接路由器，获取局域网 IP。
2. Web 服务：在 TCP 80 端口启动服务器，监听浏览器的 HTTP 请求，根据请求路径（/H 或 /L）切换 GPIO 电平。

2. Web 服务交互流程

基于 HTTP 协议 + TCP 80 端口 的 '请求 - 响应' 模型：

• ESP32 监听 80 端口。
• 浏览器发送 GET /H 请求。
• ESP32 解析请求，执行 digitalWrite。
• ESP32 返回 HTML 响应，随后断开连接。

3. 关键函数说明

4. 请求解析细节

浏览器发送的请求示例如下：

GET /H HTTP/1.1
Host: 192.168.1.100
...

代码通过逐字节读取拼接成 currentLine，利用 endsWith("GET /H") 判断意图。当检测到换行符且行内容为空时，表示请求头结束，此时返回 HTTP 响应头（如 200 OK）和 HTML 体。响应头结束后必须加一个空行，符合 HTTP 协议规范。