ESP32搭建Web服务器入手指南 |
您所在的位置：网站首页 › esp32webserver › ESP32搭建Web服务器入手指南 |
|
我们在学习一款WiFi开发板时，搭建Web服务器是其中一项最有趣的项目。在学习如何使用ESP32制作项目的过程中，我们将研究如何使用ESP32微控制器构建一个简单的Web服务器。
Official-DOIT-ESP32-Development-Board-WiFi-Bluetooth-Ultra-Low-Power-Consumption.jpg (97.95 KB, 下载次数: 47) 下载附件 保存到相册 2020-11-23 20:51 上传 实际上Web服务器（Web Server）上是一种存储、处理网页并将网页交付给Web客户端的设备，可以是便携式计算机上的浏览器或智能手机上的移动应用程序。客户端和服务器之间的通信使用超文本传输协议（HTTP）的特殊协议进行。客户端使用URL来请求特定页面，服务器使用该页面的内容或错误消息（如果该页面不可用）进行响应。 在本篇文章中，URL并没有用于响应特定页面，而是用于控制连接到ESP开发板的LED灯状态，所做的更改将在网页上更新。例如，如果在浏览器中输入了类似于“ http://192.168.1.1/ledon”之类的URL，则Web服务器将LED点亮为“ ON”，然后将网页上LED的状态更新为“ ON”。当需要OFF时，同样如此。通过本文，您将知道如何在ESP32上设置网络服务器，并通过客户端（网页）连接到该服务器以控制其GPIO引脚。 所需的组件 ● ESP32开发板 ● 220欧电阻 ● LED灯 ● 面包板 ● 连接跳线 原理图 本文的原理图非常简单。如前所述，我们将切换LED来演示使用NodeMCU Web服务器可以实现的功能，尽管本文使用的是LED灯，您也可以决定使用一些更有用的组件（例如继电器），从而可以远程控制家中的设备。如下图所示连接组件。
ESP32-ledserver.jpg (105 KB, 下载次数: 43) 下载附件 保存到相册 2020-11-23 20:51 上传 绿色和红色LED的正极分别连接到ESP32的GPIO引脚26和27，而其负极通过220欧姆电阻接地，以限制流过LED的电流。完成原理图后，我们现在可以转到项目代码。 代码 由于其多功能性、强大的支持和受欢迎度，我们将使用Arduino IDE来为今天的项目开发草图代码。为此，您需要在Arduino IDE上安装ESP32开发板支持文件。 本文的草图非常简单。该算法包括将ESP32连接到访问点并生成IP地址，通过该IP地址，连接到ESP的设备可以访问Web服务器。与服务器连接的客户端（在连接的设备上运行的网页）提供一个网页，该网页有一个用于控制LED的按钮，并且在按钮背后添加了处理单击它们时发生的操作。 为了减少需要编写的代码量，我们将使用ESP32 WiFi库。该库包含的功能使得将ESP32设置为Web服务器变得容易。该库以及其他库与ESP32板文件打包在一起，并在Arduino IDE上安装ESP32板文件时自动安装。 以下对代码进行简要说明，我们首先包括项目所需的库，在本例中为WiFi.h库。 #include 复制代码接下来，添加ESP32将连接到的WiFi接入点的凭据。确保用户名和密码在双引号之间。我们还指定系统将通过其进行通信的端口，并创建一个变量来保存请求。 // Replace with your network credentials const char* ssid = "Enter_SSID_here"; const char* password = "Enter_Password_here"; // Set web server port number to 80 WiFiServer server(80); // Variable to store the HTTP request String header;复制代码接下来，我们声明ESP32的红色和绿色LED所连接的引脚，并创建变量保存LED的状态。 int greenled = 26; int redled = 27; String greenstate = "off";// state of green LED String redstate = "off";// state of red LED复制代码完成此操作后，我们转到void setup()函数，首先初始化串口监视器，然后使用pinModes将LED连接到的引脚设置为输出。然后，我们将引脚设置为“LOW”。 void setup() { Serial.begin(115200); // Set the pinmode of the pins to which the LEDs are connected and turn them low to prevent flunctuations pinMode(greenled, OUTPUT); pinMode(redled, OUTPUT); digitalWrite(greenled, LOW); digitalWrite(redled, LOW);复制代码接下来，我们使用凭据作为WiFi.begin()函数的参数连接到访问点，然后使用WiFi.status()函数检查连接是否成功。 WiFi.begin(ssid, password); Serial.print("Connecting to "); Serial.println(ssid); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); }复制代码如果连接成功，则会在串口监视器上打印文本，并且还会显示Web服务器的IP地址。该IP地址是服务器的网址，这是我们需要在同一网络上的任何Web浏览器中输入以访问服务器的地址。 Serial.println(""); Serial.println("WiFi connected."); Serial.println("IP address: "); Serial.println(WiFi.localIP());// this will display the Ip address of the Pi which should be entered into your browser复制代码完成此操作后，我们使用server.begin()函数启动服务器，然后进入void loop()函数。 server.begin();复制代码void loop()函数是完成大部分工作的地方。我们首先使用server.available()函数来侦听客户端的传入连接。当客户端可用且已连接时，我们读取客户端请求并发送header作为响应。 WiFiClient client = server.available(); // Listen for incoming clients if (client) { // If a new client connects, String currentLine = ""; // make a String to hold incoming data from the client while (client.connected()) { // loop while the client's connected if (client.available()) { // if there's bytes to read from the client, char c = client.read(); // read a byte, then Serial.write(c); // print it out the serial monitor header += c; if (c == '\n') { // if the byte is a newline character // if the current line is blank, you got two newline characters in a row. // that's the end of the client HTTP request, so send a response: if (currentLine.length() == 0) { // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK) // and a content-type so the client knows what's coming, then a blank line: client.println("HTTP/1.1 200 OK"); client.println("Content-type:text/html"); client.println("Connection: close"); client.println();复制代码接下来，我们检查客户的请求是否指示按下按钮以改变LED的“ ON / OFF”引脚。如果请求指示“ ON”，则该引脚变为高电平，状态变量相应更新，反之亦然。 // turns the GPIOs on and off if (header.indexOf("GET /green/on") >= 0) { Serial.println("green on"); greenstate = "on"; digitalWrite(greenled, HIGH); } else if (header.indexOf("GET /green/off") >= 0) { Serial.println("green off"); greenstate = "off"; digitalWrite(greenled, LOW); } else if (header.indexOf("GET /red/on") >= 0) { Serial.println("red on"); redstate = "on"; digitalWrite(redled, HIGH); } else if (header.indexOf("GET /red/off") >= 0) { Serial.println("red off"); redstate = "off"; digitalWrite(redled, LOW); }复制代码接下来，我们创建一个网页，当用户与之交互时，NodeMCU将显示并更新该网页。主要函数是Client.println()，该函数用于将HTML脚本逐行发送到客户端（浏览器）。我们首先使用“ doctype”来表示接下来要打印的文本是HTML线。 client.println("");复制代码接下来，我们添加以下代码行以使网页响应，无论使用哪种浏览器。 client.println("");复制代码我们还向客户端添加了一些CSS，以使页面易于使用。您可以对其进行编辑以添加自己的颜色，字体样式等。 client.println("html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}"); client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;"); client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}"); client.println(".button2 {background-color: #77878A;}");复制代码接下来，网页标题与按钮一起发送，这些按钮根据LED的当前状态设置为显示ON或OFF。如果当前状态为ON，则显示为OFF，反之亦然。 client.println("ESP32 Web Server"); // Display current state, and ON/OFF buttons for green LED client.println("green - State " + greenstate + " "); // If the green LED is off, it displays the ON button if (greenstate == "off") { client.println("ON "); } else { client.println("OFF "); } // Display current state, and ON/OFF buttons for Red LED client.println("red - State " + redstate + " "); // If the red LED is off, it displays the ON button if (redstate == "off") { client.println("ON "); } else { client.println("OFF "); } client.println("");复制代码接下来，我们关闭连接，loop函数再次进行。 // Clear the header variable header = ""; // Close the connection client.stop(); Serial.println("Client disconnected."); Serial.println("");复制代码效果演示 将ESP32开发板连接到您的计算机，确保将其选择为Arduino IDE上的开发板类型，然后将代码粘贴到IDE中，进行验证并上传。 上传完成后，打开串口监视器。 您应该看到显示的IP地址，如下图所示。
eeeeeeeeee-1.png (8.13 KB, 下载次数: 30) 下载附件 保存到相册 2020-11-23 20:51 上传 将设备（手机或计算机）连接到与ESP32相同的网络，然后在该设备上打开Web浏览器并在地址栏中输入来自串口监视器的IP地址。 它将打开我们在网络服务器上创建的网页，如下图所示。 单击按钮切换LED。
Screen-Shot.png (67.49 KB, 下载次数: 27) 下载附件 保存到相册 2020-11-23 20:51 上传 如前所述，可以连接继电器或任何其他类型的执行器来代替LED，使该项目用途更广泛。 如果您对本文有任何疑问，请随时在本帖下面进行回复。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |