一、ESP32 到底有多强？

很多人只把 ESP32 看作一块带 Wi‑Fi 的单片机，用来驱动继电器、读取温湿度。
但它有一个非常强悍、却常被忽视的能力：
它可以自己架设一个完整的 Web 服务器。

就是那种你在浏览器输入一个 IP 地址，就能看到一个网页，还能在上面操作、看数据的服务器。
不需要云平台，不需要树莓派，ESP32 自己就把活儿全干了。

它凭什么能做到？

• 内置 Wi‑Fi 和 TCP/IP 协议栈
  ESP32 芯片本身就支持 802.11 b/g/n，官方固件里移植了 lwIP 网络库，让它可以像电脑一样理解“IP 地址”“端口”“TCP 连接”。

• 轻量级 HTTP 服务库
  ESP‑IDF 开发框架提供了一个叫 httpd 的组件，能自动处理 HTTP 请求的解析、路由分发。你只需要给他相应的路由。

所以，它本质上就是一台性能虽弱但功能完备的网络服务器，只不过它专为物联网而生，功耗只有几瓦，体积比硬币还小。

---

二、How to do that？

要让 ESP32 成为一个 Web 服务器，你需要让它监听对应的 HTTP 请求、根据 URL 路径分发处理、并返回 HTML 或 JSON 等内容。

整个流程可以概括为：
连网 → 启动服务器 → 注册路由 → 处理请求

下面以 ESP‑IDF 的 esp_http_server 库为例，梳理核心步骤和关键函数。

---

① 连接 Wi‑Fi

ESP32 必须先获取一个局域网 IP 地址，否则服务器无法被访问。
对应函数：esp_wifi_init()、esp_wifi_start()、esp_wifi_connect() 等，通常由 wifi_provisioning 或事件回调完成。

---

② 启动 HTTP 服务器

调用一次 httpd_start()，它会创建一个后台任务，默认监听 80 端口。

---

③ 注册 URI 路由

告诉服务器：

• 当访问 / 时调哪个函数

• 访问 /api/status 时调哪个函数……

每个路由都是一个 httpd_uri_t 结构体，包含 路径、方法（GET/POST）、处理函数，通过 httpd_register_uri_handler() 绑定。

---

④ 编写处理函数

每个处理函数接收一个 httpd_req_t* 句柄，从中可以读取请求信息，然后调用一系列函数构造并发送响应。

---

⑤ 关闭服务器（可选）

程序结束时可以调用 httpd_stop() 释放资源。

---

连接 Wi‑Fi 后，启动服务与注册路由

void start_http_server(void)
{
    //开启http服务
    httpd_handle_t server = NULL;
    httpd_config_t config = HTTPD_DEFAULT_CONFIG();
    httpd_start(&server, &config);
    //注册路由（这里注册的是网页根2路由，本质是Html字符串）
    httpd_uri_t uri = { .uri = "/", .method = HTTP_GET, .handler = root_handler };
    httpd_register_uri_handler(server, &uri);
}

这段代码绑定了 GET / 这个请求，由 root_handler 处理（返回网页）。

---

🔗 本质是“路由表”的建立

注册完成后，ESP32 的 HTTP 服务内部就生成了一张表：

• 客户端请求 GET / 时，自动调用 root_handler

• 如果注册了其他的路由，路由表里面就会有对应的路由处理函数

---

路由处理函数

esp_err_t root_handler(httpd_req_t *req)
{
    const char *html ="......"
    httpd_resp_set_type(req, "text/html; charset=utf-8");
    httpd_resp_send(req, html, strlen(html));
    return ESP_OK;
}

关键函数解读：

• httpd_resp_set_type(req, "text/html; charset=utf-8");
  设置 HTTP 响应头里的 Content-Type，浏览器看到这个才会按网页渲染，并且正确处理中文字符。

• httpd_resp_send(req, html, strlen(html));
  真正把字符串内容推送给客户端。它会自动在前面拼好状态行 HTTP/1.1 200 OK、Content-Length 等必要的头部，你只管给内容。

---

🌐 完整请求流程

连接 Wi‑Fi 且开启 HTTP 服务后：

1. 你在浏览器地址栏输入 http://192.168.1.100（假设这是 ESP32 的 IP）。

2. 浏览器会向 192.168.1.100 的 80 端口 发送一个 HTTP 请求，内容大致是：

GET / HTTP/1.1
Host: 192.168.1.100

1. HTTP 服务器收到这个请求后，发现请求路径是 /，而且方法是 GET。

2. 查找路由表 → 找到 uri = "/", method = HTTP_GET, handler = root_handler。

3. 调用 root_handler。

4. root_handler 直接把准备好的网页字符串发出。

5. 浏览器收到 HTML，开始渲染出深色面板、距离数字、按钮……

代码参考GitHub - H2Long/esps3-web · GitHub