在前一篇文章《ESP32-運行網(wǎng)頁服務(wù)器(Web Server)-入門篇》，我們介紹了ESP32運行網(wǎng)頁服務(wù)器(Web Server)的原理，然后我們基于ESP32實現(xiàn)了一個demo代碼；

看到很多同學都留言發(fā)表了自己的看法，有很多同學都基于這個原理實現(xiàn)了很多有意思的應(yīng)用；

這里我用到的硬件是我用ESP32C3自己做的一個小板子如下圖(板子的介紹可以看我之前的文章:一種讓你的MCU日志可無線查看和實時記錄跟蹤的方法)

接下來這篇文章我也分享幾個實用的功能：

通過網(wǎng)頁進行Wi-Fi配網(wǎng)；

通過網(wǎng)頁在線修改串口配置；

通過網(wǎng)頁實時收發(fā)查看串口數(shù)據(jù)；

直接先看效果圖感受下哈!

網(wǎng)頁配網(wǎng)網(wǎng)頁串口配置&查看數(shù)據(jù)

溫馨提醒:公眾號后臺私信ESP32 Web Server 2可獲取完整工程；

那么接下來簡單講一下這三個應(yīng)用的優(yōu)點以及原理和邏輯

1、 Web網(wǎng)頁配網(wǎng)

Web網(wǎng)頁配網(wǎng)

優(yōu)點

1. 跨平臺：web配網(wǎng)基于網(wǎng)頁，不管是手機(android)，平板，電腦，只要能打開網(wǎng)頁的地方就可以用，而且體驗基本一致；
2. 可靠：因為web配網(wǎng)是通過web直連接到設(shè)備上所以可靠，穩(wěn)定，成功率高；

原理

既然是web配網(wǎng)，那么必定涉及到前后端的邏輯；

• 前端負責展示界面以及用戶交互；
• 后端負責產(chǎn)生數(shù)據(jù)發(fā)送到前端和接收前端用戶輸入的數(shù)據(jù)，比如Wi-Fi名稱和Wi-Fi密碼,這里的后端由ESP32上的代碼來實現(xiàn)
• 然后針對配網(wǎng)這個應(yīng)用，后端負責掃描設(shè)備周邊熱點，然后把掃描到的熱點列表發(fā)送到web客戶端展示；
• 用戶選擇對應(yīng)的熱點后輸入密碼，即可完成配網(wǎng)的核心交互

邏輯

邏輯就比較簡單了，簡單描述如下

就是ESP32啟動一個http服務(wù)，然后監(jiān)聽配網(wǎng)對應(yīng)的URI請求；

監(jiān)聽到配網(wǎng)的URI請求之后把前端配網(wǎng)界面發(fā)送給客戶；

前端也就是瀏覽器(用戶)選擇好WiFi名稱和密碼之后，點擊發(fā)送就會把數(shù)據(jù)封裝之后發(fā)給esp32;

esp32解析接收到的數(shù)據(jù)之后提取出WiFi的SSID和PWD之后保存起來然后后續(xù)用這個去聯(lián)網(wǎng);(在這個例子中我只是提取出WiFi信息沒有實際去連接，各位可以按自己的邏輯來處理)

2、在線配置串口&實時查看串口數(shù)據(jù)原理和邏輯

web網(wǎng)頁版串口

串口是 ESP32 與外部設(shè)備（如傳感器、PLC、藍牙模塊等）通信的重要接口，通過 Web 網(wǎng)頁實現(xiàn)串口配置與數(shù)據(jù)交互，能極大簡化調(diào)試與使用流程。

在這里著重說一下串口數(shù)據(jù)我用了WebSocket來做實時數(shù)據(jù)收發(fā),因為普通的HTTP的基于一來一回的設(shè)計邏輯，對于實時性要求高的場合并不合適；

優(yōu)點

無需物理接線：無需通過 USB 線連接電腦，也無需安裝專用調(diào)試軟件（如串口助手），僅通過網(wǎng)頁即可完成配置與數(shù)據(jù)查看，適合設(shè)備已安裝在封閉環(huán)境（如控制柜內(nèi)）的場景;

