关于如何创建ESP32 Web服务器的完整初学者教程

在本教程中，我们将了解如何构建一个简单的ESP32 Web Server。该ESP32独立Web服务器可以通过与ESP32连接到相同WiFi网络的手机、电脑、笔记本电脑和平板电脑访问。作为web服务器的演示，我创建了一个简单的web页面，可以由客户端访问，并控制连接到ESP32的一对led。

关于Web服务器的简要说明

我已经讨论了Web服务器ESP8266 NodeMCU Web服务器项目。但这里还是一个概述。

Web服务器是硬件和软件的组合，负责维护、获取和向Web客户端提供Web页面。网页内的资讯可以是任何格式，如HTML文件、图像、视频、应用程式等形式的文本。[ESP32项目初学者］

说到Web客户端，笔记本电脑和手机中的Web浏览器是最简单的Web客户端类型之一。Web服务器和Web客户机之间的通信通常被称为客户机-服务器通信模型。

超文本传输协议(简称HTTP)是负责客户端和服务器之间通信的协议。在这种类型的通信中，Web客户机使用HTTP从服务器请求信息。Web服务器总是在等待(监听)请求，它用适当的Web页面响应客户机的请求。

如果没有找到请求的页面，那么服务器将响应HTTP 404 Error。

ESP32 Web Server的要求

通过对Web服务器的简单介绍，我们现在将了解独立ESP32 Web服务器的需求。一个简单的ESP32 Web Server必须包含HTML文本形式的网页。

当客户端(比如手机中的web浏览器)通过HTTP发送对web页面的请求时，ESP32中的web服务器必须响应该web页面。此外，当客户端执行任何操作时，如单击按钮，服务器应响应适当的操作(如打开/关闭LED)。

ESP32的Wi-Fi运行方式

在继续为ESP32创建Web服务器之前，我们将看看在ESP32中Wi-Fi的不同运行模式。基本上，ESP32 Wi-Fi模块有三种WiFi工作模式。它们是:

• 站模式(STA)
• 软接入点模式(AP)
• 工作站+软AP模式

在工作站模式下，ESP32模块连接到现有的WiFi网络，这是由无线路由器设置的，就像我们的手机和笔记本电脑一样。

ESP32 Wi-Fi模块通过路由器的SSID和密码连接到路由器的Wi-Fi网络，并由路由器为ESP32分配本地IP地址。

进入接入点模式，ESP32模块创建自己的WiFi网络，像一个无线路由器，这样其他站点，如手机，笔记本电脑，甚至其他ESP32模块(在STA模式)可以连接到网络。

因为ESP32没有有线以太网连接到互联网，这种AP模式被称为软AP模式。在AP模式下配置ESP32时，必须为网络设置SSID和密码，以便其他设备可以使用这些凭据连接到该网络。

台站+软AP是台站模式和软AP模式的结合。在这种情况下，ESP32既充当站，也充当接入点。

创建Web服务器使用哪种模式?

您可以将ESP32 Wi-Fi模块配置为“工作站模式”或“接入点模式”，创建web服务器。不同的是，在站模式下，所有的设备(手机、笔记本电脑、ESP32、ESP8266等)都连接到无线路由器的WiFi网络，所有设备(包括ESP32的Web Server)的IP地址由路由器分配。

客户端可以通过该IP地址访问Web页面。此外，客户机不会从路由器失去互联网连接。

但是，如果我们在AP模式下为ESP32创建Web服务器，那么客户端必须使用ESP32自己的SSID和密码连接到ESP32提供的网络，以便访问Web页面。由于它是一种软AP模式，客户端没有互联网连接。

在工作站模式或软AP模式下创建ESP32 Web服务器非常相似，除了ESP32的配置部分。

在本教程中，我将向您展示如何在站模式(STA)下配置的ESP32上创建Web服务器。

ESP32 Web服务器

除了在ESP32上创建web服务器并在客户端上访问它之外，我们还将看到这个web服务器如何通过控制连接到ESP32开发板GPIO引脚的两个led来响应客户端的不同请求。

为了演示这一点，我通过各自的限流电阻(220Ω)将两个5mm led连接到ESP32的GPIO 16和GPIO 17。在ESP32 DevKit Development Board上，GPIO 16标记为RX2, GPIO 17标记为TX2。

代码

来到重要和有趣的东西，Web Server在ESP32上的实际代码。它只是一个带有一些文本、几个按钮和一些样式化的HTML代码。

下面的代码块显示了ESP32的Web Server的完整代码。为了解释代码，我注释了代码。

注意:此代码基于'Arduino Web服务器的例子。

修改和上传代码

在上述代码的第6行和第7行中，您必须根据您的Wi-Fi网络设置进行修改。这是Wi-Fi网络的SSID和密码。

const char* ssid = "ESP32-WiFi";/*添加路由器的SSID */ const char* password = "12345678";/*添加密码*/

修改完成后，根据电路图进行相应的连接，将ESP32单板与计算机连接，选择ESP32单板，并选择正确的COM端口，上传代码。

如果您是ESP32的新手，那么ESP32入门教程将帮助您配置Arduino IDE。

打开串口监视器，ESP32模块将打印一些重要的信息，如Wi-Fi连接的进度，IP地址和Web服务器的URL(本质上是ESP32的IP地址)。

因此，在我的情况下，ESP32的IP地址是192.168.1.6。

从客户端访问ESP32 Web服务器

在笔记本电脑或手机上打开浏览器，输入ESP32的IP地址。这是关键时刻。如果一切正常，那么您应该能够看到一个由ESP32的web Server托管的简单网页。

下图是在笔记本电脑上访问ESP32的Web Server的Chrome Web浏览器截图。

从图中可以看到，web页面显示了一个主标题文本，后面是连接到GPIO 16的LED的状态。后面是一个按钮，可以用来打开或关闭LED。对于GPIO 17也是同样的事情(status后面跟着Button)。

现在，如果我点击第一个按钮，连接到GPIO 16的LED会打开，web页面的状态会更新，按钮的文字和颜色也会改变。

如果查看一下串行监视器，就会发现每次客户机试图连接(或发送请求)时，串行监视器上会打印一些关键信息。我将在下一节中解释这些信息(这实际上是客户端请求的一部分)。

接下来，我在手机上尝试了同样的事情。它的工作原理。

注意:所有的客户端，如手机、笔记本电脑等，必须连接到与ESP32模块相同的网络。

结论

一个关于如何使用ESP32 DevKit开发板创建Web服务器的完整的分步教程。您学习了一些关于web服务器的重要基础知识，ESP32 WiFi的不同操作模式，如何构建ESP32 web服务器以及如何从不同的客户端访问该服务器。