ESP32 Web服务器：从网页控制LED

ESP系列WiFi模块在基于物联网项目的爱好者和行业中非常受欢迎。ESP32是ESP系列模块中最受欢迎的板之一，它具有双核32位CPU，内置Wi-Fi，蓝牙和足够数量的I/O引脚。它是一种小型且经济有效的设备，可用于使任何项目与互联网通信。在这个项目中，我将创建一个带有ESP32的web服务器，使用Arduino IDE环境控制LED。Web服务器是我们存储网页、处理网页并将其传送给Web客户端的地方。Web服务器可以通过本地网络上的任何设备访问。在之前的教程中，我们使用树莓派构建了相同的web服务器。

需求

•ESP32模块

•USB电缆

•电路试验板

•LED

•跳线

•电阻器1 k

线路图

编程部分

完整的ESP32 web服务器代码在本项目的末尾给出。在本节中，我将告诉您代码的实际工作原理。

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

现在输入您的网络凭据，即您的WiFi网络的SSID和密码内的双倒逗号。

接下来，声明一个WiFi Server库的对象，这样我们就可以访问它的函数了。所形成的实例的参数将是端口号，因为HTTP的默认端口号是80，所以我将使用这个值。

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

现在，您必须创建辅助变量来存储输出的当前状态。

现在，将GPIO分配到您的输出，这里我使用GPIO2引脚作为我的输出，您可以根据您正在使用的输出更改它。

在void setup()函数中，我们将初始化波特率，LED输出，并使用WiFi.begin(ssid,password)将模块与Wi-Fi连接;函数。该功能启动Wi-Fi连接，等待连接成功，并在串口监视器上打印ESP IP地址。

在loop()函数中，您必须编写当新客户端与web服务器建立连接时发生的事情。ESP32总是使用server.available()侦听传入的客户端;并将输入的数据存储到一个字符串变量中，并在串行监视器上打印数据。

现在，if和else语句检查在您的网页中按下了哪个按钮，并相应地控制输出。例如，如果您按下GPIO2 ON按钮，则ESP32接收到/2/ON URL上的请求，ESP32将LED打开。

用于ESP32 Webserver的HTML代码

在HTML中创建网页对这个项目来说是最重要的，ESP32将发送一个响应到你的浏览器，其中包含一些HTML代码来构建网页。-这里我们已经嵌入了完整的HTML代码在Arduino代码使用client.println。最后给出了完整的代码。

下面一行表示我们正在发送HTML。

下面的代码行使网页在任何浏览器中都能响应。

现在我们要样式我们的网页，装饰你的页面，你可以使用CSS样式按钮和背景。您可以根据自己的需要更改属性。

现在设置网页的标题。在这里，你可以给任何名字或任何你喜欢的东西。

现在您必须编写代码来显示GPIO 2的当前状态。使用output2state变量，以便在变量更改时立即更新状态。

现在，根据GPIO的当前状态显示on或off按钮。如果当前状态是关闭的，你必须显示ON按钮，反之亦然。

最后，当响应结束时，必须清除header变量，并使用client.stop()停止与客户端的连接。

这是整个项目的编程过程;本文最后给出了该项目的完整代码，您可以查看。

用Arduino IDE编程ESP32

现在您正处于上传ESP32代码的阶段，我们将使用Arduino IDE通过以下步骤上传ESP32中的代码：

通过USB电缆将ESP32连接到PC上，并如上所述制作电路，这里我使用的是GPIO2，您可以根据您的需要使用。

打开Arduino IDE并将此代码复制到IDE窗口，但请确保您提供了正确的网络WiFi凭据。

现在进入Tools——> Board——> ESP32 Dev module。

现在转到Tools—>Port，选择ESP32连接的端口。

现在单击upload上传代码。

上传完成后，您将在输出控制台中发现如下消息。

现在打开你的串行监视器，按下ESP32的重置按钮，现在你的ESP开始连接到你的网络，一旦连接，它会给你这个ESP的IP。

现在打开浏览器并输入此IP地址，您将找到以下网页。

从这个网页，你可以控制你的LED，你可以看到在串行监视器以及后台发生了什么。

这就是你如何成功地创建一个web服务器，并从网页控制LED。这样，您也可以使用ESP32网络服务器从世界任何地方控制家用电器。

本文编译自iotdesignpro