如何通过HTTP GET请求从Web托管域名向ESP32发送数据？

核心逻辑 #

ESP32需先接入WiFi网络并启动一个HTTP服务器，监听指定端口；Web托管端通过构造带参数的HTTP GET请求，发送到ESP32的可访问地址（公网IP/内网穿透域名），ESP32解析请求中的参数完成数据接收与处理。

一、ESP32端配置（Arduino框架示例） #

1. 依赖库 #

确保已安装 WiFi 和 WebServer 库（Arduino IDE默认自带）。

2. 完整代码示例 #

#include <WiFi.h>
#include <WebServer.h>

// WiFi配置
const char* ssid = "你的WiFi名称";
const char* password = "你的WiFi密码";

// 创建Web服务器对象，监听80端口
WebServer server(80);

// 处理GET请求的回调函数
void handleDataRequest() {
  // 检查请求中是否包含目标参数
  if (server.hasArg("data")) {
    String receivedData = server.arg("data");
    Serial.print("收到数据：");
    Serial.println(receivedData);
    
    // 这里添加你的数据处理逻辑，比如控制外设、存储数据等
    // 示例：如果数据是"on"，点亮LED
    if (receivedData == "on") {
      digitalWrite(LED_BUILTIN, HIGH);
      server.send(200, "text/plain", "LED已点亮");
    } else if (receivedData == "off") {
      digitalWrite(LED_BUILTIN, LOW);
      server.send(200, "text/plain", "LED已熄灭");
    } else {
      server.send(200, "text/plain", "收到数据：" + receivedData);
    }
  } else {
    // 参数缺失时返回错误
    server.send(400, "text/plain", "缺少data参数");
  }
}

void setup() {
  Serial.begin(115200);
  pinMode(LED_BUILTIN, OUTPUT);
  
  // 连接WiFi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("WiFi已连接，IP地址：");
  Serial.println(WiFi.localIP());

  // 注册路由：当访问/data路径时触发handleDataRequest函数
  server.on("/data", HTTP_GET, handleDataRequest);
  
  // 启动服务器
  server.begin();
  Serial.println("HTTP服务器已启动");
}

void loop() {
  // 处理客户端请求
  server.handleClient();
}

3. 代码说明 #

• WebServer server(80)：ESP32启动HTTP服务，监听80端口（HTTP默认端口）。
• server.on("/data", HTTP_GET, handleDataRequest)：注册/data路径的GET请求处理函数，当Web端访问该路径时触发数据解析逻辑。
• server.arg("data")：获取GET请求中名为data的参数值，你可以根据需求自定义参数名（比如cmd、value等）。

二、Web托管端的请求构造 #

1. 浏览器直接测试 #

在浏览器地址栏输入ESP32的IP地址+路径+参数，比如：

http://192.168.1.100/data?data=on

（替换192.168.1.100为你的ESP32局域网IP，或公网穿透后的域名）

2. 网页中通过JavaScript发送请求 #

如果你的Web托管页面需要自动触发请求，可以用以下JS代码：

// 发送GET请求到ESP32
function sendDataToESP32(data) {
  const esp32Url = "http://你的ESP32公网地址/data";
  fetch(`${esp32Url}?data=${encodeURIComponent(data)}`)
    .then(response => response.text())
    .then(result => {
      console.log("ESP32响应：", result);
      // 处理响应逻辑
    })
    .catch(error => {
      console.error("请求失败：", error);
    });
}

// 调用示例：发送"off"指令
sendDataToESP32("off");

• 使用encodeURIComponent()处理特殊字符，避免参数解析错误。

三、关键注意事项 #

1. ESP32的网络可达性 #

• 如果ESP32在局域网内，Web托管端需要和ESP32处于同一网络，或通过端口映射（路由器设置）让公网能访问ESP32的IP和端口。
• 内网穿透工具可快速实现公网访问，示例命令：ngrok http 192.168.1.100:80，生成的临时域名即可用于Web端请求。

2. 参数安全性 #

如果传输敏感数据，建议：

• 使用HTTPS替代HTTP（ESP32可通过WebServerSecure库实现）。
• 添加简单的身份验证，比如在请求中携带密钥参数，ESP32端校验后再处理数据。

3. 错误处理 #

• ESP32端需处理参数缺失、请求格式错误等情况，返回对应的HTTP状态码（如400表示请求错误）。
• Web端需处理请求超时、连接失败等异常，避免页面阻塞。

内容的提问来源于stack exchange，提问作者Mhael Subasic