跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI 生图工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
C++

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

ESP32 内置 Wi-Fi 功能,可作为网页服务器向网络设备提供服务。介绍基于 Arduino-ESP32 核心库构建同步 WebServer 的方法,对比同步与异步服务器的适用场景,并提供 STA 模式下显示静态页面的完整代码示例及配置说明,适用于资源受限或简单交互的物联网项目。

城市逃兵发布于 2026/2/9更新于 2026/9/127.4K 浏览
ESP32 开发板搭建同步 WebServer 网页服务

前言

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){
    ();
    Serial.();
  }
  Serial.();
  Serial.();
  Serial.();
  Serial.(WiFi.());
  
  server.(, handleRoot);
  server.();
}

{
  server.();
}


{
  server.(,,());
}


{
  String htmlContent = ;
  htmlContent += ;
  htmlContent += ;
  htmlContent += ;
  htmlContent += ;
  htmlContent += ;
  htmlContent += ;
  htmlContent += ;
   htmlContent;
}
delay
500
print
"."
println
println
"WiFi connected."
println
"IP address: "
println
localIP
// 配置路由和启动服务器
on
"/"
begin
void loop()
handleClient
// 处理根路径请求
void handleRoot()
send
200
"text/html"
generateHTML
// 生成 HTML 页面内容
String generateHTML()
"<!DOCTYPE html> <html>\n"
"<head><meta charset=\"utf-8\" name=\"viewport\" content=\"width=device-width\">\n"
"<title>ESP32S3 Test</title>\n"
"</head><body>\n"
"<h1>Hello World!</h1>\n"
"<p>Hello from ESP32</p>\n"
"</body>\n"
"</html>\n"
return

代码解释 #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!"页面。

目录

  1. 前言
  2. WebServer 库简介
  3. 基础网页服务 (STA 模式)
  4. 运行结果

更多推荐文章

查看全部
  • 骑士一百天 Minecraft 整合包安装指南
  • AI 助力六花直装 V8.3.9 自动化开发与测试
  • 使用 LLaMA-Factory 训练 Qwen2.5-VL 进行目标检测
  • 钉钉 Webhook 完全指南
  • AI 图生图与视频生成完整工作流及提示词参数表
  • 如何降低 AIGC 检测率:15 个提示词优化写作风格
  • Whisper Turbo:超 99 种语言的极速语音识别模型
  • 使用 Dify 搭建合同审查法律文书机器人 Agent
  • Claude Code Rules 配置指南:从基础到进阶的最佳实践
  • macOS 上安装 notepad-- 文本编辑器的 5 种方法
  • Git 工作流程详解:四种主流模式与实用技巧
  • Nginx Linux 环境下的安装、配置与维护实战
  • 零成本搭建飞书机器人:用 Webhook 实现高效消息推送
  • ROS2 功能包创建与 CMake 编译链路详解
  • Claude Code Skills 实战指南:用模块化技能包重构 AI 开发工作流
  • Claude Skills 开源仓库精选与安装配置实战指南
  • ROG-Map:一种高效的大场景 LiDAR 机器人中心栅格地图
  • Moltbot 本地 AI 模型完全独立部署指南
  • 3-RPS 并联机器人运动仿真与轨迹控制
  • AI Skills 重构前端开发工作流:元编程时代

相关免费在线工具

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online

  • Markdown转HTML

    将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online

  • HTML转Markdown

    将 HTML 片段转为 GitHub Flavored Markdown,支持标题、列表、链接、代码块与表格等;浏览器内处理,可链接预填。 在线工具,HTML转Markdown在线工具,online

  • JSON 压缩

    通过删除不必要的空白来缩小和压缩JSON。 在线工具,JSON 压缩在线工具,online

  • JSON美化和格式化

    将JSON字符串修饰为友好的可读格式。 在线工具,JSON美化和格式化在线工具,online