前言

ESP32 內置了 Wi-Fi 功能，能夠作為網(wǎng)頁服務器（Web Server）向網(wǎng)絡中的其他設備提供服務。通過在 ESP32 上運行網(wǎng)頁服務器，可以創(chuàng)建基于瀏覽器的用戶界面，用于監(jiān)控傳感器數(shù)據(jù)或控制設備狀態(tài)，是實現(xiàn)物聯(lián)網(wǎng)（IoT）應用的基礎功能之一。

WebServer 庫簡介

Arduino-ESP32 核心庫內置了 WebServer.h，它提供了一套簡潔的 API 來快速構建 Web Server 輕量級的 HTTP 服務器。通過注冊路由（URL 路徑）及回調函數(shù)，實現(xiàn)請求分發(fā)與應答。適用于絕大多數(shù)典型 IOT 項目的本地網(wǎng)頁交互。

選擇建議

使用同步WebServer當：
輕量級，入門和資源受限場景，無需額外安裝；
項目簡單，只有一個用戶；
請求處理非常快速（<100ms）；
不需要同時處理其他重要任務；
內存資源非常有限；

使用異步WebServer當：
對大流量/高并發(fā)等復雜場景，需要高性能，服務多個用戶；
有耗時操作（文件操作、網(wǎng)絡請求）；
需要實時功能（WebSocket）；
需要處理上傳/下載；
系統(tǒng)有其他重要任務需要及時響應；

同步阻塞模型，服務器一次只能處理一個客戶端請求，必須等待當前請求完全處理完成后，才能處理下一個請求。

以下為同步WebServer與異步WebServer對比
在這里插入圖片描述

基礎網(wǎng)頁服務 (STA 模式)

在 STA 模式下創(chuàng)建一個基礎的網(wǎng)頁服務器，用于顯示一個包含"Hello World!"的靜態(tài)頁面。

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

const char *ssid = "Maker";         // 替換為你的 Wi-Fi 名稱
const char *password = "12345678";  // 替換為你的 Wi-Fi 密碼

WebServer server(80);

void setup() {
  Serial.begin(115200);
  delay(10);

  // 連接 WiFi 網(wǎng)絡
  Serial.print("Connecting to ");
  Serial.println(ssid);

  WiFi.begin(ssid, password);

  // 等待連接成功
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println();
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());

  // 配置路由和啟動服務器
  server.on("/", handleRoot);
  server.begin();
}

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

// 處理根路徑請求
void handleRoot() {
  server.send(200, "text/html", generateHTML());
}

// 生成 HTML 頁面內容
String generateHTML() {
  String htmlContent = "< !DOCTYPE html > < html >n";
  htmlContent += "< head >< meta charset="utf-8" name="viewport" content="width=device-width" >n";
  htmlContent += "< title >ESP32S3 Test< /title >n";
  htmlContent += "< /head >n";
  htmlContent += "< h1 >Hello World!< /h1 >n";
  htmlContent += "< p >Hello from ESP32< /p >n";
  htmlContent += "< /body >n";
  htmlContent += "< /html >n";
  return htmlContent;
}

代碼解釋?
#include ：引入 Web Server 庫，用以在 ESP32 上創(chuàng)建 HTTP 服務器。

WebServer server(80);：創(chuàng)建一個服務器對象，監(jiān)聽標準的 HTTP 端口 80。80 是 HTTP 協(xié)議的默認端口。

server.on("/", handleRoot);：注冊路由處理函數(shù)。當客戶端訪問根路徑"/"時，調用 handleRoot() 函數(shù)。

server.begin();：啟動服務器，開始監(jiān)聽客戶端的連接請求。

server.handleClient();：在 loop() 中持續(xù)調用，處理傳入的客戶端請求。

handleRoot()：這是一個自定義的回調函數(shù)，用于處理特定路徑的請求。

server.send(statusCode, contentType, content);：向客戶端發(fā)送一個 HTTP 響應。向客戶端瀏覽器返回包含 "Hello World" 的簡單 HTML 頁面。
200：HTTP 狀態(tài)碼，200 OK 表示請求成功。
"text/html"：MIME 類型，告知瀏覽器響應內容是 HTML 文本。
generateHTML()：函數(shù)返回的字符串，即網(wǎng)頁的實際內容。
generateHTML()：一個輔助函數(shù)，將 HTML 代碼拼接成一個 String 對象，返回包含完整 HTML 結構的字符串。