1、前言建立一个异步的 ESP8266 Web Server 去控制 LED。需要先到 Github 去下载 zip 包ESPAsyncWebServerESPAsyncTCP环境说明ESP8266 2.7.4 核心、Arduino IDE1.8.5适配 ESP-01/ESP-01S同步兼容 ESP32 系列仅少量头文件差异依赖库安装注意不要直接在库管理器搜索安装离线下载源码包解压至文档/Arduino/libraries/ESPAsyncWebServerESPAsyncTCP2、Asynchronous Web Server2.1 Asynchronous Web Server 优势“Handle more than one connection at the same time without blocking the loop ()”翻译可同时处理多条网络连接全程不阻塞主循环 loop ()。传统同步 WebServer 痛点对比标准 ESP8266WebServer 是阻塞式浏览器多标签同时访问、多设备连接时会卡顿loop 内执行延时、传感器读取、继电器动作时网页请求直接无响应长连接、实时数据推送温湿度、设备状态效率极低频繁断线重连。异步库核心优势事件驱动模型所有 HTTP 请求、WebSocket 连接独立调度不占用主循环原生支持 WebSocket、SSE、文件上传、大网页分片加载内存占用更低ESP-01S 4MB 闪存可稳定运行多客户端实时控制支持 URL 参数、表单提交、静态网页托管、自定义 404 页面。2.2 基础工程异步网页控制板载 LED最简优雅示例硬件说明ESP-01SGPIO2 为板载 LED低电平点亮3.3V 稳定供电CH_PD 持续拉高。完整示例代码#include ESP8266WiFi.h #include ESPAsyncTCP.h #include ESPAsyncWebServer.h // WiFi配置 const char* ssid 你的WiFi名称; const char* password WiFi密码; // 建立80端口异步服务 AsyncWebServer server(80); // 网页HTML页面采用字符串分段写法便于后期修改 const char index_html[] PROGMEM Rrawliteral( !DOCTYPE HTML html langzh-CN head meta charsetUTF-8 titleESP8266 异步LED控制/title style body {text-align:center;font-size:22px;margin-top:80px;} .btn{padding:15px 40px;font-size:20px;margin:10px;cursor:pointer;} /style /head body h2异步WebServer LED控制器/h2 p当前LED状态%LEDSTATE%/p button classbtn onclicksendReq(1)打开LED/button button classbtn onclicksendReq(0)关闭LED/button script function sendReq(state){ fetch(/led?statestate).then(resplocation.reload()); } /script /body /html )rawliteral; // 网页变量替换回调动态填充LED状态 String processor(const String var){ if(var LEDSTATE){ return digitalRead(2) LOW ? 点亮 : 熄灭; } return String(); } void setup(){ Serial.begin(115200); pinMode(2, OUTPUT); digitalWrite(2, HIGH); // 默认熄灭LED // 连接WiFi WiFi.begin(ssid, password); while(WiFi.status() ! WL_CONNECTED){ delay(500); Serial.print(.); } Serial.println(); Serial.print(设备IP); Serial.println(WiFi.localIP()); // 首页路由绑定变量替换函数 server.on(/, HTTP_GET, [](AsyncWebServerRequest *request){ request-send_P(200, text/html, index_html, processor); }); // LED控制接口路由 server.on(/led, HTTP_GET, [](AsyncWebServerRequest *request){ int ledState request-getParam(state)-value().toInt(); digitalWrite(2, ledState ? LOW : HIGH); request-send(200, text/plain, 操作成功); }); // 404页面统一处理 server.onNotFound([](AsyncWebServerRequest *request){ request-send(404, text/plain, 页面不存在); }); // 启动异步服务 server.begin(); } void loop(){ // 重点异步服务无需在loop内调用任何处理函数完全不阻塞 // 此处可自由添加传感器采集、继电器定时、数据上报等业务逻辑 delay(1000); }代码优雅点解析PROGMEM 将网页存入闪存不占用 ESP8266 稀缺内存独立 processor 函数统一管理网页动态变量无需拼接长字符串路由分层清晰首页、控制接口、404 页面分离便于后期扩展loop 干净无网络相关代码业务逻辑与网络服务解耦。2.3 进阶优雅用法 1WebSocket 实时双向通信普通 HTTP 需要刷新页面获取状态WebSocket 可毫秒级双向推送状态多设备同步无延迟是智能家居最优方案。新增 WebSocket 核心代码追加至 setup () 上方AsyncWebSocket ws(/ws); // WebSocket消息接收回调 void handleWsMessage(void *arg, uint8_t *data, size_t len){ AwsFrameInfo *info (AwsFrameInfo*)arg; if(info-final info-index 0 info-len len info-opcode WS_TEXT){ data[len] 0; String msg (char*)data; if(msg led_on){ digitalWrite(2, LOW); }else if(msg led_off){ digitalWrite(2, HIGH); } // 向所有连接客户端广播最新LED状态 ws.textAll(digitalRead(2)LOW ? LED_ON : LED_OFF); } } // WebSocket事件绑定 void initWebSocket(){ ws.onEvent([](AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type, void *arg, uint8_t *data, size_t len){ if(type WS_EVT_DATA){ handleWsMessage(arg, data, len); } }); server.addHandler(ws); }setup () 内调用初始化initWebSocket();网页 JS 替换为 WebSocket 实时推送无需刷新页面交互体验大幅提升。2.4 进阶优雅用法 2分离静态 HTML、减少代码冗余项目复杂后大量 HTML、CSS、JS 写在代码内会杂乱优雅方案SPIFFS 托管静态网页。将 html 文件上传至 ESP8266 文件系统异步服务直接加载文件自动缓存代码极度简洁server.serveStatic(/, SPIFFS, /).setDefaultFile(index.html);所有前端文件独立编辑不用反复修改 Arduino 代码适合长期维护项目。2.5 开发避坑优雅稳定运行关键ESP-01 内存较小不要一次性传输超大文本使用分片 send_PWebSocket 定时清理闲置客户端避免内存泄漏loop 中添加ws.cleanClients();禁止在路由回调、WebSocket 回调中使用 delay ()会破坏异步非阻塞特性双库版本匹配ESPAsyncWebServer 与 ESPAsyncTCP 配套 2.7.x 稳定版适配 Arduino1.8.5多参数读取规范使用request-getParam(参数名)统一获取判断空值防止崩溃。3、完整工程拓展思路多路继电器控制扩展多个 GPIO 路由统一封装 IO 操作函数温湿度实时面板DHT11 采集数据WebSocket 每秒自动推送设备配网页面增加 WiFi 切换表单支持网页重连路由器权限简单校验路由增加 token 参数验证防止外人控制设备。4、总结ESPAsyncWebServer 的 “优雅使用” 核心是解耦、分层、非阻塞网络服务与业务代码完全分离loop 只处理硬件逻辑路由、WebSocket、静态文件、错误页面模块化拆分可读性强充分利用闪存存储网页资源节约运行内存适配 ESP-01S 小容量模块优先使用 WebSocket 替代轮询 HTTP兼顾实时性与设备资源占用。对比传统阻塞式 WebServer异步架构在多客户端访问、实时控制场景下优势显著是 ESP8266 物联网网页控制的首选方案。
1、前言建立一个异步的 ESP8266 Web Server 去控制 LED。需要先到 Github 去下载 zip 包ESPAsyncWebServerESPAsyncTCP环境说明ESP8266 2.7.4 核心、Arduino IDE1.8.5适配 ESP-01/ESP-01S同步兼容 ESP32 系列仅少量头文件差异依赖库安装注意不要直接在库管理器搜索安装离线下载源码包解压至文档/Arduino/libraries/ESPAsyncWebServerESPAsyncTCP2、Asynchronous Web Server2.1 Asynchronous Web Server 优势“Handle more than one connection at the same time without blocking the loop ()”翻译可同时处理多条网络连接全程不阻塞主循环 loop ()。传统同步 WebServer 痛点对比标准 ESP8266WebServer 是阻塞式浏览器多标签同时访问、多设备连接时会卡顿loop 内执行延时、传感器读取、继电器动作时网页请求直接无响应长连接、实时数据推送温湿度、设备状态效率极低频繁断线重连。异步库核心优势事件驱动模型所有 HTTP 请求、WebSocket 连接独立调度不占用主循环原生支持 WebSocket、SSE、文件上传、大网页分片加载内存占用更低ESP-01S 4MB 闪存可稳定运行多客户端实时控制支持 URL 参数、表单提交、静态网页托管、自定义 404 页面。2.2 基础工程异步网页控制板载 LED最简优雅示例硬件说明ESP-01SGPIO2 为板载 LED低电平点亮3.3V 稳定供电CH_PD 持续拉高。完整示例代码#include ESP8266WiFi.h #include ESPAsyncTCP.h #include ESPAsyncWebServer.h // WiFi配置 const char* ssid 你的WiFi名称; const char* password WiFi密码; // 建立80端口异步服务 AsyncWebServer server(80); // 网页HTML页面采用字符串分段写法便于后期修改 const char index_html[] PROGMEM Rrawliteral( !DOCTYPE HTML html langzh-CN head meta charsetUTF-8 titleESP8266 异步LED控制/title style body {text-align:center;font-size:22px;margin-top:80px;} .btn{padding:15px 40px;font-size:20px;margin:10px;cursor:pointer;} /style /head body h2异步WebServer LED控制器/h2 p当前LED状态%LEDSTATE%/p button classbtn onclicksendReq(1)打开LED/button button classbtn onclicksendReq(0)关闭LED/button script function sendReq(state){ fetch(/led?statestate).then(resplocation.reload()); } /script /body /html )rawliteral; // 网页变量替换回调动态填充LED状态 String processor(const String var){ if(var LEDSTATE){ return digitalRead(2) LOW ? 点亮 : 熄灭; } return String(); } void setup(){ Serial.begin(115200); pinMode(2, OUTPUT); digitalWrite(2, HIGH); // 默认熄灭LED // 连接WiFi WiFi.begin(ssid, password); while(WiFi.status() ! WL_CONNECTED){ delay(500); Serial.print(.); } Serial.println(); Serial.print(设备IP); Serial.println(WiFi.localIP()); // 首页路由绑定变量替换函数 server.on(/, HTTP_GET, [](AsyncWebServerRequest *request){ request-send_P(200, text/html, index_html, processor); }); // LED控制接口路由 server.on(/led, HTTP_GET, [](AsyncWebServerRequest *request){ int ledState request-getParam(state)-value().toInt(); digitalWrite(2, ledState ? LOW : HIGH); request-send(200, text/plain, 操作成功); }); // 404页面统一处理 server.onNotFound([](AsyncWebServerRequest *request){ request-send(404, text/plain, 页面不存在); }); // 启动异步服务 server.begin(); } void loop(){ // 重点异步服务无需在loop内调用任何处理函数完全不阻塞 // 此处可自由添加传感器采集、继电器定时、数据上报等业务逻辑 delay(1000); }代码优雅点解析PROGMEM 将网页存入闪存不占用 ESP8266 稀缺内存独立 processor 函数统一管理网页动态变量无需拼接长字符串路由分层清晰首页、控制接口、404 页面分离便于后期扩展loop 干净无网络相关代码业务逻辑与网络服务解耦。2.3 进阶优雅用法 1WebSocket 实时双向通信普通 HTTP 需要刷新页面获取状态WebSocket 可毫秒级双向推送状态多设备同步无延迟是智能家居最优方案。新增 WebSocket 核心代码追加至 setup () 上方AsyncWebSocket ws(/ws); // WebSocket消息接收回调 void handleWsMessage(void *arg, uint8_t *data, size_t len){ AwsFrameInfo *info (AwsFrameInfo*)arg; if(info-final info-index 0 info-len len info-opcode WS_TEXT){ data[len] 0; String msg (char*)data; if(msg led_on){ digitalWrite(2, LOW); }else if(msg led_off){ digitalWrite(2, HIGH); } // 向所有连接客户端广播最新LED状态 ws.textAll(digitalRead(2)LOW ? LED_ON : LED_OFF); } } // WebSocket事件绑定 void initWebSocket(){ ws.onEvent([](AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type, void *arg, uint8_t *data, size_t len){ if(type WS_EVT_DATA){ handleWsMessage(arg, data, len); } }); server.addHandler(ws); }setup () 内调用初始化initWebSocket();网页 JS 替换为 WebSocket 实时推送无需刷新页面交互体验大幅提升。2.4 进阶优雅用法 2分离静态 HTML、减少代码冗余项目复杂后大量 HTML、CSS、JS 写在代码内会杂乱优雅方案SPIFFS 托管静态网页。将 html 文件上传至 ESP8266 文件系统异步服务直接加载文件自动缓存代码极度简洁server.serveStatic(/, SPIFFS, /).setDefaultFile(index.html);所有前端文件独立编辑不用反复修改 Arduino 代码适合长期维护项目。2.5 开发避坑优雅稳定运行关键ESP-01 内存较小不要一次性传输超大文本使用分片 send_PWebSocket 定时清理闲置客户端避免内存泄漏loop 中添加ws.cleanClients();禁止在路由回调、WebSocket 回调中使用 delay ()会破坏异步非阻塞特性双库版本匹配ESPAsyncWebServer 与 ESPAsyncTCP 配套 2.7.x 稳定版适配 Arduino1.8.5多参数读取规范使用request-getParam(参数名)统一获取判断空值防止崩溃。3、完整工程拓展思路多路继电器控制扩展多个 GPIO 路由统一封装 IO 操作函数温湿度实时面板DHT11 采集数据WebSocket 每秒自动推送设备配网页面增加 WiFi 切换表单支持网页重连路由器权限简单校验路由增加 token 参数验证防止外人控制设备。4、总结ESPAsyncWebServer 的 “优雅使用” 核心是解耦、分层、非阻塞网络服务与业务代码完全分离loop 只处理硬件逻辑路由、WebSocket、静态文件、错误页面模块化拆分可读性强充分利用闪存存储网页资源节约运行内存适配 ESP-01S 小容量模块优先使用 WebSocket 替代轮询 HTTP兼顾实时性与设备资源占用。对比传统阻塞式 WebServer异步架构在多客户端访问、实时控制场景下优势显著是 ESP8266 物联网网页控制的首选方案。
