查看: 5276|回复: 2

[ESP32系列教程] ESP32 Arduino异步HTTP服务器教程：提供HTML

[复制链接]

本ESP32教程的测试是使用集成在ESP32开发板中的DFRobot的ESP-WROOM-32设备进行的。

简介

此ESP32 Arduino教程旨在解释如何在ESP32上Arduino核心运行的异步HTTP网络服务器上提供HTML内容。本ESP32教程的测试是使用集成在ESP32开发板中的DFRobot的ESP-WROOM-32设备进行的。

在本教程中，我们将提供一个包含在HTML标记中的简单文本。因此，我们需要告诉客户我们所服务的内容是HTML类型，这样它才知道如何解释。对于客户端，我们将使用Web浏览器。

代码

首先，我们需要加入一些库。我们需要Wi-Fi.h将ESP32连接到无线网络，ESPAsyncWebServer.h用于访问面向我们公开设置HTTP服务器所需方法的类。

此外，我们还需要AsyncTCP.h，它能够对服务器客户端进行处理。我们还需要编译代码所需的FS.h，尽管我们不会使用HTTP服务器上可用的任何文件系统功能。

由于我们需要连接到Wi-Fi网络，我们将声明两个全局变量所需的凭据，因此我们可以对其进行轻松更改。我们需要网络名称(SSID)和密码。

我们还需要一个AsyncWebServer类的实例，我们将用它来设置web服务器。请注意，此类构造函数接收服务器将侦听的端口作为输入。我们将使用端口80，这是默认的HTTP端口。

[mw_shl_code=applescript,true]#include <WiFi.h>

#include <FS.h>

#include <AsyncTCP.h>

#include <ESPAsyncWebServer.h>

const char* ssid = "yourNetworkName";

const char* password = "yourNetworkPassword";

AsyncWebServer server(80);

[/mw_shl_code]

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

[mw_shl_code=applescript,true]Serial.begin(115200);

WiFi.begin(ssid, password);

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

delay(1000);

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

}

Serial.println(WiFi.localIP());[/mw_shl_code]

请注意，当连接完成后，我们将在网络上打印ESP32的本地IP，因为我们需要使用Web浏览器连接到服务器。

现在我们将ESP32连接到网络，并实例化我们的服务器对象，我们将定义一条路由，它将监听传入的HTTP请求。该路由将与处理函数相关联，该处理函数将在客户端执行对该路由的请求时予以执行。

因此，如需将路由绑定到处理函数，我们只需在服务器对象上调用on方法即可。

作为第一个输入，它接收一个字符串，其中包含服务器应该监听的路由。我们将使用“/html”路线。

作为第二个输入，它接收一个类型为WebRequestMethod的枚举，它表示该路由允许的HTTP方法。我们将请求限制为GET，因此我们应该使用HTTP_GET值。

作为第三个参数，on方法接收将在收到请求时执行的处理函数。此函数的签名是固定的，它需要返回void并作为输入接收指向AsyncWebServerRequest类型的对象指针。

为了保持代码的紧凑性，并且由于我们需要保证处理函数的简单性，我们将它声明为C++ lambda函数。

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

// Handling function code

});

[/mw_shl_code]

在我们的lambda函数中，我们可以使用AsyncWebServerRequest类对象指定发送回HTTP客户端的答案。我们使用send方法执行此操作，该方法接收HTTP响应代码作为第一个输入，作为响应内容类型的第二个参数和作为实际内容的第三个参数。

我们将返回一个HTTP OK代码，对应于200。由于我们需要返回HTML，我们将内容类型定义为“text/html”。最后，我们将HTML内容指定为字符串。

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

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

});[/mw_shl_code]

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

最终的源代码如下所示。

[mw_shl_code=applescript,true]
#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(){

}[/mw_shl_code]

测试代码

如需测试代码，只需编译它并使用Arduino IDE将其上传到ESP32板即可。然后，打开串行监视器并复制与Wi-Fi网络连接完成后打印的IP。

然后，打开Web浏览器并在地址栏上写下以下内容，通过串行控制台上打印的IP更改{yourEspIp}。

您应该会得到类似于图1的输出，该输出显示返回的HTML内容。请注意，HTML确实被浏览器解释为，由于标签没有被打印，因为它们是作为标记而非内容的一部分。