第五章 5.2ESP32物联网应用：HTTP与Web服务器详细教学

本文将详细讲解如何在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加密提升安全性。

第五章 5.2ESP32物联网应用：HTTP与Web服务器详细教学

一、HTTP协议基础

二、硬件准备

三、代码实现：网页控制LED

完整代码

四、代码逐行解析

五、使用演示

六、扩展应用

七、常见问题

相关资讯

热文排行

最新新闻

推荐新闻

热搜词