使用ESP8266搭建Web服务器的详细教程

2025-06发布4次浏览

ESP8266是一款功能强大的微控制器,支持Wi-Fi连接,并且可以轻松地用于搭建Web服务器。通过ESP8266,你可以创建一个能够接收和响应HTTP请求的设备,从而实现对硬件的远程控制或数据展示。以下是使用ESP8266搭建Web服务器的详细教程。

硬件准备

  • ESP8266开发板(如NodeMCU)
  • USB数据线
  • 电脑

软件准备

  • Arduino IDE(需要安装ESP8266开发板支持)

第一步:配置Arduino IDE以支持ESP8266

  1. 打开Arduino IDE。
  2. 进入 文件 > 首选项,在“附加开发板管理器网址”中添加以下URL:
    http://arduino.esp8266.com/stable/package_esp8266com_index.json
    
  3. 打开 工具 > 开发板 > 开发板管理器,搜索“esp8266”,然后安装。

第二步:编写代码

下面是一个简单的Web服务器示例代码,它将返回一个包含HTML页面的响应。

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

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

ESP8266WebServer server(80);

void handleRoot() {
  String html = "<html><body>";
  html += "<h1>欢迎来到我的ESP8266 Web服务器</h1>";
  html += "</body></html>";
  server.send(200, "text/html", html);
}

void setup(void) {
  Serial.begin(115200);
  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("WiFi已连接");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);

  server.begin();
  Serial.println("HTTP服务器已启动");
}

void loop(void) {
  server.handleClient();
}

第三步:上传代码到ESP8266

  1. 将NodeMCU通过USB数据线连接到电脑。
  2. 在Arduino IDE中选择正确的开发板型号和端口。
  3. 点击上传按钮,将代码上传到ESP8266。

第四步:测试Web服务器

  1. 打开串口监视器,查看ESP8266分配的IP地址。
  2. 在浏览器中输入该IP地址,你应该能看到网页显示“欢迎来到我的ESP8266 Web服务器”。

扩展功能

你可以扩展这个基本的Web服务器,添加更多功能,比如:

  • 控制GPIO引脚的状态。
  • 显示传感器的数据。
  • 接收用户输入并执行相应的操作。

GPIO控制示例

如果想通过Web界面控制LED灯(假设LED连接到D4引脚),可以修改代码如下:

void handleLEDOn() {
  digitalWrite(2, HIGH); // D4引脚为HIGH
  server.send(200, "text/plain", "LED已开启");
}

void handleLEDOff() {
  digitalWrite(2, LOW); // D4引脚为LOW
  server.send(200, "text/plain", "LED已关闭");
}

void setup(void) {
  pinMode(2, OUTPUT);
  server.on("/ledon", handleLEDOn);
  server.on("/ledoff", handleLEDOff);
}

流程图

sequenceDiagram
    participant User
    participant Browser
    participant ESP8266
    User->>Browser: 输入IP地址
    Browser->>ESP8266: 发送HTTP请求
    ESP8266-->>Browser: 返回HTML页面
    Browser-->>User: 显示网页内容