基于 ESP32 与 Arduino 的 Web 控制 LED 入门教程

保存后点击编译并上传图标。上传成功后，板载 LED 将每秒闪烁一次。

（2）Web 控制 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。

三、实现原理分析

（1）实现原理

1、代码整体功能

1. ESP32 作为 WiFi 客户端连接路由器，获取局域网 IP；
2. 启动 TCP 80 端口的简易 Web 服务器，浏览器访问 IP 时显示链接，点击 /H 打开 LED，点击 /L 关闭 LED。

2、Web 服务原理

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

1. ESP32 监听 80 端口；
2. 浏览器发送 HTTP 请求（如 GET /L）；
3. ESP32 解析请求并执行操作，返回 HTML 响应；
4. 交互完成后关闭连接。

3、核心工作流程

1. WiFi 连网：WiFi.begin() 发起连接，WiFi.status() 等待成功，WiFi.localIP() 获取地址；
2. Web 服务：WiFiServer 监听端口，server.available() 检测连接，client.read() 解析请求；
3. 业务逻辑：判断请求路径调用 digitalWrite() 控制电平。

（2）关键函数分析

1、WiFi 连网相关

2、Web 服务相关

核心对象与启动函数

客户端交互核心逻辑

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

HTTP 请求解析逻辑

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

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

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

3、硬件控制相关