【花雕学编程】Arduino动手做（246）---使用 Web 服务器的 ESP8266 LED 控制- Makelog(造物记)

所需零件
在本案例中，我们将控制两个 LED。因此，我们需要以下部分：
ESP8266开发板
两个 LED
面包板
跳线

【花雕学编程】239种传感器执行器系列实验（资料代码+仿真编程+图形编程）
实验二百四十六：ESP8266串口wifi模块 NodeMCU Lua V3物联网开发板 CH340
实验项目之十三：使用 Web 服务器的 ESP8266 LED 控制

实验开源代码

代码

/*
  【花雕学编程】239种传感器执行器系列实验（资料代码+仿真编程+图形编程）
   实验二百四十六：ESP8266串口wifi模块 NodeMCU Lua V3物联网开发板 CH340
   实验项目之十三：使用 Web 服务器的 ESP8266 LED 控制
*/

#include <ESP8266WiFi.h> // 包含ESP8266WiFi库，用于WiFi连接
#include <ESP8266WebServer.h> // 包含ESP8266WebServer库，用于创建Web服务器

#define output2  2
#define output0  0

// 定义AP模式的SSID和密码
const char* ssid = "ESP8266_AP"; // 这是ESP8266将广播的SSID
const char* password = "12345678"; // 密码至少应为8个字符

// 创建全局变量
String http;
String output2State = "off";
String output0State = "off";

// 定义服务端和客户端
WiFiServer server(80); // 创建一个WiFiServer对象，监听80端口
WiFiClient client; // 创建一个WiFiClient对象

void setup() {
  Serial.begin(9600); // 初始化串口通信，波特率为9600
  Serial.println(" ");
  Serial.println(" ");
  pinMode(2, OUTPUT); // 设置GPIO 2为输出模式
  pinMode(0, OUTPUT); // 设置GPIO 0为输出模式
  digitalWrite(2, LOW); // 初始化GPIO 2为低电平
  digitalWrite(0, LOW); // 初始化GPIO 0为低电平
  Serial.print("Connecting to ");
  Serial.println(ssid);

  // 创建ESP8266接入点
  WiFi.softAP(ssid, password);

  Serial.println("");
  Serial.println("WiFi AP is now running");
  Serial.println("IP address: ");
  Serial.println(WiFi.softAPIP());

  // 启动ESP8266服务器
  server.begin();
}

void loop() {
  client = server.available(); // 检查是否有新的客户端尝试连接到服务器
  if (client) {
    Serial.println("New Client.");
    String clientData = "";
    while (client.connected()) { // 等待客户端完成HTTP请求的发送
      if (client.available()) { // 如果有数据
        char c = client.read(); // 读取一个字符
        http += c; // 解析它
        Serial.write(c);
        if (c == '\n') { // 如果字符是换行符
          // 表示客户端HTTP请求结束
          if (clientData.length() == 0) { // 清空clientData
            sendResponse(); // 执行必要操作
            updateLED();
            updateWebpage();
            break;
          } else {
            clientData = ""; // 清空clientData
          }
        } else if (c != '\r') { // 如果字符不是回车符
          clientData += c; // 将字符存储到clientData变量中
        }
      }
    }
    http = "";
    client.stop(); // 断开客户端连接
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

void sendResponse() {
  // 发送HTTP响应头
  client.println("HTTP/1.1 200 OK");
  client.println("Content-type:text/html");
  client.println("Connection: close");
  client.println();
}

void updateWebpage() {
  // 发送整个HTML页面
  client.println("<!DOCTYPE html><html>");
  client.println("<head>");
  client.println("<title>LED Status</title>");
  client.println("</head>");

  client.println("<head>");
  client.println("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
  client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
  client.println("</style></head>");

  // 网页标题
  client.println("<body><h1>ESP Web Server!</h1>");

  // 显示蓝色LED的按钮
  client.println("<p>1. GPIO 2 is " + output2State + "</p>");
  if (output2State == "off") {
    client.println("<p><a href=\"/2/on\"><button>Turn ON</button></a></p>");
  } else {
    client.println("<p><a href=\"/2/off\"><button>Turn OFF</button></a></p>");
  }

  client.print("<hr>");

  // 显示绿色LED的按钮
  client.println("<p>2. GPIO 0 is " + output0State + "</p>");
  if (output0State == "off") {
    client.println("<p><a href=\"/0/on\"><button>Turn ON</button></a></p>");
  } else {
    client.println("<p><a href=\"/0/off\"><button>Turn OFF</button></a></p>");
  }

  client.println("</body></html>");
  client.println();
}

void updateLED() {
  if (http.indexOf("GET /2/on") >= 0) {
    Serial.println("GPIO 2 LED on");
    output2State = "on";
    digitalWrite(2, HIGH);
  } else if (http.indexOf("GET /2/off") >= 0) {
    Serial.println("GPIO 2 LED off");
    output2State = "off";
    digitalWrite(2, LOW);
  } else if (http.indexOf("GET /0/on") >= 0) {
    Serial.println("GPIO 0 LED on");
    output0State = "on";
    digitalWrite(0, HIGH);
  } else if (http.indexOf("GET /0/off") >= 0) {
    Serial.println("GPIO 0 off");
    output0State = "off";
    digitalWrite(0, LOW);
  }
}

代码解读：

1、包含库：

#include ：包含ESP8266WiFi库，用于WiFi连接。

#include ：包含ESP8266WebServer库，用于创建Web服务器。

2、定义网络凭据：

const char* ssid = "ESP_AP";：定义要广播的SSID。

const char* password = "12345678";：定义WiFi密码，必须至少为8个字符。

3、创建全局变量：

String http;：存储HTTP请求的内容。

String output2State = "off";：存储GPIO 2的状态。

String output0State = "off";：存储GPIO 0的状态。

4、定义服务端和客户端：

WiFiServer server(80);：创建WiFiServer对象，监听80端口。

WiFiClient client;：创建WiFiClient对象。

5、初始化设置（setup函数）：

初始化串口通信，设置波特率为9600。

设置GPIO 2和GPIO 0为输出模式，初始状态为低电平。

创建ESP32接入点。

打印接入点的IP地址。

启动ESP32服务器。

6、主循环（loop函数）：

检查是否有新的客户端连接。

处理客户端请求并解析HTTP数据。

发送HTTP响应和更新网页。

断开客户端连接。

7、发送HTTP响应（sendResponse函数）：

发送HTTP响应头信息。

8、更新网页内容（updateWebpage函数）：

发送整个HTML页面，包括按钮和LED状态。

9、更新LED状态（updateLED函数）：

根据HTTP请求更新LED状态。

在手机端打开WiFi ,输入密码，连接ESP8266_AP

在手机端打开浏览器，输入IP地址：192.168.4.1
使用面板上的两个按钮，即可控制LED的亮灭

控制LED后的实验串口返回情况

实验场景图

【花雕学编程】Arduino动手做（246）---使用 Web 服务器的 ESP8266 LED 控制 简单

【花雕学编程】Arduino动手做（246）---使用 Web 服务器的 ESP8266 LED 控制简单