前言

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

WebServer 庫簡介

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

選擇建議

使用同步WebServer當(dāng)：
輕量級，入門和資源受限場景，無需額外安裝；
項(xiàng)目簡單，只有一個(gè)用戶；
請求處理非?？焖伲?100ms）；
不需要同時(shí)處理其他重要任務(wù)；
內(nèi)存資源非常有限；

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

同步阻塞模型，服務(wù)器一次只能處理一個(gè)客戶端請求，必須等待當(dāng)前請求完全處理完成后，才能處理下一個(gè)請求。

以下為同步WebServer與異步WebServer對比

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

在 STA 模式下創(chuàng)建一個(gè)基礎(chǔ)的網(wǎng)頁服務(wù)器，用于顯示一個(gè)包含"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)絡(luò)
  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());

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

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

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

// 生成 HTML 頁面內(nèi)容
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 服務(wù)器。

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

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

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

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

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

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

運(yùn)行結(jié)果?

將代碼中的 ssid 和 password 修改為目標(biāo) Wi-Fi 網(wǎng)絡(luò)的名稱和密碼后上傳。串口監(jiān)視器將顯示連接過程和獲取到的 IP 地址。在同一局域網(wǎng)的設(shè)備上打開瀏覽器，輸入顯示的 IP 地址，即可看到"Hello World!"頁面。

審核編輯 黃宇