一、WebServer 库核心概念

ESP32 的WebServer库是 ESP32 Arduino 核心库的一部分（无需额外安装），它的核心作用是：

  • 让 ESP32 作为HTTP 服务器，监听指定端口（默认 80）；

  • 接收浏览器 / 客户端的 HTTP 请求（如访问http://192.168.1.100/led/on）；

  • 绑定 “URL 路径（路由）” 和 “处理函数”，比如访问/led/on就执行点亮 LED 的函数；

  • 向客户端返回网页内容、状态码或重定向指令。

二、基础使用步骤（核心流程）

使用WebServer库的核心步骤固定，无论功能复杂与否，都遵循以下流程：

1. 前置条件

确保你的 Arduino IDE 已安装 ESP32 开发板支持（文件→首选项→附加开发板管理器网址添加https://dl.espressif.com/dl/package_esp32_index.json），无需额外安装WebServer库（内置）。

2. 核心步骤拆解

步骤

操作说明

核心代码示例

1

引入必要库

#include <WiFi.h>

（连 WiFi）#include <WebServer.h>

（Web 服务器）

2

配置 WiFi 信息

const char* ssid = "你的WiFi名";

const char* password = "你的WiFi密码";

3

创建 WebServer 实例

WebServer server(80);

（80 是 HTTP 默认端口）

4

注册路由与处理函数

server.on("/", handleRoot);

（访问根路径执行 handleRoot 函数）server.on("/led/on", handleLEDOn);

（访问 /led/on 执行 handleLEDOn）

5

连接 WiFi 并启动服务器

WiFi.begin(ssid, password);

server.begin();

6

循环处理客户端请求

server.handleClient();

（必须放在 loop () 中，持续监听请求）

三、完整可运行示例（温湿度 + LED / 继电器控制）

下面是一个覆盖核心用法的完整示例，包含温湿度显示、LED / 继电器控制、404 页面处理，你可以直接复制到 Arduino IDE 中使用（记得修改 WiFi 信息）：

web采集与控制实例

#include <WiFi.h>
#include <WebServer.h>
#include <DHT.h>

// ====================== 硬件配置 ======================
#define DHTPIN     4       // DHT11/DHT22数据引脚
#define DHTTYPE    DHT11   // 温湿度传感器类型
#define LED_PIN    2      // LED控制引脚（ESP32自带LED）
#define RELAY_PIN  13      // 继电器控制引脚

// ====================== WiFi配置 ======================
const char* ssid     = "你的WiFi名称";
const char* password = "你的WiFi密码";

// ====================== 初始化对象 ======================
WebServer server(80);       // 创建WebServer实例，监听80端口
DHT dht(DHTPIN, DHTTYPE);   // 创建DHT传感器实例

// ====================== 处理函数：根页面（核心交互页） ======================
void handleRoot() {
    // 1. 读取温湿度数据
    float temp = dht.readTemperature();  // 读取温度（℃）
    float hum = dht.readHumidity();      // 读取湿度（%）
    // 处理传感器读取失败的情况
    if (isnan(temp) || isnan(hum)) {
        temp = 0.0;
        hum = 0.0;
    }

    // 2. 构建HTML网页内容（前端界面）
    String html = "<!DOCTYPE html>";
    html += "<html lang='zh-CN'>";
    html += "<head><meta charset='UTF-8'><title>ESP32智能家居</title>";
    // 简单样式，让界面更美观（可选）
    html += "<style>body{max-width:400px;margin:20px auto;font-family:Arial;}";
    html += "button{padding:10px 20px;margin:5px;background:#007bff;color:white;border:none;border-radius:5px;cursor:pointer;}";
    html += "button:hover{background:#0056b3;}</style>";
    html += "</head>";

    html += "<body>";
    html += "<h1>📱 ESP32智能家居控制</h1>";
    html += "<h3>🌡️ 温湿度监测</h3>";
    html += "温度：" + String(temp, 1) + " ℃<br>";  // 保留1位小数
    html += "湿度：" + String(hum, 1) + " %<br><br>";

    html += "<h3>💡 LED控制</h3>";
    html += "<a href='/led/on'><button>LED 打开</button></a>";
    html += "<a href='/led/off'><button>LED 关闭</button></a><br><br>";

    html += "<h3>🔌 继电器控制</h3>";
    html += "<a href='/relay/on'><button>继电器 打开</button></a>";
    html += "<a href='/relay/off'><button>继电器 关闭</button></a>";
    html += "</body></html>";

    // 3. 向客户端返回网页内容（200=成功，text/html=内容类型）
    server.send(200, "text/html", html);
}

// ====================== 处理函数：LED控制 ======================
void handleLEDOn() {
    digitalWrite(LED_PIN, HIGH);  // 点亮LED（ESP32自带LED是低电平点亮，若反向则改LOW）
    server.sendHeader("Location", "/");  // 重定向回根页面
    server.send(302);  // 302=临时重定向
}

void handleLEDOff() {
    digitalWrite(LED_PIN, LOW);   // 关闭LED
    server.sendHeader("Location", "/");
    server.send(302);
}

// ====================== 处理函数：继电器控制 ======================
void handleRelayOn() {
    digitalWrite(RELAY_PIN, HIGH);  // 打开继电器（根据继电器类型调整高低电平）
    server.sendHeader("Location", "/");
    server.send(302);
}

void handleRelayOff() {
    digitalWrite(RELAY_PIN, LOW);   // 关闭继电器
    server.sendHeader("Location", "/");
    server.send(302);
}

