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

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

关于Web服务器的简要说明

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

Web服务器是硬件和软件的结合，它负责维护、获取和向Web客户端提供Web页面。网页中的信息可以是任何格式，如HTML文档、图像、视频、应用程序等形式的文本。

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

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

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

ESP32 Web服务器要求

通过对Web服务器的简单介绍，我们现在将了解独立ESP32 Web服务器的需求。一个简单的ESP32 Web服务器必须包含一个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和Password连接到路由器的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 Server，那么客户端必须使用自己的SSID和Password连接到ESP32提供的网络才能访问Web页面。由于是软AP模式，客户端没有互联网连接。

创建ESP32 Web Server时，无论采用“工作站模式”还是“软AP模式”，基本相同，不同之处在于ESP32的配置部分。

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

ESP32 Web服务器

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

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

代码

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

下面的代码块显示了ESP32的Web服务器的完整代码。我注释代码是为了解释代码。

注意:此代码基于'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连接的进度、Web服务器的IP地址和URL(实质上是ESP32的IP地址)。

所以，在我的情况下，ESP32的IP地址是192.168.1.6。

通过客户端访问ESP32 Web服务器

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

以下为Chrome Web浏览器在笔记本电脑上访问ESP32 Web服务器的屏幕截图。

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

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

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

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

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

结论

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