本文向大家介绍：通过网页远程控制ESP32的LED。
兄弟们，咱平时挺喜欢花里胡哨，一直很期待远程控制。今天实现了，立刻分享给大家。
一、ESP32下载代码
1、环境：
arduino IDE或VS Code PlatformIO （我是后者）
2、硬件准备：
一个esp32
一台电脑
一根数据线
3、最简代码
#include <Arduino.h>
#include <WiFi.h>
// WiFi信息
const char* ssid = "a";
const char* ssid_pwd = "12345678";
const int output2 = 2;
String output2State = "off";
// 创建一个服务器，服务器运行在80端口上
WiFiServer server(80);
// 用于记录HTTP请求
String header;
// 当前时间
unsigned long currentTime = millis();
unsigned long previousTime = 0;
// 超时时长
const long timeoutTime = 2000;
void setup() {
// 初始化串口
Serial.begin(115200);
// 初始化LED引脚
pinMode(output2, OUTPUT);
// 关闭LED
digitalWrite(output2, LOW);
// 连接WiFi
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, ssid_pwd);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// 打印分配到的IP地址
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
// 启动服务器
server.begin();
}
void loop(){
// 监听可用客户端
WiFiClient client = server.available();
// 新客户端连接
if (client) {
currentTime = millis();
previousTime = currentTime;
Serial.println("New Client.");
String currentLine = "";
// 在客户端连接期间处理请求逻辑
while (client.connected() && currentTime - previousTime <= timeoutTime) {
currentTime = millis();
// 客户端发送数据
if (client.available()) {
// 读取一字节数据
char c = client.read();
Serial.write(c);
// 解析客户请求并响应
header += c;
if (c == '\n') { // 新行
// 如果当前行为空，表明客户端请求结束，因此需要发送响应
if (currentLine.length() == 0) {
// 发送响应
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
// GPIO控制请求及处理
if (header.indexOf("GET /2/on") >= 0) {
Serial.println("GPIO 2 on");
output2State = "on";
digitalWrite(output2, HIGH);
} else if (header.indexOf("GET /2/off") >= 0) {
Serial.println("GPIO 2 off");
output2State = "off";
digitalWrite(output2, LOW);
}
// 发送Web页面
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
// 按键的CSS样式
client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #555555;}</style></head>");
// 页面标题
client.println("<body><h1>ESP32 Web Server</h1>");
// 根据当前GPIO状态设置不同样式
client.println("<p>GPIO 2 - State " + output2State + "</p>");
if (output2State=="off") {
client.println("<p><a href=\"/2/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/2/off\"><button class=\"button button2\">OFF</button></a></p>");
}
client.println("</body></html>");
// 结束响应
client.println();
// 退出当前循环
break;
} else { // 接收到新行数据
currentLine = "";
}
} else if (c != '\r') {
currentLine += c; // 添加接收收据
}
}
}
// 清空请求数据
header = "";
// 关闭客户端连接
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}注意：此处改为你自己的WiFi
// WiFi信息
const char* ssid = "a";
const char* ssid_pwd = "12345678";本文重点介绍内网穿透的实现，代码有注释不解释啦，自己读吧。
4、打开串口助手
可见ESP32的IP地址：192.168.98.237
记住这个IP下文会用到。
在同一个网络下，用浏览器打开此IP地址
5、见下图
6、点击ON
可点亮ESP32自带的D2灯。
但是，我是一个有梦想的咸鱼，想实现远程控制。
见下文，内网穿透。
二、内网穿透
1、点击：控制台
2、点击：我要注册
3、是这样的界面，请注册
4、注册好之后，请登录
5、点击：我的隧道
6、点击：开通隧道
7、点击：取消
白嫖玩家从不付费
8、请按要求填写
注意：内网IP为你的ESP32设备IP地址，上文曾提到：192.168.98.237
最后保存。
9、接着，
往下滑，见下图，以windows为例，下载客户端。
10、安装好以后，
将此处内容复制
复制到应用网络TOKEN中，点击登录。
12、此时已经可以使用内网穿透了
将公网域名\端口复制用浏览器打开，即可实现任意联网设备远程访问页面。
13、见下图
14、点击ON
可远程点亮ESP32自带的D2灯。
最后，我有话说：
如果文章对你有帮助，我很开心。有疑问请留言，看到后，我会回复。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
