免费内网穿透教程——量子互联，通过网页远程控制ESP32的LED

无处在

已于 2024-04-19 17:23:59 修改

阅读量624

点赞数 7

分类专栏： ESP32 文章标签： c++ vscode 嵌入式硬件网络

于 2024-04-19 17:03:14 首次发布

本文链接：https://blog.csdn.net/m0_54423435/article/details/137968167

版权

ESP32 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文向大家介绍：通过网页远程控制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