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

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

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

接下來這篇文章我也分享幾個(gè)實(shí)用的功能：

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

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

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

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

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

溫馨提醒:公眾號(hào)后臺(tái)私信ESP32 Web Server 2可獲取完整工程；

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

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

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

優(yōu)點(diǎn)

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

原理

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

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

邏輯

邏輯就比較簡(jiǎn)單了，簡(jiǎn)單描述如下

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

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

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

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

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

web網(wǎng)頁版串口

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

在這里著重說一下串口數(shù)據(jù)我用了WebSocket來做實(shí)時(shí)數(shù)據(jù)收發(fā),因?yàn)槠胀ǖ腍TTP的基于一來一回的設(shè)計(jì)邏輯，對(duì)于實(shí)時(shí)性要求高的場(chǎng)合并不合適；

優(yōu)點(diǎn)

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

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

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

原理

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

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

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

邏輯

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

啟動(dòng)webserver;

啟動(dòng)串口

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

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

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

總結(jié)

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

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

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

溫馨提醒:公眾號(hào)后臺(tái)私信ESP32 Web Server 2可獲取完整工程；