查看: 233|回复: 1

[Arduino] ESP32 Arduino异步HTTP服务器教程:提供HTML

[复制链接]
本ESP32教程的测试是使用集成在ESP32开发板中的DFRobot的ESP-WROOM-32设备进行的。
简介
ESP32 Arduino教程旨在解释如何在ESP32Arduino核心运行的异步HTTP网络服务器上提供HTML内容。本ESP32教程的测试是使用集成在ESP32开发板中的DFRobot的ESP-WROOM-32设备进行的。相关入门教程,包含运行HTTPs服务器所需库的安装说明,请参阅此前的帖子:ESP32 Arduino教程:异步HTTP网络服务器
在本教程中,我们将提供一个包含在HTML标记中的简单文本。因此,我们需要告诉客户我们所服务的内容是HTML类型,这样它才知道如何解释。对于客户端,我们将使用Web浏览器。


代码
首先,我们需要加入一些库。我们需要Wi-Fi.h将ESP32连接到无线网络,ESPAsyncWebServer.h用于访问面向我们公开设置HTTP服务器所需方法的类。
此外,我们还需要AsyncTCP.h,它能够对服务器客户端进行处理。我们还需要编译代码所需的FS.h,尽管我们不会使用HTTP服务器上可用的任何文件系统功能。

由于我们需要连接到Wi-Fi网络,我们将声明两个全局变量所需的凭据,因此我们可以对其进行轻松更改。我们需要网络名称(SSID)和密码。
我们还需要一个AsyncWebServer类的实例,我们将用它来设置web服务器。请注意,此类构造函数接收服务器将侦听的端口作为输入。我们将使用端口80,这是默认的HTTP端口。

[AppleScript] 纯文本查看 复制代码
#include <WiFi.h>

#include <FS.h>

#include <AsyncTCP.h>

#include <ESPAsyncWebServer.h>

 

const char* ssid = "yourNetworkName";

const char* password = "yourNetworkPassword";

 

AsyncWebServer server(80);

 


继续功能设置,我们将首先打开一个串行接口,然后将ESP32连接到以前在全局变量中提供凭据的Wi-Fi网络。您可以在这里查看关于如何将ESP32连接到Wi-Fi网络的详细教程 : ESP32 MicroPython教程:连接Wi-Fi网络


[AppleScript] 纯文本查看 复制代码
Serial.begin(115200);

 

WiFi.begin(ssid, password);

 

while (WiFi.status() != WL_CONNECTED) {

    delay(1000);

    Serial.println("Connecting to WiFi..");

}

 

Serial.println(WiFi.localIP());


请注意,当连接完成后,我们将在网络上打印ESP32的本地IP,因为我们需要使用Web浏览器连接到服务器。
现在我们将ESP32连接到网络,并实例化我们的服务器对象,我们将定义一条路由,它将监听传入的HTTP请求。该路由将与处理函数相关联,该处理函数将在客户端执行对该路由的请求时予以执行。

因此,如需将路由绑定到处理函数,我们只需在服务器对象上调用on方法即可。
作为第一个输入,它接收一个字符串,其中包含服务器应该监听的路由。我们将使用“/html”路线。
作为第二个输入,它接收一个类型为WebRequestMethod的枚举,它表示该路由允许的HTTP方法。我们将请求限制为GET,因此我们应该使用HTTP_GET值。
作为第三个参数,on方法接收将在收到请求时执行的处理函数。此函数的签名是固定的,它需要返回void并作为输入接收指向AsyncWebServerRequest类型的对象指针。
为了保持代码的紧凑性,并且由于我们需要保证处理函数的简单性,我们将它声明为C++ lambda函数


[AppleScript] 纯文本查看 复制代码
server.on("/html", HTTP_GET, [](AsyncWebServerRequest *request){

// Handling function code

});

 


在我们的lambda函数中,我们可以使用AsyncWebServerRequest类对象指定发送回HTTP客户端的答案。我们使用send方法执行此操作,该方法接收HTTP响应代码作为第一个输入,作为响应内容类型的第二个参数和作为实际内容的第三个参数。
我们将返回一个HTTP OK代码,对应于200。由于我们需要返回HTML,我们将内容类型定义为“text/html”。最后,我们将HTML内容指定为字符串。


[AppleScript] 纯文本查看 复制代码
server.on("/html", HTTP_GET, [](AsyncWebServerRequest *request){

    request->send(200, "text/html", "<p>This is HTML!</p>");

});


如需完成功能设置,我们需要在服务器对象上调用begin方法,因此它开始监听和处理客户端。由于我们使用的库为Web服务器实现了异步解决方案,因此我们无需在主循环上定期调用任何客户端处理函数,因此我们可以将其留空。
最终的源代码如下所示。

[AppleScript] 纯文本查看 复制代码
#include <WiFi.h>

#include <FS.h>

#include <AsyncTCP.h>

#include <ESPAsyncWebServer.h>

  

const char* ssid = "yourNetworkName";

const char* password =  "yourNetworkPassword";

  

AsyncWebServer server(80);

  

void setup(){

  Serial.begin(115200);

  

  WiFi.begin(ssid, password);

  

  while (WiFi.status() != WL_CONNECTED) {

    delay(1000);

    Serial.println("Connecting to WiFi..");

  }

  

  Serial.println(WiFi.localIP());

  

  server.on("/html", HTTP_GET, [](AsyncWebServerRequest *request){

    request->send(200, "text/html", "<p>This is HTML!</p>");

  });

  

  server.begin();

}

  

void loop(){

}


测试代码
如需测试代码,只需编译它并使用Arduino IDE将其上传到ESP32板即可。然后,打开串行监视器并复制与Wi-Fi网络连接完成后打印的IP。
然后,打开Web浏览器并在地址栏上写下以下内容,通过串行控制台上打印的IP更改{yourEspIp}。
您应该会得到类似于图1的输出,该输出显示返回的HTML内容。请注意,HTML确实被浏览器解释为,由于标签没有被打印,因为它们是作为标记而非内容的一部分。

esp32-arduino-http-async-webserver-simple-html-serving.png
图1  - 呈现返回浏览器的HTML。


注:本文作者是Nuno Santos,他是一位和蔼可亲的电子和计算机工程师,住在葡萄牙里斯本 (Lisbon)。
他写了200多篇有关ESP32、ESP8266的有用的教程和项目。

查看更多ESP32/ESP8266教程和项目:
中文版教程 : ESP32教程 合集
英文版教程 : ESP32 tutorial 合集

gada888  版主

发表于 2019-6-3 17:35:52

谢提供的资料
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

为本项目制作心愿单
购买心愿单
心愿单 编辑
wifi气象站

硬件清单

btnicon
我也要做!
点击进入购买页面
上海智位机器人股份有限公司 沪ICP备09038501号-4

© 2013-2019 Comsenz Inc. Powered by Discuz! X3.4 Licensed

mail