ESP32开发板创建同步WebServer网页服务器

文章目录

前言
[WebServer 库简介](#WebServer 库简介)
基础网页服务 (STA 模式)
运行结果

前言

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!"的静态页面。

c 复制代码

#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!"页面。

ESP32开发板创建同步WebServer网页服务器

文章目录

前言

WebServer 库简介

基础网页服务 (STA 模式)

运行结果​

运行结果