如何搭建ESP32 Web服务器，详细的操作步骤，您也可以

工控电子爱好者 06-04 302

前言：

当前各位老铁们对“led服务器使用教程”大致比较看重，看官们都想要了解一些“led服务器使用教程”的相关知识。那么小编也在网上搜集了一些有关“led服务器使用教程””的相关文章，希望朋友们能喜欢，兄弟们一起来学习一下吧！

在这个项目中，您将创建一个带有ESP32的独立Web服务器，该服务器使用Arduino IDE编程环境控制输出（两个LED）。Web服务器具有移动响应能力，可以使用任何作为本地网络浏览器的设备进行访问。我们将向您展示如何创建Web服务器以及代码如何逐步运行。

项目概况

在继续进行该项目之前，重要的一点是概述我们的Web服务器将要执行的操作，以便以后更容易执行这些步骤。

您将构建的Web服务器控制连接到ESP32 GPIO 26和GPIO 27的两个LED ；您可以通过在局域网中的浏览器中键入ESP32 IP地址来访问ESP32 Web服务器。通过单击Web服务器上的按钮，您可以立即更改每个LED的状态。

这只是一个简单的示例，用于说明如何构建用于控制输出的Web服务器，其思想是用继电器或您想要的任何其他电子组件替换这些LED 。

所需零件

对于本教程，您将需要以下部分：

ESP32开发板2个5毫米LED2个330欧姆电阻面包板跳线原理图

首先构建电路。如下图所示，将两个LED连接到ESP32。一个LED连接到GPIO 26，另一个LED连接到GPIO 27。

注意：我们使用的ESP32 DEVKIT DOIT开发板，有36个引脚。在组装电路之前，请确保检查所用电路板的引脚排列。

ESP32 Web服务器代码

在这里，我们提供了创建ESP32 Web服务器的代码。将以下代码复制到您的Arduino IDE。

#include <WiFi.h>

const char* ssid = "";

const char* password = "";

WiFiServer server(80);

String header;

String output26State = "off";

String output27State = "off";

const int output26 = 26;

const int output27 = 27;

void setup() {

Serial.begin(115200);

pinMode(output26, OUTPUT);

pinMode(output27, OUTPUT);

digitalWrite(output26, LOW);

digitalWrite(output27, LOW);

Serial.print("Connecting to ");

Serial.println(ssid);

WiFi.begin(ssid, password);

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

delay(500);

Serial.print(".");

}

Serial.println("");

Serial.println("WiFi connected.");

Serial.println("IP address: ");

Serial.println(WiFi.localIP());

server.begin();

}