// ====================== 处理函数：404页面（访问不存在的路径） ======================
void handleNotFound() {
    String message = "页面不存在！<br>你访问的路径：" + server.uri();
    server.send(404, "text/html", message);  // 404=页面不存在
}

// ====================== 初始化函数 ======================
void setup() {
    // 1. 初始化串口（查看调试信息）
    Serial.begin(115200);

    // 2. 初始化硬件引脚
    pinMode(LED_PIN, OUTPUT);
    pinMode(RELAY_PIN, OUTPUT);
  digitalWrite(LED_PIN, LOW);    // 初始关闭LED
  digitalWrite(RELAY_PIN, LOW);  // 初始关闭继电器
  dht.begin();                   // 初始化温湿度传感器

  // 3. 连接WiFi
  Serial.print("连接WiFi: ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  
  // 等待WiFi连接成功
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi连接成功！");
  Serial.print("ESP32的IP地址：");
  Serial.println(WiFi.localIP());  // 打印ESP32的局域网IP（关键！）

  // 4. 注册路由（绑定URL路径和处理函数）
  server.on("/", handleRoot);          // 根路径 → 显示主界面
  server.on("/led/on", handleLEDOn);   // /led/on → 打开LED
  server.on("/led/off", handleLEDOff); // /led/off → 关闭LED
  server.on("/relay/on", handleRelayOn); // /relay/on → 打开继电器
  server.on("/relay/off", handleRelayOff); // /relay/off → 关闭继电器
  server.onNotFound(handleNotFound);   // 所有未注册的路径 → 404页面

  // 5. 启动Web服务器
  server.begin();
  Serial.println("Web服务器已启动！");
}

// ====================== 主循环 ======================
void loop() {
  server.handleClient();  // 核心！持续监听并处理客户端的HTTP请求
  delay(10);              // 轻微延时，降低CPU占用
}

 程序运行注意事项

  1. 修改代码中的ssid和password为你的 WiFi 名称和密码；

  2. 确认硬件接线：DHT11 接引脚 4，LED 接引脚 2，继电器接引脚 13（可根据实际接线修改引脚定义）；

  3. 上传代码到 ESP32，打开串口监视器（波特率 115200）；

  4. 串口会打印 ESP32 的 IP 地址（如192.168.1.100）；

  5. 在同一局域网的手机 / 电脑浏览器中输入该 IP，即可看到控制界面。

四、WebServer 库核心功能详解

1. 核心函数说明

函数

作用

示例

WebServer server(端口)

创建 WebServer 实例

WebServer server(80);

server.on(路径, 处理函数)

注册 GET 请求路由

server.on("/led/on", handleLEDOn);

server.on(路径, HTTP_METHOD, 处理函数)

注册指定 HTTP 方法的路由（如 POST）

server.on("/api", HTTP_POST, handleAPI);

server.send(状态码, 类型, 内容)

向客户端返回响应

server.send(200, "text/html", "成功");

server.sendHeader(键, 值)

设置响应头（如重定向）

server.sendHeader("Location", "/");

server.handleClient()

处理客户端请求（必须放 loop ()）

loop(){ server.handleClient(); }

server.uri()

获取客户端访问的 URL 路径

String path = server.uri();

server.arg(参数名)

获取 URL 中的参数

String ledState = server.arg("state");

server.onNotFound(函数)

处理未注册的路径

server.onNotFound(handleNotFound);

2. 进阶用法：获取 URL 参数（比如动态控制）

如果想通过 URL 参数传递指令（如http://IP/control?dev=led&state=on），可以这样实现：

// 新增处理函数
void handleControl() {
    String dev = server.arg("dev");    // 获取参数dev的值
    String state = server.arg("state");// 获取参数state的值

    if (dev == "led" && state == "on") {
        digitalWrite(LED_PIN, HIGH);
    } else if (dev == "led" && state == "off") {
        digitalWrite(LED_PIN, LOW);
    }

    server.send(200, "text/plain", "控制成功：" + dev + " → " + state);
}

// 在setup()中注册路由
server.on("/control", handleControl);

五、常见问题与注意事项

  1. WiFi 连接失败：检查 WiFi 名称 / 密码是否正确，确保 ESP32 和路由器在同一频段（ESP32 支持 2.4G，不支持 5G）；

  2. 无法访问 ESP32 的 IP：确保手机 / 电脑和 ESP32 在同一局域网，关闭电脑防火墙；

  3. 网页显示乱码：HTML 中必须添加<meta charset='UTF-8'>；

  4. ESP32 重启 / 卡顿：避免在处理函数中执行耗时操作（如delay(1000)），耗时操作应放在 loop () 中；

  5. 引脚电平反向：部分 LED / 继电器是低电平触发，需将HIGH改为LOW。

# 物联网 # 智能硬件 # 智能家居
Logo
AI智能硬件创业者社区

智能硬件社区聚焦AI智能硬件技术生态，汇聚嵌入式AI、物联网硬件开发者，打造交流分享平台，同步全国赛事资讯、开展 OPC 核心人才招募，助力技术落地与开发者成长。

更多推荐

cover

ESP32 显示越南字体异常的排查与修复

avatar AI智能硬件创业者社区
cover

ESP32面包板ML307模块串口引脚配置问题排查

avatar AI智能硬件创业者社区
cover

ESP32 显示越南字符的字体配置与排障

avatar AI智能硬件创业者社区