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

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

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

使用Arduino進行ESP32開發(fā)時，開發(fā)套件中集成有SPIFFS可以直接使用。但是開發(fā)工具中不具有文件上傳功能，所以首先需要給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的文件存儲系統(tǒng)中。上傳過程中一定要關(guān)閉ESP32的串口監(jiān)視器窗口，否則會導(dǎo)致上傳失敗。

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

ESPAsyncWebServer

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

AsyncTCP

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

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

  
    
    
    
  
  
    
懂事電子設(shè)計
    
這是一個測試網(wǎng)頁
  
  

使用Arduino IDE創(chuàng)建ESP32工程。在工程下創(chuàng)建data文件夾，并將創(chuàng)建的HTML程序文件放到data文件夾內(nèi)。然后依次點擊”工具”->”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");
  //循環(huán)，直到連接成功
  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() {


}

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

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

審核編輯：湯梓紅