跳到主要内容

Arduino WebServer

介绍​

Arduino WebServer 是一个基于 Arduino 的网络服务器，允许你通过浏览器访问 Arduino 设备并与其交互。通过 WebServer，你可以远程控制设备、读取传感器数据或执行其他任务。这对于物联网（IoT）应用非常有用，因为它使设备能够通过互联网或局域网进行通信。

在本教程中，我们将逐步讲解如何使用 Arduino 创建一个简单的 WebServer，并通过浏览器访问它。

所需硬件和软件​

  • Arduino 开发板（如 Arduino Uno、ESP8266 或 ESP32）
  • 以太网模块（如 W5100 或 W5500，适用于 Arduino Uno）或内置 Wi-Fi 模块（如 ESP8266 或 ESP32）
  • Arduino IDE（已安装并配置好）
  • 网络连接（以太网或 Wi-Fi）

创建 Arduino WebServer​

1. 设置网络连接​

首先，我们需要确保 Arduino 能够连接到网络。根据你使用的硬件，选择以下代码片段之一。

使用以太网模块（如 W5100）​

cpp
#include <SPI.h>
#include <Ethernet.h>

// 设置 MAC 地址和 IP 地址
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 177);

EthernetServer server(80); // 创建服务器，监听端口 80

void setup() {
  Serial.begin(9600);
  Ethernet.begin(mac, ip); // 初始化以太网连接
  server.begin(); // 启动服务器
  Serial.print("Server is at ");
  Serial.println(Ethernet.localIP());
}

void loop() {
  // 处理客户端请求
  EthernetClient client = server.available();
  if (client) {
    Serial.println("New client connected");
    while (client.connected()) {
      if (client.available()) {
        String request = client.readStringUntil('\r');
        Serial.println(request);
        client.println("HTTP/1.1 200 OK");
        client.println("Content-Type: text/html");
        client.println();
        client.println("<h1>Hello from Arduino!</h1>");
        break;
      }
    }
    client.stop();
    Serial.println("Client disconnected");
  }
}

使用 ESP8266 或 ESP32（内置 Wi-Fi）​

cpp
#include <ESP8266WiFi.h> // 对于 ESP8266
// #include <WiFi.h> // 对于 ESP32

const char* ssid = "your_SSID";
const char* password = "your_PASSWORD";

WiFiServer server(80); // 创建服务器，监听端口 80

void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid, password); // 连接到 Wi-Fi
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");
  server.begin(); // 启动服务器
  Serial.print("Server is at ");
  Serial.println(WiFi.localIP());
}

void loop() {
  // 处理客户端请求
  WiFiClient client = server.available();
  if (client) {
    Serial.println("New client connected");
    while (client.connected()) {
      if (client.available()) {
        String request = client.readStringUntil('\r');
        Serial.println(request);
        client.println("HTTP/1.1 200 OK");
        client.println("Content-Type: text/html");
        client.println();
        client.println("<h1>Hello from Arduino!</h1>");
        break;
      }
    }
    client.stop();
    Serial.println("Client disconnected");
  }
}

2. 代码解析​

  • 网络初始化：在 setup() 函数中，我们初始化网络连接并启动服务器。
  • 处理客户端请求：在 loop() 函数中，我们检查是否有客户端连接。如果有，我们读取客户端的请求并发送一个简单的 HTML 响应。

3. 运行代码​

将代码上传到你的 Arduino 开发板，并打开串口监视器。你应该会看到服务器的 IP 地址。在浏览器中输入该 IP 地址，你将看到 "Hello from Arduino!" 的消息。

实际应用案例​

控制 LED​

假设我们想通过 WebServer 控制 Arduino 上的 LED。我们可以修改代码以响应不同的请求并控制 LED 的状态。

cpp
#include <ESP8266WiFi.h> // 对于 ESP8266
// #include <WiFi.h> // 对于 ESP32

const char* ssid = "your_SSID";
const char* password = "your_PASSWORD";

WiFiServer server(80); // 创建服务器，监听端口 80

const int ledPin = 2; // LED 连接到 GPIO 2

void setup() {
  Serial.begin(115200);
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW);
  WiFi.begin(ssid, password); // 连接到 Wi-Fi
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");
  server.begin(); // 启动服务器
  Serial.print("Server is at ");
  Serial.println(WiFi.localIP());
}

void loop() {
  // 处理客户端请求
  WiFiClient client = server.available();
  if (client) {
    Serial.println("New client connected");
    String request = client.readStringUntil('\r');
    Serial.println(request);
    client.println("HTTP/1.1 200 OK");
    client.println("Content-Type: text/html");
    client.println();
    if (request.indexOf("GET /LED=ON") >= 0) {
      digitalWrite(ledPin, HIGH);
      client.println("<h1>LED is ON</h1>");
    } else if (request.indexOf("GET /LED=OFF") >= 0) {
      digitalWrite(ledPin, LOW);
      client.println("<h1>LED is OFF</h1>");
    } else {
      client.println("<h1>Hello from Arduino!</h1>");
    }
    client.stop();
    Serial.println("Client disconnected");
  }
}

在这个例子中，当你在浏览器中输入 http://<IP地址>/LED=ON 时，LED 将打开；输入 http://<IP地址>/LED=OFF 时，LED 将关闭。

总结​

通过本教程，你学会了如何使用 Arduino 创建一个简单的 WebServer，并通过浏览器与其交互。我们还展示了如何通过 WebServer 控制 LED，这只是一个简单的例子，你可以扩展这个项目以控制更多的设备或读取传感器数据。

附加资源​

练习​

  1. 修改代码以控制多个 LED。
  2. 添加一个传感器（如温度传感器），并通过 WebServer 显示传感器数据。
  3. 创建一个更复杂的网页界面，使用按钮和滑块来控制设备。

祝你学习愉快！