ESP32 Web服务器使用Arduino IDE
ESP32是一种微控制器板，可以使用其GPIO引脚与多个设备连接。它有一个内置Wi-Fi和蓝牙接口的双核处理器。这两个特性使ESP32成为设计物联网项目的合适板。ESP32板的主要特点之一是它能够与现有的接入点连接。不仅如此，它还可以创建自己的接入点，这样其他设备就可以与之连接。
在这篇ESP32文章中，我们将探讨如何将ESP32板与接入点连接并设计其web服务器。使用该web服务器，我们将在继电器模块的帮助下控制led和AC设备。
内容:
- ESP32 Web服务器
- 如何使用Arduino IDE创建ESP32 Web服务器
- ESP32 Web服务器代码
- ESP32 Web服务器IP地址
- 使用ESP32 Web服务器控制led
- 桌面界面
- 移动界面
- 利用ESP32网络服务器控制交流电器
- 结论
1. ESP32 Web服务器
Web服务器有一个特殊的程序，可以处理和发送网页给Web客户端。打开一个网站，我们使用网络浏览器。这种网络浏览器也被称为网络客户端。你想浏览的网站存储在另一台被称为网络服务器的计算机上。
为了相互通信，web服务器和web客户端使用一种称为HTTP的通用语言。它是这样工作的:web客户端使用HTTP请求向web服务器请求一个网页。web服务器返回请求的web页面。如果网页不存在，您将看到一条错误消息。
在ESP32中，我们可以设计一个Web服务器，因为ESP32不仅可以通过网络与其他设备连接，还可以创建自己的Web服务器并响应接收到的请求。这一切都是可能的，因为ESP32可以在三种不同的模式下工作:
- 站
- 访问点
- 站和接入点
您可以查看这篇文章，深入了解ESP32的所有三种模式:
如何使用Arduino IDE设置ESP32接入点(AP)
2. 如何使用Arduino IDE创建ESP32 Web服务器
要使用Arduino IDE创建ESP32 web服务器，您可以将ESP32连接到接入点并为web服务器生成IP地址。您可以应用一些HTML和CSS来设计服务器界面。
一旦你了解了ESP32接入点的工作原理，你就可以使用Arduino IDE代码轻松地设计一个ESP32 web服务器。ESP32 web服务器代码使用ESP32 Wi-Fi库。这使我们的工作更容易，因为这个库包含了将ESP32连接到接入点所需的所有重要函数。
让我们使用Arduino IDE代码设计一个ESP32 Web服务器。
3. ESP32 Web服务器代码
ESP32 web服务器代码包括ESP32与接入点的连接以及获取服务器的IP地址。获得IP地址后，必须连接到同一个网络才能访问ESP32 web服务器。从那里你可以控制led和其他设备。
打开Arduino IDE并将ESP32板与它连接:
在Arduino IDE中安装ESP32板
ESP32单板连接完成后，上传以下代码到单板。
/**************
Linuxhint.com
ESP32 Web服务器控制led
**************/
//导入Wi-Fi连接库
# include
//输入Wi-Fi名称和密码
const char* ssid = "ESP32";
Const char* password = "123456789";
//选择web服务器的端口号
WiFiServer服务器(80);
//创建一个变量来存储web请求
字符串头;
//创建变量来存储输出状态
String output26State = "OFF";
String output27State = "OFF";
//将输出引脚分配给变量
Const int output = 26;
Const int输出27 = 27;
unsigned long currentTime = millis();
unsigned long previousTime = 0;
//选择web请求的时间限制，以毫秒为单位
const long timeoutTime = 2000;
无效设置(){
Serial.begin (115200);
//设置输出引脚为输出
pinMode (output26、输出);
pinMode (output27、输出);
//关闭输出
digitalWrite (output26、低);
digitalWrite (output27、低);
//连接Wi-Fi网络
系列。打印(“连接到”);
以(ssid);
WiFi。开始(ssid、密码);
//等待连接建立
while (WiFi.status() != WL_CONNECTED) {
延迟(500);
并同时(“。”);
}
以(" ");
系列。println(“无线网络连接”。);
系列。println(“IP地址:”);
以WiFi.localIP ());
server.begin ();
}
无效循环(){
WiFiClient client = server.available();//检查新客户端
if (client){//如果客户端已连接，
currentTime = millis();
previousTime = currentTime;
系列。println(“新客户”。);//通知串口
字符串currentLine = "";//创建一个字符串来存储客户端数据
while (client.connected() && currentTime - previousTime = 0) {
系列。println(GPIO 26 on);
output26State = "ON";
digitalWrite (output26、高);
} else if (header。indexOf("GET /26/off") >= 0) {
系列。println(“GPIO 26关闭”);
output26State = "OFF";
digitalWrite (output26、低);
} else if (header。indexOf("GET /27/on") >= 0) {
系列。println(GPIO 27 on);
output27State = "ON";
digitalWrite (output27、高);
} else if (header。indexOf("GET /27/off") >= 0) {
系列。println(“GPIO 27关闭”);
output27State = "OFF";
digitalWrite (output27、低);
}
client.println (" ");
client.println (" ");
client.println (" ");
// CSS样式按钮
客户端。println("html {font-family:宋体;显示:inline-block;Margin: 0px auto;text-align:中心;}”);
客户端。Println ("body {background: linear-gradient(to right， #0f0c29， #302b63， #24243e);}”);
//带有发光效果的霓虹蓝色按钮
client.println(”。按钮{background-color: #08f;边界:没有;颜色:白色;Padding: 16px 40px;
客户端。println(“文字修饰:没有;字体大小:30 px;保证金:2 px;光标:指针;Box-shadow: 0 0 20px #08f;
//带有发光效果的深灰色按钮
client.println(”。Button2 {background-color: #333;Box-shadow: 0 0 20px #333;
//按钮的过渡效果
client.println(”。Button， .button2 {transition: all 0.3s ease-in-out;}");
//圆角按钮
client.println(”。Button， .button2 {border-radius: 50%;}");
//网页标题
客户端。println("Linuxhint ESP32 Web Server");
//网页标题
客户端。println("ESP32 Web Server");
//显示GPIO 26的状态和按钮
client.println(“
GPIO 26 -状态“+ output26State +”
”);
//如果状态为OFF，则显示ON按钮
if (output26State=="OFF") {
client.println(“
在
”);
} else{//如果状态为ON则显示OFF按钮
client.println(“
从
”);
}
//显示GPIO 27的状态和按钮
client.println(“
GPIO 27 - State " + output27State + "
”);
//如果状态为OFF，则显示ON按钮
if (output27State=="OFF") {
client.println(“
在
”);
} else{//如果状态为ON则显示OFF按钮
client.println(“
从
”);
}
client.println (" ");
//以空行结束HTTP响应
client.println ();
//退出while循环
打破;
} else{//清除当前行，如果它是换行符
currentLine = "";
}
} else if (c != 'r'){//如果不是回车，则将字节添加到当前行
currentLine += c;
}
}
}
//重置头信息
header = "";
//关闭客户端连接
client.stop ();
系列。println(“客户端断开连接。”);
以(" ");
}
}
代码的解释
ESP32 web服务器代码从设置Wifi连接开始。首先，它包含WiFi.h库。接下来，此代码要求您输入要连接ESP32板的网络的SSID和密码。之后，我们创建变量来存储输出的状态，并将输出引脚分配给这些变量。这里我们使用GPIO引脚26和27，但您也可以使用任何其他GPIO引脚连接设备或led。
在代码的第二部分，启动串行通信。这将帮助我们检查ESP32板和连接到它的外设的状态。除此之外，我们还为连接的两个led的不同状态定义了串行输出。您可以连接LED灯并将其状态定义为开和关。此代码部分也会在上传代码后打印ESP32 web服务器的IP地址。包含IP地址的代码部分将只打印一次，因为它在Setup()函数中。
在第三部分中，或者在Loop()函数中，我们定义了处理Web请求和控制GPIO引脚的代码。该代码部分将像在loop()函数中一样重复执行。它检查新的客户端并从客户端读取数据。读取后，它解析HTTP请求并发送适当的响应，如打开或关闭LED。该代码部分还包含有关ESP32 web服务器的基本样式的信息。界面包括LED按钮及其当前状态。
4. ESP32 Web服务器IP地址
ESP32 web服务器IP地址是设备在网络中的唯一标识。要访问ESP32 web服务器，您需要使用该IP地址。上传上述代码后，IP地址将由路由器自动分配，也称为动态IP。但是，您也可以手动分配一个IP地址(也称为静态IP)。
要找到ESP32服务器的IP地址，可以在上传代码后检查Arduino IDE的串行监视器。请记住，只有当ESP32板与接入点成功连接时，才会显示此IP地址。
注意:如果您发现难以将ESP32板与接入点连接，请尝试更改路由器(接入点)SSID。尽量避免在SSID中使用特殊字符。
5. 使用ESP32 Web服务器控制led
现在我们将用ESP32板设置两个led，并使用ESP32 web服务器控制它们。您可以使用代码中定义的相同GPIO引脚，也可以为任何其他GPIO引脚修改代码。这里我们将一个LED连接到GPIO 26，另一个连接到GPIO 27。
桌面界面
一旦硬件准备好，下一步是使用Arduino IDE终端上ESP32给出的相同IP地址访问web服务器。为此，您的系统必须连接到相同的网络。在桌面上打开WiFi设置，连接网络。
连接后，您可以使用web浏览器(Chrome)访问web服务器。在URL栏中输入ESP32 web服务器的IP地址，按“Enter”。打开后，您将看到以下界面。
在代码内设置的当前状态下，两个led都是OFF。因此，在将ESP32连接到PC后，您将看到没有led发光。
我们将从打开GPIO 26的LED开始。拨动OFF开关，你会看到LED会发光。
GPIO 26指示灯常亮。
同样，对于GPIO 27的LED，拨第二个按钮。
现在您将看到连接到GPIO 27的第二个LED也会发光。
你也可以通过切换它们的按钮来打开两个led。
切换两个led后，你会看到两个led都发光。
移动界面
ESP32 web服务器不仅限于桌面浏览器，您还可以从任何其他设备(如智能手机或平板电脑)访问它。要连接ESP32 web服务器，打开WiFi网络设置并搜索您在代码中定义的相同SSID。
搜索完接入点后，将智能手机与该接入点连接。
连接后，打开智能手机上的浏览器，使用ESP32 IP地址访问web服务器。智能手机的界面与台式电脑类似。您可以完全控制GPIO引脚，就像在桌面浏览器中一样。
6. 利用ESP32网络服务器控制交流电器
目前，我们已经将一个简单的LED与ESP32连接起来，并使用ESP32 web服务器控制它们。但这只是ESP32网络服务器的一个简单程序。您可以将相同的概念应用于任何传感器或模块，并生成所需的输出。
例如，您可以将中继模块与ESP32连接，并使用上述相同的web服务器代码控制任何AC设备。
阅读:继电器与ESP32使用Arduino IDE
现在我们将使用继电器模块将交流灯泡与ESP32连接起来。在这里，我将使用GPIO引脚26来控制交流灯泡。您可以定义所需的GPIO引脚来控制继电器。
| ESP32销 | 继电器模块引脚 |
|---|---|
| 文/ 3 v3 | Vcc |
| 接地 | 接地 |
| GPIO 26或GPIO 27 | IN1或IN2 |
下面是带有继电器模块和交流灯泡的ESP32的原理图。
连接完继电器模块后，打开ESP32 web服务器，拨出GPIO 26开关。
你会看到灯泡亮了。
我们已经成功地创建了一个ESP32 web服务器，并用它来控制交流和直流设备。您可以将相同的代码应用于任何其他传感器，并为您的项目创建自定义web服务器。
结论
ESP32是一种微控制器板，可以与接入点连接，也可以作为其他设备的接入点。利用ESP32的这一特性，可以设计ESP32 web服务器。您所需要的只是将ESP32板与接入点连接起来，并获得web服务器的IP地址。之后，你必须在任何网络浏览器中输入相同的IP，然后你就可以立即访问网络服务器。但请确保在访问ESP32 web服务器时连接到相同的网络。此外，您可以修改给定的代码并控制您选择的任何传感器或模块。
