ESP32开发板创建同步WebServer网页服务器
文章目录
前言
ESP32 内置了 Wi-Fi 功能，能够作为网页服务器（Web Server）向网络中的其他设备提供服务。通过在 ESP32 上运行网页服务器，可以创建基于浏览器的用户界面，用于监控传感器数据或控制设备状态，是实现物联网（IoT）应用的基础功能之一。
WebServer 库简介
Arduino-ESP32 核心库内置了 WebServer.h，它提供了一套简洁的 API 来快速构建 Web Server 轻量级的 HTTP 服务器。通过注册路由（URL 路径）及回调函数，实现请求分发与应答。适用于绝大多数典型 IOT 项目的本地网页交互。
选择建议
使用同步WebServer当：
轻量级，入门和资源受限场景，无需额外安装；
项目简单，只有一个用户；
请求处理非常快速（<100ms）；
不需要同时处理其他重要任务；
内存资源非常有限；
使用异步WebServer当：
对大流量/高并发等复杂场景，需要高性能，服务多个用户；
有耗时操作（文件操作、网络请求）；
需要实时功能（WebSocket）；
需要处理上传/下载；
系统有其他重要任务需要及时响应；
同步阻塞模型，服务器一次只能处理一个客户端请求，必须等待当前请求完全处理完成后，才能处理下一个请求。
以下为同步WebServer与异步WebServer对比
基础网页服务 (STA 模式)
在 STA 模式下创建一个基础的网页服务器，用于显示一个包含"Hello World!"的静态页面。
#include<WiFi.h>#include<WebServer.h>constchar*ssid ="Maker";// 替换为你的 Wi-Fi 名称constchar*password ="12345678";// 替换为你的 Wi-Fi 密码 WebServer server(80);voidsetup(){ 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();}voidloop(){ server.handleClient();}// 处理根路径请求voidhandleRoot(){ 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!"页面。
