ESP32 網絡伺服器控制輸出

在本教程中，您将學習如何使用 WebSocket 通信協定使用 ESP32 建構 Web 伺服器。 例如，我們将向您展示如何建構一個網頁來遠端控制 ESP32 輸出。 輸出狀态顯示在網頁上，并在所有用戶端中自動更新。

對于一些 Web 伺服器項目，您可能已經注意到，如果您同時打開了多個頁籤（在相同或不同的裝置上），則狀态不會全部更新，除非您重新整理網頁，否則會自動打開标簽。 為了解決這個問題，我們可以使用 WebSocket 協定 —— 當發生變化時，可以通知所有用戶端并相應地更新網頁。

協定介紹

WebSocket 是用戶端和伺服器之間的持久連接配接，允許雙方使用 TCP 連接配接進行雙向通信。 這意味着您可以在任何給定時間從用戶端向伺服器發送資料，也可以從伺服器向用戶端發送資料。

用戶端通過稱為 WebSocket 握手的過程與伺服器建立 WebSocket 連接配接。 握手以 HTTP 請求/響應開始，允許伺服器在同一端口上處理 HTTP 連接配接以及 WebSocket 連接配接。 一旦建立連接配接，用戶端和伺服器就可以全雙工模式發送 WebSocket 資料。

使用 WebSockets 協定，伺服器（ESP32 闆）可以向用戶端或所有用戶端發送資訊而無需請求。這還允許我們在發生更改時，将資訊發送到 Web 浏覽器。

這種變化可能發生在網頁上（你點選了一個按鈕），也可能發生在 ESP32 端，比如按下電路上的實體按鈕。

伺服器網頁

以下是我們将為此項目建構的網頁。

• ESP32 網絡伺服器顯示一個帶有按鈕的網頁，用于切換 GPIO 2 的狀态
• 為簡單起見，我們控制 GPIO 2 – 闆載 LED。您可以使用此示例來控制任何其他 GPIO
• 該界面顯示目前 GPIO 狀态。每當 GPIO 狀态發生變化時，接口都會立即更新
• GPIO 狀态會在所有用戶端中自動更新。這意味着如果您在同一裝置或不同裝置上打開了多個 Web 浏覽器頁籤，它們将同時更新

工作原理

下圖描述了單擊“切換”按鈕時發生的情況。

當您單擊“切換”按鈕時，會發生以下情況：

1. 點選“切換”按鈕
2. 用戶端（您的浏覽器）通過帶有“toggle”消息的 WebSocket 協定發送資料
3. ESP32（伺服器）收到此消息，是以知道它應該切換 LED 狀态。如果 LED 之前關閉，請将其打開
4. 然後，它也通過 WebSocket 協定将帶有新 LED 狀态的資料發送給所有用戶端
5. 用戶端接收消息并相應地更新網頁上的 LED 狀态。這使我們能夠在發生更改時幾乎立即更新所有用戶端

庫安裝

伺服器代碼

代碼分解

詳情參閱http://viadean.com/esp32_webserver_control.html