本文介紹一下如何使用ESP32快速方便的搭建一個簡易的web服務器。

使用ESP32或ESP8266搭建web服務器的方式有很多，但是大多數都的web頁面代碼都是內嵌在程序中的，這樣如果要修改web頁面就十分的不方便。今天介紹一種方法將web頁面的代碼以文件的形式上傳到存儲器中，然后在程序中直接利用文件搭建web服務器。 這里首先介紹一下SPIFFS。SPIFFS又叫SPI閃存文件系統。是一種小型嵌入式系統專用的文件系統。它支持用戶創建文件和目錄。

SPIFFS的主要特點： 專為微控制器上的低 RAM 使用場景而設計； 使用固定大小的 RAM 緩沖區； Posix-like api：打開，關閉，讀取，寫入，搜索，統計等； POSIX：Portable Operating System Interface 可移植操作系統接口； 不僅僅是SPI閃存 (SPI Flash:Serial Peripheral interface 串行外圍設備接口, 串行通信接口的NOR FLASH),它可以在任何 非易失閃存（NOR Flash）上運行，多個 SPIFFS 配置可以在同一目標上運行甚至可以在同一個 SPI 閃存設備上運行； 實現靜態磨損均衡； 內置的系統一致性檢查； 高度可配置，可適用于各種閃存類型。

使用Arduino進行ESP32開發時，開發套件中集成有SPIFFS可以直接使用。但是開發工具中不具有文件上傳功能，所以首先需要給ArduinoIDE添加SPIFFS文件上傳插件。 首先下載文件上傳工具，可以在下面的鏈接處下載，也可以在文末分享的鏈接處下載。 GitHub - me-no-dev/arduino-esp32fs-plugin: Arduino plugin for uploading files to ESP32 file system

將所下載的文件“esp32fs.jar”放置到Arduino安裝目錄下的工具文件夾中。如F:arduino-1.8.19 oolsESP32FS ool。然后重啟Arduino IDE。

重啟Arduino IDE后在工具菜單下就可以看到“ESP32 Sketch Data Upload”選項，通過該選項就可以將工程目錄下data文件夾中的文件上傳到ESP32的文件存儲系統中。上傳過程中一定要關閉ESP32的串口監視器窗口，否則會導致上傳失敗。

文件上傳工具安裝完成后，接下來需要安裝異步web服務器庫。主要包括ESPAsyncWebServer和AsyncTCP兩個庫。通過這兩個庫可以實現簡單的異步web服務器的搭建。 異步web服務器有以下優點： 使用異步意味著服務器可以同時處理來自客戶端的多個連接； 一旦請求準備好并被解析，您就會被調用； 當您發送響應時，您可以立即準備好處理其他連接，而服務器會在后臺處理發送響應 速度很快； 易于使用的 API、HTTP Basic 和 Digest MD5 身份驗證（默認）、ChunkedResponse； 易于擴展以處理任何類型的內容； 支持繼續 100； 異步 WebSocket 插件提供不同的位置，無需額外的服務器或端口； Async EventSource (Server-Sent Events) 插件向瀏覽器發送事件； 用于條件和永久 URL 重寫的 URL 重寫插件； 支持緩存、Last-Modified、默認索引等的 ServeStatic 插件； 處理模板的簡單模板處理引擎； 兩個庫的下載地址如下：

ESPAsyncWebServer

https://github.com/me-no-dev/ESPAsyncWebServer

AsyncTCP

https://github.com/me-no-dev/AsyncTCP

兩個庫安裝完成后就可以開始創建web頁面了。web前端頁面的開發工具有很多，自行選擇一種喜歡的方式就可以了。編寫一個簡單的web頁面。

  
    
    
    
  
  
    
懂事電子設計
    
這是一個測試網頁
  
  

使用Arduino IDE創建ESP32工程。在工程下創建data文件夾，并將創建的HTML程序文件放到data文件夾內。然后依次點擊”工具”->”ESP32 Sketch Data Upload”將WEB程序文件上傳到ESP32存儲器中。

修改程序中的WIFI信息，點擊上傳到ESP32即可。

#include 
#include 
#include "ESPAsyncWebServer.h"
AsyncWebServer server(80);
//連接WIFI
void connect_wifi(){
  const char* wifi_ssid = "***";
  const char* wifi_password = "********";
  Serial.begin(115200);
  WiFi.begin(wifi_ssid, wifi_password);         //連接WIFI
  Serial.print("Connected");
  //循環，直到連接成功
  while(WiFi.status() != WL_CONNECTED){
    Serial.print(".");
    delay(500);
  }
  Serial.println();
  IPAddress local_IP = WiFi.localIP();
  Serial.print("WIFI is connected,The local IP address is "); //連接成功提示
  Serial.println(local_IP); 
}


void web_server(){
 if(!SPIFFS.begin(true)){
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }
  server.serveStatic("/", SPIFFS, "/").setDefaultFile("index.html");
  server.begin();                       //初始化
}


void setup() {
  connect_wifi();
  web_server();
}
 
void loop() {


}

上傳完成后可以打開串口監視窗口，等ESP32完成網絡連接后會輸出對應的IP地址。使用同一網絡下的PC或手機的瀏覽器訪問該IP即可進入到web頁面。

需要對web頁面進行修改時，只需將對應的.html程序文件修改后重新上傳即可，可以最大程度的簡化復雜度。

審核編輯：湯梓紅