前言
ESP32 内置了 Wi-Fi 功能，能够作为网页服务器（Web Server）向网络中的其他设备提供服务。通过在 ESP32 上运行网页服务器，可以创建基于浏览器的用户界面，用于监控传感器数据或控制设备状态，是实现物联网（IoT）应用的基础功能之一。
WebServer 库简介
Arduino-ESP32 核心库内置了 WebServer.h，它提供了一套简洁的 API 来快速构建 Web Server 轻量级的 HTTP 服务器。通过注册路由（URL 路径）及回调函数，实现请求分发与应答。适用于绝大多数典型 IOT 项目的本地网页交互。
选择建议
使用同步 WebServer 当： 轻量级，入门和资源受限场景，无需额外安装； 项目简单，只有一个用户； 请求处理非常快速（<100ms）； 不需要同时处理其他重要任务； 内存资源非常有限；
使用异步 WebServer 当： 对大流量/高并发等复杂场景，需要高性能，服务多个用户； 有耗时操作（文件操作、网络请求）； 需要实时功能（WebSocket）； 需要处理上传/下载； 系统有其他重要任务需要及时响应；
同步阻塞模型，服务器一次只能处理一个客户端请求，必须等待当前请求完全处理完成后，才能处理下一个请求。
基础网页服务 (STA 模式)
在 STA 模式下创建一个基础的网页服务器，用于显示一个包含"Hello World!"的静态页面。
#include <WiFi.h>
#include <WebServer.h>
const char* ssid = "Maker"; // 替换为你的 Wi-Fi 名称
const char* password = "12345678"; // 替换为你的 Wi-Fi 密码
WebServer server(80);
void setup() {
Serial.begin(115200);
delay(10);
// 连接 WiFi 网络
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.on("/", handleRoot);
server.begin();
}
void loop() {
server.handleClient();
}
// 处理根路径请求
void handleRoot(){
server.send(200,"text/html",generateHTML());
}
// 生成 HTML 页面内容
String generateHTML(){
String htmlContent = "<!DOCTYPE html> <html>\n";
htmlContent += "<head><meta charset=\"utf-8\" name=\"viewport\" content=\"width=device-width\">\n";
htmlContent += "<title>ESP32S3 Test</title>\n";
htmlContent += "</head><body>\n";
htmlContent += "<h1>Hello World!</h1>\n";
htmlContent += "<p>Hello from ESP32</p>\n";
htmlContent += "</body>\n";
htmlContent += "</html>\n";
return htmlContent;
}
代码解释
#include <WebServer.h>：引入 Web Server 库，用以在 ESP32 上创建 HTTP 服务器。
WebServer server(80);：创建一个服务器对象，监听标准的 HTTP 端口 80。80 是 HTTP 协议的默认端口。
server.on("/", handleRoot);：注册路由处理函数。当客户端访问根路径"/"时，调用 handleRoot() 函数。
server.begin();：启动服务器，开始监听客户端的连接请求。
server.handleClient();：在 loop() 中持续调用，处理传入的客户端请求。
handleRoot()：这是一个自定义的回调函数，用于处理特定路径的请求。
server.send(statusCode, contentType, content);：向客户端发送一个 HTTP 响应。向客户端浏览器返回包含'Hello World'的简单 HTML 页面。
200：HTTP 状态码，200 OK 表示请求成功。
'text/html'：MIME 类型，告知浏览器响应内容是 HTML 文本。
generateHTML()：函数返回的字符串，即网页的实际内容。
generateHTML()：一个辅助函数，将 HTML 代码拼接成一个 String 对象，返回包含完整 HTML 结构的字符串。
运行结果
将代码中的 ssid 和 password 修改为目标 Wi-Fi 网络的名称和密码后上传。串口监视器将显示连接过程和获取到的 IP 地址。在同一局域网的设备上打开浏览器，输入显示的 IP 地址，即可看到"Hello World!"页面。
