FireBeetle 2 ESP32-C5 HTTP Server实现网页控制LED闪烁
简介在本文中主要简介如何使用ESP32C5 快速的搭建一个HTTP server实现HTML页面的显示并且可以在HTML页面上来控制核心板上的LED闪烁。
效果如下所示：
整个程序由四个主要部分组成：
[*]Wi-Fi 连接部分 → 让 ESP32-C5 连上你的路由器
[*]HTTP 服务器初始化 → 在端口 80 上建立网页访问
[*]网页与路由处理函数 → 定义访问 / 和 /led 时返回的内容
[*]主循环处理请求 → 持续监听并响应浏览器请求
1- 首先引入库文件
#include <WiFi.h>
#include <WebServer.h>
2- 然后配置自己的wifi信息
const char* ssid = "ImmortalWrt-5G";
const char* password = "XXXXXXXXX";
3- 创建WebServer的实例对象
// 创建 WebServer 实例（端口 80）
WebServer server(80);
这里需要的话可以自己修改端口。
4- 定义板载的LED灯引脚
const int LED_PIN = 15;
根据开发板丝印可以确定是引脚15
5- 然后定义当访问网页的时候将要显示的内容是什么
void handleRoot() {
server.send(200, "text/html",
"<html><body>"
"<h1 style=\"color:red\">FireBeetle 2 ESP32-C5</h1>"
"<h2>Hello from DFROBOT!</h2>"
"<p><a href=\"/led?state=on\">Turn LED ON</a></p>"
"<p><a href=\"/led?state=off\">Turn LED OFF</a></p>"
"</body></html>");
}
6- 以及对应的LED响应函数
void handleLed() {
String state = server.arg("state"); // 获取URL参数 state
if (state == "on") {
digitalWrite(LED_PIN, HIGH);
server.send(200, "text/plain", "LED is ON");
} else if (state == "off") {
digitalWrite(LED_PIN, LOW);
server.send(200, "text/plain", "LED is OFF");
} else {
server.send(400, "text/plain", "Invalid state");
}
}
完整代码如下：
#include <WiFi.h>
#include <WebServer.h>// ESP32 内置 HTTP Server 库
// 修改为你的 Wi-Fi 信息
const char* ssid = "ImmortalWrt-5G";
const char* password = "mazha1997";
// 创建 WebServer 实例（端口 80）
WebServer server(80);
// 板载 LED 引脚（根据开发板修改）
const int LED_PIN = 15;
void handleRoot() {
server.send(200, "text/html",
"<html><body>"
"<h1 style=\"color:red\">FireBeetle 2 ESP32-C5</h1>"
"<h2>Hello from DFROBOT!</h2>"
"<p><a href=\"/led?state=on\">Turn LED ON</a></p>"
"<p><a href=\"/led?state=off\">Turn LED OFF</a></p>"
"</body></html>");
}
void handleLed() {
String state = server.arg("state");
if (state == "on") {
digitalWrite(LED_PIN, HIGH);
server.send(200, "text/plain", "LED is ON");
} else if (state == "off") {
digitalWrite(LED_PIN, LOW);
server.send(200, "text/plain", "LED is OFF");
} else {
server.send(400, "text/plain", "Invalid state");
}
}
void setup() {
Serial.begin(115200);
pinMode(LED_PIN, OUTPUT);
digitalWrite(LED_PIN, LOW);
// 连接 Wi-Fi
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("\nWiFi connected!");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
// 注册路由
server.on("/", handleRoot);
server.on("/led", handleLed);
// 启动服务器
server.begin();
Serial.println("HTTP server started");
}
void loop() {
server.handleClient(); // 处理客户端请求
}
当然如果需要的话我们可以替换一点元素，比如说增加额外的CSS，这样的话页面会变得更加美观。
修改后的HTML内容（AI生成，这效果真的好）
页:
[1]