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 +”
