本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]
[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类型的对象指针。
[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确实被浏览器解释为,由于标签没有被打印,因为它们是作为标记而非内容的一部分。
图1 - 呈现返回浏览器的HTML。
注:本文作者是Nuno Santos,他是一位和蔼可亲的电子和计算机工程师,住在葡萄牙里斯本 (Lisbon)。 他写了200多篇有关ESP32、ESP8266的有用的教程和项目。
查看更多ESP32/ESP8266教程和项目:
|