ESP32-C3实现网页控制LED的亮灭（局域网实现控制）

知更鸟_z

于 2024-10-10 16:53:02 发布

阅读量512

点赞数 4

分类专栏： ESP32 文章标签：嵌入式硬件

本文链接：https://blog.csdn.net/qq_59527512/article/details/142824084

版权

ESP32 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

源代码

#include <WiFi.h>
#include <WebServer.h>

// Wi-Fi 设置
const char* ssid = "ESP32-Access-Point";
const char* password = "123456789";

// 创建 WebServer 实例
WebServer server(80);

// 定义 LED 管脚
const int ledPin = 2;

void setup() {
  // 初始化 LED 管脚
  pinMode(ledPin, OUTPUT);

  // 初始化串口
  Serial.begin(115200);

  // 设置 Wi-Fi 模式为接入点
  WiFi.softAP(ssid, password);

  // 打印接入点 IP 地址
  Serial.println();
  Serial.print("IP address: ");
  Serial.println(WiFi.softAPIP());

  // 设置服务器路由
  server.on("/", handleRoot);  // 主页
  server.on("/ledon", handleLedOn);  // LED 亮
  server.on("/ledoff", handleLedOff);  // LED 灭
  server.begin();  // 启动服务器
}

void loop() {
  server.handleClient();  // 处理客户端请求
}

void handleRoot() {
  String html = "<html><body>"
                "<h1>ESP32 LED Control</h1>"
                "<form action=\"/ledon\" method=\"POST\"><input type=\"submit\" value=\"Turn ON\"></form>"
                "<form action=\"/ledoff\" method=\"POST\"><input type=\"submit\" value=\"Turn OFF\"></form>"
                "</body></html>";
  server.send(200, "text/html", html);
}

void handleLedOn() {
  digitalWrite(ledPin, HIGH);
  server.sendHeader("Location", "/");
  server.send(303);
}

void handleLedOff() {
  digitalWrite(ledPin, LOW);
  server.sendHeader("Location", "/");
  server.send(303);
}

解释

包含必要的库：
- #include <WiFi.h>：包含用于 ESP32 Wi-Fi 功能的库。
- #include <WebServer.h>：包含用于创建网页服务器的库。
Wi-Fi 设置：
- const char* ssid = "ESP32-Access-Point";：定义接入点的 SSID（网络名称）。
- const char* password = "123456789";：定义接入点的密码。
创建 WebServer 实例：
- WebServer server(80);：创建一个 WebServer 实例，监听默认的 HTTP 端口 80。
定义 LED 管脚：
- const int ledPin = 2;：定义连接到 LED 的 GPIO 管脚号（在 ESP32 上为 2）。
setup() 函数：
- 初始化 LED 管脚为输出模式。
- 初始化串口通信，波特率为 115200。
- 将 Wi-Fi 设置为接入点模式，并提供 SSID 和密码。
- 打印接入点的 IP 地址，客户端需要这个地址来连接到服务器。
- 设置服务器路由：
  - /：主页，调用 handleRoot 函数。
  - /ledon：处理 LED 点亮请求，调用 handleLedOn 函数。
  - /ledoff：处理 LED 熄灭请求，调用 handleLedOff 函数。
- 启动服务器。
loop() 函数：
- server.handleClient();：持续监听并处理来自客户端的请求。
handleRoot() 函数：
- 发送一个 HTML 页面，包含两个表单，分别用于控制 LED 的开关。
handleLedOn() 函数：
- 将 LED 管脚设置为高电平（点亮 LED）。
- 发送一个 303 重定向响应，将客户端重定向回主页。
handleLedOff() 函数：
- 将 LED 管脚设置为低电平（熄灭 LED）。
- 发送一个 303 重定向响应，将客户端重定向回主页。

具体函数解释

server.on("/", handleRoot); 事件监听器方法

server.sendHeader("Location", "/");：
- server.sendHeader 是一个方法，用于发送HTTP响应头。
- "Location" 是响应头的名称，它告诉客户端（通常是浏览器）资源现在位于一个新的URL。
- "/" 是响应头的值，表示新的URL是服务器上的根目录。
- 这行代码的作用是发送一个HTTP重定向响应头，告诉客户端应该导航到服务器的根目录。
server.send(303);：
- server.send 是一个方法，用于发送HTTP响应状态码和可选的响应体。
- 303 是HTTP状态码，代表“See Other”，通常用于重定向响应，表示客户端应该通过GET方法在另一个URL上检索资源。