网站开发 教学目标实时热搜榜
本文将详细讲解如何在ESP32上搭建Web服务器，通过HTTP协议实现远程控制LED灯。每行代码均有详细注释，适合零基础学习。
一、HTTP协议基础
HTTP是客户端（浏览器）和服务器之间的通信协议，常用请求方法：
-
GET：从服务器获取数据（如加载网页）
-
POST：向服务器提交数据（如表单提交）
二、硬件准备
-
ESP32开发板
-
LED灯（接GPIO2，串联220Ω电阻）
三、代码实现：网页控制LED
完整代码
#include <WiFi.h>// WiFi配置
const char* ssid = "Your_SSID"; // 替换为你的WiFi名称
const char* password = "Your_PASS"; // 替换为你的WiFi密码// 创建Web服务器对象，监听80端口
WiFiServer server(80);// LED配置
const int ledPin = 2; // 使用GPIO2控制LED
String ledState = "OFF"; // 存储LED状态void setup() {Serial.begin(115200);pinMode(ledPin, OUTPUT);digitalWrite(ledPin, LOW); // 初始关闭LED// 连接WiFiSerial.print("Connecting to ");Serial.println(ssid);WiFi.begin(ssid, password);while (WiFi.status() != WL_CONNECTED) { // 等待连接delay(500);Serial.print(".");}// 打印IP地址Serial.println("");Serial.println("WiFi connected.");Serial.print("IP address: ");Serial.println(WiFi.localIP());server.begin(); // 启动Web服务器
}void loop() {WiFiClient client = server.available(); // 检测客户端连接if (client) {Serial.println("New Client.");String currentLine = ""; // 存储客户端请求数据while (client.connected()) {if (client.available()) {char c = client.read(); // 读取请求字节Serial.write(c); // 串口打印请求if (c == '\n') { // 判断请求结束// 发送HTTP响应头client.println("HTTP/1.1 200 OK");client.println("Content-type:text/html");client.println("Connection: close");client.println();// 生成HTML页面client.println("<!DOCTYPE html><html>");client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");client.println("<style>button { padding: 20px; font-size: 24px; }</style></head>");client.println("<body><h1>ESP32 Web Server</h1>");client.println("<p>LED状态: " + ledState + "</p>");client.println("<p><a href=\"/on\"><button>ON</button></a></p>");client.println("<p><a href=\"/off\"><button>OFF</button></a></p>");client.println("</body></html>");// 解析客户端请求if (currentLine.startsWith("GET /on")) {digitalWrite(ledPin, HIGH);ledState = "ON";} else if (currentLine.startsWith("GET /off")) {digitalWrite(ledPin, LOW);ledState = "OFF";}break; // 结束响应} else if (c != '\r') {currentLine += c; // 存储请求内容}}}client.stop(); // 关闭连接Serial.println("Client disconnected.");}
}四、代码逐行解析
-
WiFi连接
WiFi.begin(ssid, password); // 启动WiFi连接 while (WiFi.status() != WL_CONNECTED) // 等待连接成功-
持续检测直到WiFi连接成功
-
-
Web服务器初始化
WiFiServer server(80); // 创建监听80端口的服务器 server.begin(); // 启动服务器 -
处理客户端请求
WiFiClient client = server.available(); // 检查是否有客户端连接-
当浏览器访问ESP32的IP时触发
-
-
HTML页面生成
client.println("<a href=\"/on\"><button>ON</button></a>"); // 创建ON按钮-
点击按钮会发送
GET /on请求
-
-
LED控制逻辑
if (currentLine.startsWith("GET /on")) {digitalWrite(ledPin, HIGH); // 收到/on请求时点亮LED }
五、使用演示
-
上传代码到ESP32
-
打开串口监视器查看分配的IP地址
-
浏览器访问
http://[ESP32_IP] -
点击ON/OFF按钮控制LED
六、扩展应用
-
添加POST请求处理：通过表单提交数据
-
多设备控制：增加更多按钮和GPIO控制
-
传感器集成：在网页显示温湿度数据
七、常见问题
-
无法连接WiFi：检查SSID/密码是否正确
-
按钮无反应：确认GPIO引脚配置正确
-
页面加载慢：确保ESP32信号强度足够
通过本教程，您已掌握ESP32 Web服务器的核心实现方法。后续可结合AJAX实现无刷新更新，或添加SSL加密提升安全性。