查看: 17|回复: 0

[ESP8266/ESP32] FireBeetle 2 ESP32-C5 HTTP Server实现网页控制LED闪烁

简介
在本文中主要简介如何使用ESP32C5 快速的搭建一个HTTP server实现HTML页面的显示并且可以在HTML页面上来控制核心板上的LED闪烁。

效果如下所示：

FireBeetle 2 ESP32-C5 HTTP Server实现网页控制LED闪烁图1

FireBeetle 2 ESP32-C5 HTTP Server实现网页控制LED闪烁图1

整个程序由四个主要部分组成：

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(); // 处理客户端请求
}
复制代码