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 状态。这使我们能够在发生更改时几乎立即更新所有客户端

库安装

服务器代码

代码分解

详情参阅 - 亚图跨际