ESP32-运行网页服务器(Web Server)-实用篇

 

在前一篇文章《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 可获取完整工程；