跨平臺：web配網(wǎng)基于網(wǎng)頁，不管是手機(android)，平板，電腦，只要能打開網(wǎng)頁的地方就可以查看串口數(shù)據(jù)；

實時性強：采用WebSocket技術(shù)實現(xiàn)數(shù)據(jù)雙向?qū)崟r傳輸，串口接收的數(shù)據(jù)能瞬間在網(wǎng)頁顯示，用戶輸入的指令也能立即通過串口發(fā)送，調(diào)試效率高。

原理

在線配置串口與實時數(shù)據(jù)交互的核心原理基于 “前端交互 - 后端處理 - 硬件映射” 的三層架構(gòu)：

串口參數(shù)配置：前端通過表單組件（下拉框、單選框）提供串口參數(shù)選項（波特率：9600/115200 等；數(shù)據(jù)位：7/8 位；停止位：1/2 位；校驗位：無 / 奇 / 偶校驗），用戶選擇后，前端將參數(shù)通過 HTTP POST 請求發(fā)送到 ESP32 后端。ESP32 接收到參數(shù)后，調(diào)用串口驅(qū)動庫的接口，動態(tài)修改串口配置（如Serial.begin(baudrate, config)），同時將參數(shù)保存到 NVS，確保下次上電后生效。

實時數(shù)據(jù)交互：采用 WebSocket 協(xié)議實現(xiàn)雙向?qū)崟r通信（HTTP 協(xié)議為 “請求 - 響應(yīng)” 模式，不適合實時數(shù)據(jù)；WebSocket 為長連接，支持服務(wù)器主動推送數(shù)據(jù)）。ESP32 的 Web Server 開啟 WebSocket 服務(wù)，前端網(wǎng)頁點擊連接之后加載后與后端建立 WebSocket 連接。當 ESP32 的串口接收到外部設(shè)備數(shù)據(jù)時，會立即通過 WebSocket 連接推送到前端，網(wǎng)頁實時刷新顯示；用戶在網(wǎng)頁輸入框中輸入指令（如 AT 指令），點擊 “發(fā)送” 后，前端將指令通過 WebSocket 發(fā)送到 ESP32，后端解析后通過串口發(fā)送給外部設(shè)備。

邏輯

• 串口配置的獲取和設(shè)置就比較簡單，和上一個例子WiFi配置差不多；
• 設(shè)置的時候就是把前端的數(shù)據(jù)發(fā)送給esp32之后保存的nvs中；
• 獲取的時候相反把nvs中保存的串口配置數(shù)據(jù)發(fā)送到前端；
• 串口實時主要就是啟動ESP32的websocket功能大致邏輯；

啟動webserver;

啟動串口

設(shè)置監(jiān)聽連接的URI，如果用戶點擊了連接則客戶端發(fā)起ws連接到esp32;

把串口監(jiān)聽到的數(shù)據(jù)通過ws通道發(fā)送到前端

把ws通道監(jiān)聽到的數(shù)據(jù)轉(zhuǎn)發(fā)給串口；

總結(jié)

以上三個功能（Web 配網(wǎng)、串口配置、數(shù)據(jù)交互）基于 ESP32 Web Server 實現(xiàn)，核心是通過 “前端界面 - 后端邏輯 - 硬件控制” 的聯(lián)動，將傳統(tǒng)需要通過專用工具完成的操作，遷移到跨平臺的網(wǎng)頁上，大幅降低了 ESP32 設(shè)備的使用與調(diào)試門檻。

通過在ESP32上運行網(wǎng)頁服務(wù)器(Web Server)，我們可以做很多有意思的功能，而我這里提供的代碼只是參考作用，其中還有還有很多細節(jié)需要優(yōu)化和考慮，純粹拋磚引玉。

期待各位高手show出你們更多有意思的應(yīng)用；

溫馨提醒:公眾號后臺私信ESP32 Web Server 2可獲取完整工程；