在ESP32上部署异步WEB服务

原创

谭广健

发布于 2025-05-31 17:36:37

4150

最近研究上ESP32 MCU单片机的开发，硬件和软件开发的上手和进阶都比较容易；今天我就讲一下，如何在单片机上部署一个异步的WEB服务，这个web服务只是简单的HTML+JavaScript页面的高效托管，就是只能提供HTML+JavaScript页面展示；可惜ESP32不能进行基于asp或.net及PHP等的进阶服务；如果可以就无敌了。。

一、技术选型与架构设计

开发框架组合

通信层：AsyncTCP异步TCP协议栈（事件驱动架构，相比传统Socket节省30%+内存），这里我们使用的AsyncTCP的库【https://github.com/ESP32Async/AsyncTCP】。

应用层：ESPAsyncWebServer库（支持非阻塞I/O，理论并发连接数提升5倍），这里我们使用的ESPAsyncWebServer的库【https://github.com/ESP32Async/ESPAsyncWebServer】。

静态资源：SPIFFS文件系统（支持1MB+存储空间，满足基础页面存储需求）

性能优势分析

内存管理：采用Zero-Copy技术传输静态文件，减少RAM占用至传统方案的1/3

响应机制：异步回调处理HTTP请求，主线程阻塞时间＜5ms

功耗优化：深度睡眠模式下整机功耗可低至10μA（含Wi-Fi维持）

二、部署实施步骤

以上2个库已经纳入完毕，我们就引入头文件#include <AsyncTCP.h>、#include <ESPAsyncWebServer.h>。然后就进行服务的开启。

1、首先当然创建一个端口服务：AsyncWebServer server(80); 这个80就是80端口，你可以根据情况取改。

2、配置服务的路由和访问了。

 server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/plain", "Hello World");
 });
 server.on("/SHOW", HTTP_POST, [](AsyncWebServerRequest *request) {
    size_t count = request->params();
    for (size_t i = 0; i < count; i++) {
      const AsyncWebParameter *p = request->getParam(i);
      Serial.printf("PARAM[%u]: %s = %s\n", i, p->name().c_str(), p->value().c_str());
    }
    String act ="No act";
    if (request->hasParam("act", true)) {
      act= request->getParam("act", true)->value();
     }
    request->send(200, "text/plain", "act=" + act);
  });
 server.on("/download", HTTP_ANY, [](AsyncWebServerRequest* request) {   
    if (!request->hasParam("tname")) {
      request->send(400, "text/plain", "Param error");
      return;
    }
    String fileName = request->getParam("tname")->value();
    String filePath = sdCardPath + fileName;
    Serial.println(filePath);
    File file = SD.open(filePath);
    if (!file) {
      request->send(404, "text/plain", "File Not Found");
      return;
    }
    request->send(file, fileName, "application/octet-stream", true);
  });

上面就算开启对应的路由服务，当访问服务路径时进行相应的参数回显操作。

3、最后就服务的启动了server.begin();

以上几步就能简单的在ESP32上完成web服务的部署。

这时可能会有朋友问，那我的HTML页面代码如何嵌入到里面呢？不用急，这个可以一、通过读取文件进行加载。二、可以定义好HTML文件，将内容为char *然后调用，例如：

static const char *htmlContent PROGMEM = R"(
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的简单网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个简单的HTML网页示例。</p>
</body>
</html>
)";
static const size_t htmlContentLength = strlen_P(htmlContent);

上面就是定义了HTML的内容，然后放在 request->send上面就可以了

 request->send(200, "text/html", (uint8_t *)htmlContent, htmlContentLength);

三、性能优化实践和注意点

1、尽量减少图片或冗余的JS脚本或代码；因为ESP32毕竟算力不大的芯片。

2、多使用缓存控制，设置Cache-Control头（max-age=3600）提升重复访问速度。

3、并非量最多就5个连接，所以需要直白，尽量一个页面展示，然后跳到各控制页面。

写到最后，ESP32在轻量级Web服务领域展现出独特的性价比优势，其异步架构完美适配资源受限场景。虽然受限于硬件规格无法直接运行ASP.NET等重型框架，但通过合理的架构设计，完全可构建满足80%物联网场景需求的Web解决方案。开发者应聚焦其静态资源托管优势，结合现代前端技术，在边缘端实现更丰富的交互体验，如果大家还感兴趣可以留言一下，下次我分享如何在ESP32上部署一个文件服务（FTP）的功能^_^...

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

物联网