本文摘要：在这个项目中，您将建立一个带有ESP32的独立Web服务器，该服务器使用Arduino IDE编程情况控制输出（两个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 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("");client.println("");client.println("");client.println(" ");client.println("

ESP32 Web Server

");client.println("

GPIO 26 - State " + output26State + "

");if (output26State=="off") {client.println("

ON

");} else {client.println("

OFF

");}client.println("

GPIO 27 - State " + output27State + "

");if (output27State=="off") {client.println("

ON

");} else {client.println("

OFF

");}client.println("");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 如前所述，您需要在双引号内的以下行中插入您的用户名和密码。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。

然后，以下一行使网页在任何Web浏览器中都响应。client.println("");而且以下内容用于防止在收藏夹图标上发出请求。client.println("");网页样式接下来，我们有一些CSS文原来设置按钮样式和网页外观。

我们选择Helvetica字体，界说要显示为块并在中心对齐的内容。client.println(" ");设置网页第一个标题在下一行中，您可以设置网页的第一个标题。

这里有" ESP32 Web Server "，可是您可以将文本更改为任何您喜欢的文本。client.println("

ESP32 Web Server

");显示按钮及其对应状态然后，编写一段以显示GPIO 26当前状态。如您所见，我们使用output26State变量，以便在此变量更改时状态立刻更新。

client.println("

GPIO 26 - State " + output26State + "

");然后，凭据GPIO的当前状态，显示开或关按钮。如果GPIO的当前状态为关闭，则显示" ON"按钮，否则显示" OFF"按钮。if (output26State=="off") {client.println("

ON

");} else {client.println("

OFF

");}我们对GPIO 27使用相同的历程。断开毗连最后，当响应竣事时，我们清除header变量，并使用client.stop（）停止与客户端的毗连。

header = "";client.stop();写到最后在本例程中，我们向您展示了如何使用ESP32来构建Web服务器。我们已经向您展示了一个控制两个LED的简朴示例，但其目的是用继电器或您要控制的任何其他输出替换这些LED。

本文关键词：澳门尼威斯人官网

本文来源：澳门尼威斯人官网-itucapsa.net