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

看到很多同學都留言發表了自己的看法，有很多同學都基于這個原理實現了很多有意思的應用；

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

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

通過網頁進行Wi-Fi配網；

通過網頁在線修改串口配置；

通過網頁實時收發查看串口數據；

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

網頁配網網頁串口配置&查看數據

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

那么接下來簡單講一下這三個應用的優點以及原理和邏輯

1、 Web網頁配網

Web網頁配網

優點

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

原理

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

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

邏輯

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

就是ESP32啟動一個http服務，然后監聽配網對應的URI請求；

監聽到配網的URI請求之后把前端配網界面發送給客戶；

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

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

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

web網頁版串口

串口是 ESP32 與外部設備（如傳感器、PLC、藍牙模塊等）通信的重要接口，通過 Web 網頁實現串口配置與數據交互，能極大簡化調試與使用流程。

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

優點

無需物理接線：無需通過 USB 線連接電腦，也無需安裝專用調試軟件（如串口助手），僅通過網頁即可完成配置與數據查看，適合設備已安裝在封閉環境（如控制柜內）的場景;

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

實時性強：采用WebSocket技術實現數據雙向實時傳輸，串口接收的數據能瞬間在網頁顯示，用戶輸入的指令也能立即通過串口發送，調試效率高。

原理

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

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

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

邏輯

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

啟動webserver;

啟動串口

設置監聽連接的URI，如果用戶點擊了連接則客戶端發起ws連接到esp32;

把串口監聽到的數據通過ws通道發送到前端

把ws通道監聽到的數據轉發給串口；

總結

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

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

期待各位高手show出你們更多有意思的應用；

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