void loop(){

WiFiClient client = server.available();

if (client) {

Serial.println("New Client.");

String currentLine = "";

while (client.connected()) {

if (client.available()) {

char c = client.read();

Serial.write(c);

header += c;

if (c == '\n') {

if (currentLine.length() == 0) {

client.println("HTTP/1.1 200 OK");

client.println("Content-type:text/html");

client.println("Connection: close");

client.println();

if (header.indexOf("GET /26/on") >= 0) {

Serial.println("GPIO 26 on");

output26State = "on";

digitalWrite(output26, HIGH);

} else if (header.indexOf("GET /26/off") >= 0) {

Serial.println("GPIO 26 off");

output26State = "off";

digitalWrite(output26, LOW);

} else if (header.indexOf("GET /27/on") >= 0) {

Serial.println("GPIO 27 on");

output27State = "on";

digitalWrite(output27, HIGH);

} else if (header.indexOf("GET /27/off") >= 0) {

Serial.println("GPIO 27 off");

output27State = "off";

digitalWrite(output27, LOW);

}

client.println("<!DOCTYPE html><html>");

client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");

client.println("<link rel=\"icon\" href=\"data:,\">");

client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");

client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");

client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");

client.println(".button2 {background-color: #555555;}</style></head>");

client.println("<body><h1>ESP32 Web Server</h1>");

client.println("<p>GPIO 26 - State " + output26State + "</p>");

if (output26State=="off") {

client.println("<p><a href=\"/26/on\"><button class=\"button\">ON</button></a></p>");

} else {

client.println("<p><a href=\"/26/off\"><button class=\"button button2\">OFF</button></a></p>");

}

client.println("<p>GPIO 27 - State " + output27State + "</p>");

if (output27State=="off") {

client.println("<p><a href=\"/27/on\"><button class=\"button\">ON</button></a></p>");

} else {

client.println("<p><a href=\"/27/off\"><button class=\"button button2\">OFF</button></a></p>");

}

client.println("</body></html>");

client.println();

break;

} else {

currentLine = "";

}

} else if (c != '\r') {

currentLine += c;

}

header = "";

client.stop();

Serial.println("Client disconnected.");

Serial.println("");

}

程序代码讲解

1、设置您的用户名和密码

您需要使用网络凭据修改以下几行：SSID和密码。

const char* ssid = "你的用户名";

const char* password = "你的密码";

2、上传代码

现在，您可以上传代码，Web服务器将立即运行。请按照以下步骤将代码上传到ESP32：

1）将ESP32板插入计算机;

2）在Arduino IDE中，在Tools > Board中选择您的开发板（在本例中，我们使用ESP32 DEVKIT DOIT开发板）;

3）在工具 > 端口中选择COM端口。

4）按下Arduino IDE中的Upload按钮，等待几秒钟，直到代码编译并上传到您的开发板上。

5）等待" 完成上传 "消息。

3、查找ESP IP地址

上载代码后，以115200的波特率打开串口监视器。

按下ESP32 EN按钮（重置）。ESP32连接到Wi-Fi，并在串行监视器上输出ESP IP地址。复制该IP地址，因为您需要它来访问ESP32 Web服务器。

4、访问Web服务器

要访问Web服务器，请打开浏览器，粘贴ESP32 IP地址，您将看到以下页面。在我们的例子中是192.168.1.135。

如果您看一下"串口监视器"，您可以看到后台发生了什么。ESP从新客户端（在本例中为您的浏览器）接收HTTP请求。

您还可以查看有关HTTP请求的其他信息。

5、测试Web服务器

现在，您可以测试您的Web服务器是否正常运行。单击按钮以控制LED。

同时，您可以查看串口监视器以了解后台发生的情况。例如，当您单击按钮打开GPIO 26时，ESP32在/ 26 / on URL 上收到请求。

ESP32收到该请求后，会将连接到GPIO 26的LED 点亮，并在网页上更新其状态。

GPIO 27的按钮以类似的方式工作。测试它是否正常工作。

下面讲解代码如何工作

在本节中，将详细讲解代码以了解其工作原理。

您需要做的第一件事就是包括WiFi库。

#include <WiFi.h>

如前所述，您需要在双引号内的以下行中插入您的用户名和密码。

const char* ssid = "";

const char* password = "";

然后，将Web服务器设置为端口80。

WiFiServer server(80);

以下行创建一个变量来存储HTTP请求的标头：

String header;

接下来，创建辅助变量以存储输出的当前状态。如果要添加更多输出并保存其状态，则需要创建更多变量。

String output26State = "off";

String output27State = "off";

您还需要为每个输出分配一个GPIO。在这里，我们使用GPIO 26和GPIO 27。您可以使用任何其他合适的GPIO。

const int output26 = 26;

const int output27 = 27;

设定（）

现在，让我们进入setup（）。首先，出于调试目的，我们以115200的波特率开始串行通信。

Serial.begin(115200);

您还可以将GPIO定义为OUTPUT，并将它们设置为LOW。

pinMode(output26, OUTPUT);

pinMode(output27, OUTPUT);

digitalWrite(output26, LOW);

digitalWrite(output27, LOW);

以下几行以WiFi.begin（ssid，password）开始Wi-Fi连接，等待连接成功并在串行监视器中打印ESP IP地址。

Serial.print("Connecting to ");

Serial.println(ssid);

WiFi.begin(ssid, password);

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

delay(500);

Serial.print(".");

}

Serial.println("");

Serial.println("WiFi connected.");

Serial.println("IP address: ");

Serial.println(WiFi.localIP());

server.begin();

循环（）

在loop（）中，我们对新客户端与Web服务器建立连接时发生的情况进行编程。

ESP32始终通过以下一行监听传入的客户端：

WiFiClient client = server.available();

收到客户的请求后，我们将保存传入的数据。只要客户端保持连接，随后的while循环将一直运行。除非您确切地知道自己在做什么，否则我们不建议更改代码的以下部分。

if (client) {

Serial.println("New Client.");

String currentLine = "";

while (client.connected()) {

if (client.available()) {

char c = client.read();

Serial.write(c);

header += c;

if (c == '\n') {

if (currentLine.length() == 0) {

client.println("HTTP/1.1 200 OK");

client.println("Content-type:text/html");

client.println("Connection: close");

client.println();

if和else语句的下一部分检查在网页中按下了哪个按钮，并相应地控制输出。如前所述，根据所按下的按钮，我们会在不同的URL上发出请求。

if (header.indexOf("GET /26/on") >= 0) {

Serial.println("GPIO 26 on");

output26State = "on";

digitalWrite(output26, HIGH);

} else if (header.indexOf("GET /26/off") >= 0) {

Serial.println("GPIO 26 off");

output26State = "off";

digitalWrite(output26, LOW);

} else if (header.indexOf("GET /27/on") >= 0) {

Serial.println("GPIO 27 on");

output27State = "on";

digitalWrite(output27, HIGH);

} else if (header.indexOf("GET /27/off") >= 0) {

Serial.println("GPIO 27 off");

output27State = "off";

digitalWrite(output27, LOW);

}

例如，如果您按下GPIO 26 ON按钮，ESP32会在/ 26 / ON URL上收到请求（我们可以在Serial Monitor的HTTP标头上看到该信息）。因此，我们可以检查标题是否包含表达式GET / 26 / on。如果包含，则将output26state变量更改为ON，然后ESP32点亮LED。

其他按钮也是如此。因此，如果要添加更多输出，则应修改代码的这一部分以包括它们。

显示HTML网页

您需要做的下一步是创建网页。ESP32将使用一些HTML代码向您的浏览器发送响应以构建网页。

使用此表示形式的client.println（）将网页发送给客户端。您应该输入要发送给客户端的内容作为参数。

我们应该发送的第一件事始终是以下一行，这表明我们正在发送HTML。

<!DOCTYPE HTML><html>

然后，以下一行使网页在任何Web浏览器中都响应。

client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");

并且以下内容用于防止在收藏夹图标上发出请求。

client.println("<link rel=\"icon\" href=\"data:,\">");

网页样式

接下来，我们有一些CSS文本来设置按钮样式和网页外观。我们选择Helvetica字体，定义要显示为块并在中心对齐的内容。