这段 HTML 代码通过 JavaScript 向 ESP32 设备发送网络请求来控制 LED。下面用代码与汉字结合的方式，详细解析"发了什么信息""发送到哪里""用哪句代码发""如何发"这四个问题。
用户点击"点亮LED"按钮
↓
触发 sendCommand("on")
↓
构建 URL: http://192.168.4.1/light/on
↓
fetch 发送 GET 请求
↓
等待 ESP32 响应
↓
读取响应文本并更新页面状态
import socket
import network
import time
from machine import Pin
全局变量
led = Pin(2, Pin.OUT) # 初始化GPIO2为输出模式
led.value(0) # 默认熄灭LED
def start_ap():
"""启动ESP32的AP模式"""
ap = network.WLAN(network.AP_IF)
ap.active(False)
time.sleep(0.5)
ap.active(True)
AP配置
ssid = 'ESP32_APTest'
password = '12345678'
ap.config(
essid=ssid,
password=password,
authmode=3, # WPA2-PSK
max_clients=10
)
等待AP启动完成
while not ap.active():
time.sleep(0.1)
print('='*20)
print('AP模式已启动')
print('SSID:', ssid)
print('密码:', password)
ip = ap.ifconfig()0
print('IP地址:', ip) # 通常是192.168.4.1
print('='*20)
return ip
def web_server(ip):
"""仅提供LED控制接口，不返回HTML"""
启动TCP Web服务器
web_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
web_socket.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
web_socket.bind(("0.0.0.0", 80))
web_socket.listen(5)
print("API服务器已启动，地址: http://{}".format(ip))
while True:
try:
conn, addr = web_socket.accept()
print(f"客户端连接: {addr}")
接收HTTP请求
request = conn.recv(1024).decode("utf-8")
解析请求并控制LED
response = ""
if "/light/on" in request:
led.value(1)
response = "HTTP/1.1 200 OK\r\nContent-Type: text/plain\r\nAccess-Control-Allow-Origin: *\r\n\r\nLED已点亮"
elif "/light/off" in request:
led.value(0)
response = "HTTP/1.1 200 OK\r\nContent-Type: text/plain\r\nAccess-Control-Allow-Origin: *\r\n\r\nLED已熄灭"
else:
response = "HTTP/1.1 404 Not Found\r\nContent-Type: text/plain\r\n\r\nAPI Not Found"
发送响应
conn.send(response.encode("utf-8"))
conn.close()
except Exception as e:
print(f"Web服务器错误: {e}")
try:
conn.close()
except:
pass
continue
def main():
"""主函数：启动AP模式和Web服务器"""
ip = start_ap()
web_server(ip)
if name == "main":
main()
客户端：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESP32 LED控制</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 400px;
margin: 50px auto;
text-align: center;
}
.control-btn {
width: 150px;
height: 60px;
font-size: 20px;
margin: 10px;
border: none;
border-radius: 8px;
cursor: pointer;
color: white;
}
#onBtn {
background-color: #4CAF50;
}
#offBtn {
background-color: #f44336;
}
#status {
margin-top: 20px;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<h1>ESP32 LED控制器</h1>
<button id="onBtn" class="control-btn">点亮LED</button>
<button id="offBtn" class="control-btn">熄灭LED</button>
<div id="status">等待操作...</div>
<script>
// ESP32的实际IP地址（AP模式下通常是192.168.4.1）
const esp32_ip = "192.168.4.1";
// 发送请求到ESP32的API接口
async function sendCommand(cmd) {
try {
const response = await fetch(`http://${esp32_ip}/light/${cmd}`);
const result = await response.text();
document.getElementById('status').textContent = `操作结果: ${result}`;
} catch (err) {
document.getElementById('status').textContent = `操作失败: 请检查网络和ESP32 IP`;
console.error(err);
}
}
// 绑定按钮事件
document.getElementById('onBtn').addEventListener('click', () => {
sendCommand("on");
});
document.getElementById('offBtn').addEventListener('click', () => {
sendCommand("off");
});
</script>
</body>
</html>