如何在 Arduino IDE 中使用 WebSockets 创建 ESP32 Web 服务器
文章目录
- 什么是 WebSocket？
- 基于 WedSocket 的小项目概述
- 项目实现
- 安装 WebSocket 库与其他依赖库
- 代码分析说明
- 库和定义常量
- HTML 页面模板
- WebSocket 消息处理函数
- WebSocket 事件处理器
- 变量替换处理器
- 初始化设置
- 主循环
- 效果演示
- 代码链接
假设我们需要创建一个使用 ESP32 通过 WiFi 控制 LED 的项目。实现非常简单：将 ESP32 设置为软 AP 或 STA 模式，允许它提供一个网页，将 LED 开关的状态显示为“开”或“关”。当用户在浏览器中切换 LED 开关时，ESP32 将收到一个 HTTP 请求。作为响应，它将相应地调整 LED 的状态，并将响应发送回浏览器。这正是我之前完成的小项目《基于 Arduino IDE 搭建一个轻量的 ESP32 Web 服务器》所实现的功能。
但是，此小项目存在一个问题。Web 是一个多用户系统，其他的设备也可以同时连接到同一个 Web 服务器。换句话说，服务器是一种共享资源。如果两个用户尝试同时打开或关闭 LED，这两个浏览器界面并不同步，且不会准确显示 LED 的实际状态。因此，它不是此类系统的合适解决方案。
当然，这个小问题我们可以用 WebSocket 通信协议的双向功能来构建一个响应式系统，其中单击 LED 开关会立即中继到服务器并广播到所有连接的浏览器，以便所有用户的 LED 开关状态始终同步。
本篇博客正是描述了如何使用 WebSocket 通信协议在 ESP32 搭建 Web 服务器。
什么是 WebSocket？
WebSocket 是一种通信协议的名称，它支持客户端和 Web 服务器之间的双向（更准确地说是全双工）通信。简单地说，WebSocket 是一种允许客户端和服务器建立连接的技术，通过该连接，任何一方都可以随时向另一方发送消息。
这与常规 HTTP 连接不同，在常规 HTTP 连接中，客户端发起请求，服务器发送响应，然后连接终止。事实上，WebSocket 是一种完全不同的通信协议，当客户端与服务器建立连接时，连接的两端都可以发送和接收数据。因此，就像服务器正在侦听新消息一样，所有连接的客户端也在积极侦听。因此，服务器可以将数据发送到特定客户端或将其广播到所有客户端，而无需请求。最重要的是，连接将保持活动状态，直到客户端或服务器关闭它，从而允许它们之间进行持续通信。
[!NOTE]
本文的重点在于如何搭建 WedSocket 的 Web 服务器，而不是在科普 WedSocket，所以关于 WedSocket 的解释不会深入。如果想要比较生动形象的了解 WedSocket 相关知识，我在 B 站找到了一个相对不错的视频，大家可以移步去看一下。
视频链接：websocket是什么？和HTTP是什么区别？长轮询是什么？服务器推是什么？_哔哩哔哩_bilibili
基于 WedSocket 的小项目概述
接下来，我将使用 ESP32 构建一个 WebSocket 服务器，通过 websocket 连接远程控制 ESP32 的板载 LED。
我会设计一个网页，其中包含一个拨动开关，允许用户更改 ESP32 的 GPIO 2 引脚的状态（这个 GPIO 引脚对应的就是板载的 LED 的引脚），Web 界面还将显示 LED 的当前状态。
ESP32 将在网络端口 80 上主动侦听传入的 WebSocket 连接和消息。当用户在网页上切换 LED 开关时，将向 ESP32 发送 “toggle” 消息。当 ESP32 收到此消息时，它将切换 LED 的状态，并通过发送 “1”（表示 LED 亮起）或 “0”（表示 LED 熄灭）来通知所有连接的客户端（浏览器）。因此，所有活动客户端将立即在其网页上更新 LED 的状态。
该小项目的大致工作原理，如下图：
项目实现
安装 WebSocket 库与其他依赖库
想要在 ESP32 搭建 WebSocket 服务器，就要使用到 ESPAsyncWebServer 库，该库依赖于 AsyncTCP 库。Arduino IDE 2 现已上架这些库，可以直接在 “Library Manager” 中直接搜索并安装。
还有 AsyncTCP 库也一并安装上。
[!IMPORTANT]
如果你使用的 Arduino IDE 1.8 或更低的版本，可以在库管理中找不到这些库。我个人更倾向于不再使用低版本的 IDE，而是使用最新版本的 IDE。
如果你觉得卸载 IDE 再重新下载新的 IDE 并安装比较麻烦，那你只能下载这些库，再手动导入 IDE 了。
下载链接：
ESPAsyncWebServer库：https://github.com/me-no-dev/ESPAsyncWebServer/archive/master.zipAsyncTCP库：https://github.com/me-no-dev/AsyncTCP/archive/master.zip下载后，在 Arduino IDE 中，按 Sketch -> Include Library -> Add .ZIP Library 的顺序，然后选择刚刚下载的库导入。由于我没有安装低版本的 Arduino IDE，所以我用 Arduino IDE 2.3 的版本截一个图参考一下：
代码分析说明
本示例代码实现了一个基于 ESP32 的 WebSocket 服务器，通过 Web 浏览器控制板载 LED，并实时将 LED 的状态通知其他接入 WebSocket 服务器的设备。该项目利用了非阻塞的异步通信模型，确保了高效的资源管理和响应速度。
完整的代码已经推送至我的代码仓库，链接在文章结尾，需要的小伙伴可以自取（不会 git 命令的小伙伴，也可以在找我的小助理要代码）。以下是对代码的分段解析：
库和定义常量
#include - 包含库：导入了用于 WiFi 连接、异步 TCP 通信以及异步 Web 服务器的库。
- 常量定义：设定了 WiFi 的 SSID 和密码，以及初始化 LED 状态和引脚。
- 对象实例化：创建了
AsyncWebServer和AsyncWebSocket对象，分别用于 HTTP 服务和 WebSocket 通信。
HTML 页面模板
const char index_html[] PROGMEM = R"rawliteral(
ESP32 WebSocket Server
ESP32 WebSocket Server
On-board LED: %STATE%
)rawliteral";
- HTML 页面：定义了一个静态 HTML 页面，包含了样式表和 JavaScript 代码，用于显示一个开关按钮来控制 LED，并且通过 WebSocket 与 ESP32 进行通信。整个代码将在客户端执行。
PROGMEM：使用PROGMEM宏，将内容存储在 ESP32 的程序内存（flash memory）而不是 SRAM 中，以优化内存。
WebSocket 消息处理函数
void handle_websocket_message(void *arg, uint8_t *data, size_t len)
{
AwsFrameInfo *info = (AwsFrameInfo*)arg;
if (info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT) {
data[len] = 0;
if (strcmp((char*)data, "toggle") == 0) {
led_state = !led_state;
ws.textAll(String(led_state));
}
}
}
- 消息处理：当收到 “toggle” 消息时，切换 LED 状态，并向所有连接的客户端发送新的 LED 状态。
WebSocket 事件处理器
void event_handler(AsyncWebSocket *server, AsyncWebSocketClient *client,
AwsEventType type, void *arg, uint8_t *data, size_t len)
{
switch (type) {
case WS_EVT_CONNECT:
Serial.printf("WebSocket client #%u connected from %s
", client->id(), client->remoteIP().toString().c_str());
break;
case WS_EVT_DISCONNECT:
Serial.printf("WebSocket client #%u disconnected
", client->id());
break;
case WS_EVT_DATA:
handle_websocket_message(arg, data, len);
digitalWrite(led_pin, led_state);
break;
case WS_EVT_PONG:
case WS_EVT_ERROR:
break;
}
}
- 事件处理：根据不同的 WebSocket 事件类型（如连接、断开、数据接收等）执行相应操作。具体如下：
WS_EVT_CONNECT：当新客户端连接到 WebSocket 服务器时WS_EVT_DISCONNECT：当客户端与 WebSocket 服务器断开连接时WS_EVT_DATA：当 WebSocket 服务器从客户端接收数据时WS_EVT_PONG：当 WebSocket 收到 ping 请求时WS_EVT_ERROR：当客户端报告错误时
变量替换处理器
String processor(const String& var)
{
if(var == "STATE")
return led_state ? "ON" : "OFF";
if(var == "CHECK")
return led_state ? "checked" : "";
return String();
}
- 变量替换：此函数用于在发送 HTML 页面之前，用实际的 LED 状态值替换 HTML 中的占位符（如
%STATE%和%CHECK%）。
初始化设置
void setup()
{
Serial.begin(115200);
pinMode(led_pin, OUTPUT);
digitalWrite(led_pin, LOW);
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("Connected..!");
Serial.print("Got IP: "); Serial.println(WiFi.localIP());
ws.onEvent(event_handler);
server.addHandler(&ws);
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});
// Start server
server.begin();
}
- 串口配置：开始串口通信，波特率为 115200bps。
- GPIO 配置：设置 LED 引脚为输出模式，并将其初始状态设为低电平。
- WiFi 连接：尝试连接到指定的 WiFi 网络，并等待直到连接成功。
- WebSocket 和服务器配置：注册 WebSocket 事件处理器，添加 WebSocket 处理器到服务器，并为根路径设定 HTTP GET 请求处理器。
- 启动服务器：启动异步 Web 服务器。
主循环
void loop()
{
ws.cleanupClients();
}
- 清理客户端：定期检查并清除不再活跃的 WebSocket 客户端连接，保持服务器健康运行。
效果演示
把代码下载到程序后，可以在串口监视器中看到信息输出（如果没有输出，可以按一下复位按钮），ESP32 如果连接 WiFi 成功，路由器会分配一个 IP，其实就是用了 STA 模式入网。
在浏览器输入 ESP32 的 IP 地址并回车，就可以看到对应的 Web 界面了。
具体的演示效果如下：
代码链接
GitHub：Simple_ESP32_Web_Server/ESP32_WebSocket at main · zhengxinyu13/Simple_ESP32_Web_Server
Gitee：ESP32_WebSocket · Grayson_Zheng/Simple_ESP32_Web_Server
GitCode：Simple_ESP32_Web_Server - GitCode
不会使用 git 命令克隆代码的小伙伴，可以在我主页找到我助理的地球号，或者直接看下面，找我的助理领取。
