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

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

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

使用Arduino進(jìn)行ESP32開(kāi)發(fā)時(shí)，開(kāi)發(fā)套件中集成有SPIFFS可以直接使用。但是開(kāi)發(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”選項(xiàng)，通過(guò)該選項(xiàng)就可以將工程目錄下data文件夾中的文件上傳到ESP32的文件存儲(chǔ)系統(tǒng)中。上傳過(guò)程中一定要關(guān)閉ESP32的串口監(jiān)視器窗口，否則會(huì)導(dǎo)致上傳失敗。

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

ESPAsyncWebServer

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

AsyncTCP

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

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

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

使用Arduino IDE創(chuàng)建ESP32工程。在工程下創(chuàng)建data文件夾，并將創(chuàng)建的HTML程序文件放到data文件夾內(nèi)。然后依次點(diǎn)擊”工具”->”ESP32 Sketch Data Upload”將WEB程序文件上傳到ESP32存儲(chǔ)器中。

修改程序中的WIFI信息，點(diǎn)擊上傳到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() {


}

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

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

審核編輯：湯梓紅