ESP32 上的 Web 服务器：如何自动更新和显示来自服务器的传感器值

ajax 服务器

1个回答

写回答

吃草莓的小女孩

2025-06-15 02:10

+ 关注

服务器

# 使用ESP32搭建Web服务器：自动更新和显示传感器值

ESP32是一款强大的开发板，具备Wi-Fi和蓝牙功能，非常适合构建物联网（IoT）应用。在这篇文章中，我们将讨论如何在ESP32上搭建一个简单的Web服务器，并实现自动更新和显示来自服务器的传感器值。我们将使用Arduino IDE和ESPAsyncWebServer库来简化这个过程。

## 硬件准备

在开始之前，请确保你已经准备好以下硬件：

- ESP32开发板

- 传感器（例如温度传感器，湿度传感器等）

- 连接线

## 环境设置

在Arduino IDE中，首先确保你已经成功安装了ESP32支持。通过Arduino IDE的“工具”菜单中的“开发板”选项，选择正确的ESP32开发板。

## 安装ESPAsyncWebServer库

在Arduino IDE中，通过“工具”菜单的“库管理器”选项，搜索并安装ESPAsyncWebServer库。这个库将帮助我们轻松地处理异步Web请求。

## 编写代码

下面是一个简单的例子代码，演示如何在ESP32上搭建Web服务器并自动更新和显示传感器值：

cpp
#include <WIFI.h>
#include <ESPAsyncWebServer.h>
const char *ssid = "your-ssid";
const char *password = "your-password";
AsyncWebServer server(80);
// 模拟传感器值
float sensorValue = 25.5;
void setup() {
  Serial.begin(115200);
  // 连接到Wi-Fi网络
  WIFI.begin(ssid, password);
  while (WIFI.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WIFI...");
  }
  Serial.println("Connected to WIFI");
  // 设置路由
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    String html = "<html><body>";
    html += "<h1>Sensor Value: <span id='sensorValue'>" + String(sensorValue) + "</span></h1>";
    html += "<script>setInterval(() => { fetch('/update').then(response => response.text()).then(data => document.getElementById('sensorValue').innerHTML = data); }, 1000);</script>";
    html += "</body></html>";
    request->send(200, "text/html", html);
  });
  server.on("/update", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plAIn", String(sensorValue).c_str());
  });
  // 开始服务器
  server.begin();
}
void loop() {
  // 读取传感器值的代码
  // 这里使用模拟值
  sensorValue = random(20, 30);
  delay(1000);
}

## 实现自动更新

在上面的代码中，我们使用JavaScript定时器每秒钟从服务器获取传感器值。在HTML响应中，我们使用元素来显示传感器值，并通过JavaScript更新该元素的内容。

通过这个简单的例子，我们演示了如何在ESP32上搭建Web服务器，实现自动更新和显示传感器值。这对于监控和远程控制物联网设备非常有用。你可以根据自己的项目需求扩展这个例子，添加更多的传感器和功能。希望这篇文章对你在ESP32上构建Web服务器时有所帮助。

举报有用（4）分享收藏

ESP32 上的 Web 服务器：如何自动更新和显示来自服务器的传感器值

1个回答

吃草莓的小女孩

热门话题

相关问题