4. 按键状态监控

任务目标

在ESP32上连接一个物理按键，通过Web页面实时显示按键的按下/释放状态。当按键状态变化时，页面无需手动刷新即可自动更新。

所需材料

• ESP32开发板（如ESP32-DevKitC）
• 按键模块（或轻触开关+10kΩ上拉电阻）
• 面包板与杜邦线
• Arduino IDE（安装esp32开发板支持包）

硬件连接

按键一端连接GPIO 4，另一端连接GND。GPIO 4配置为INPUT_PULLUP，利用ESP32内部上拉电阻，按键按下时读到低电平，释放时读到高电平。

完整代码

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

// WiFi配置
const char* ssid = "your_SSID";
const char* password = "your_PASSWORD";

// 按键引脚
const int buttonPin = 4;
int lastButtonState = HIGH;
bool buttonChanged = false;

WebServer server(80);

// 生成HTML页面（内嵌JavaScript轮询）
String getHTML() {
  String html = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ESP32按键监控</title>
<style>
  body { font-family: Arial; text-align: center; padding: 40px; }
  .status { font-size: 48px; font-weight: bold; padding: 20px; border-radius: 10px; }
  .pressed { background: #ff4444; color: white; }
  .released { background: #44aa44; color: white; }
</style>
</head>
<body>
<h3>按键状态监控</h3>
<div id="status" class="status released">释放</div>
<p>状态自动更新，无需刷新页面</p>
<script>
function fetchState() {
  fetch('/state')
    .then(response => response.json())
    .then(data => {
      const el = document.getElementById('status');
      if (data.state === 0) {
        el.textContent = '按下';
        el.className = 'status pressed';
      } else {
        el.textContent = '释放';
        el.className = 'status released';
      }
    });
}
setInterval(fetchState, 200); // 每200ms轮询一次
fetchState();
</script>
</body>
</html>
)rawliteral";
  return html;
}

void setup() {
  Serial.begin(115200);
  pinMode(buttonPin, INPUT_PULLUP);
  lastButtonState = digitalRead(buttonPin);

  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nWiFi连接成功");
  Serial.print("IP地址: ");
  Serial.println(WiFi.localIP());

  server.on("/", []() {
    server.send(200, "text/html", getHTML());
  });

  server.on("/state", []() {
    String json = "{\"state\":" + String(digitalRead(buttonPin)) + "}";
    server.send(200, "application/json", json);
  });

  server.begin();
  Serial.println("HTTP服务器已启动");
}

void loop() {
  server.handleClient();
}

运行与验证

1. 将代码中的your_SSID和your_PASSWORD替换为实际WiFi信息。
2. 按硬件连接图接线，选择正确的开发板型号和端口，编译上传。
3. 打开串口监视器（波特率115200），记录ESP32获取的IP地址。
4. 浏览器访问该IP地址，页面显示当前按键状态为“释放”（绿色背景）。
5. 按下按键并保持，页面应在约200ms内变为“按下”（红色背景）；释放按键后恢复为“释放”。

通过条件：页面状态能随按键物理操作实时切换，且无需手动刷新浏览器。

常见问题

• 页面无法访问：确认ESP32与电脑在同一局域网，检查串口输出的IP地址是否正确。
• 状态不变化：检查按键接线，确认GPIO 4在按下时读到低电平（可用串口打印digitalRead(buttonPin)验证）。
• 状态抖动：本案例未做软件消抖，若需更精确可在代码中增加10~20ms延时确认。