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

????使用ESP32或ESP8266搭建web服務(wù)器的方式有很多，但是大多數(shù)都的web頁面代碼都是內(nèi)嵌在程序中的，這樣如果要修改web頁面就十分的不方便。今天介紹一種方法將web頁面的代碼以文件的形式上傳到存儲(chǔ)器中，然后在程序中直接利用文件搭建web服務(wù)器。

????這里首先介紹一下SPIFFS。

????SPIFFS又叫SPI閃存文件系統(tǒng)。是一種小型嵌入式系統(tǒng)專用的文件系統(tǒng)。它支持用戶創(chuàng)建文件和目錄。

以下是SPIFFS的主要特點(diǎn)：

????專為微控制器上的低 RAM 使用場景而設(shè)計(jì)；

????使用固定大小的 RAM 緩沖區(qū)；

????Posix-like api：打開，關(guān)閉，讀取，寫入，搜索，統(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開發(fā)時(shí)，開發(fā)套件中集成有SPIFFS可以直接使用。但是開發(fā)工具中不具有文件上傳功能，所以首先需要給ArduinoIDE添加SPIFFS文件上傳插件。

????首先下載文件上傳工具，可以在下面的鏈接處下載，也可以在文末分享的鏈接處下載。

????https://github.com/me-no-dev/arduino-esp32fs-plugin

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

????重啟Arduino IDE后在工具菜單下就可以看到“ESP32 Sketch Data Upload”選項(xiàng)，通過該選項(xiàng)就可以將工程目錄下data文件夾中的文件上傳到ESP32的文件存儲(chǔ)系統(tǒng)中。上傳過程中一定要關(guān)閉ESP32的串口監(jiān)視器窗口，否則會(huì)導(dǎo)致上傳失敗。

????文件上傳工具安裝完成后，接下來需要安裝異步web服務(wù)器庫。主要包括ESPAsyncWebServer和AsyncTCP兩個(gè)庫。通過這兩個(gè)庫可以實(shí)現(xiàn)簡單的異步web服務(wù)器的搭建。

????異步web服務(wù)器有以下優(yōu)點(diǎn)：

????使用異步意味著服務(wù)器可以同時(shí)處理來自客戶端的多個(gè)連接；

????一旦請求準(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)容；

????異步 WebSocket 插件提供不同的位置，無需額外的服務(wù)器或端口；

????Async EventSource (Server-Sent Events) 插件向?yàn)g覽器發(fā)送事件；

????用于條件和永久 URL 重寫的 URL 重寫插件；

????支持緩存、Last-Modified、默認(rèn)索引等的 ServeStatic 插件；

????處理模板的簡單模板處理引擎；

????兩個(gè)庫的下載地址如下：

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

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

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

????使用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即可。

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