ESP32-Web-Server 实战编程-通过网页控制设备多个 GPIO

概述

上节 ESP32-Web-Server 实战编程-通过网页控制设备的 GPIO 讲述了如何通过网页控制一个 GPIO。本节实现在网页上控制多个 GPIO。

示例解析

前端设计

前端代码建立了四个 GPIO，如下死 GPIO 2 在前端的定义，注意不同的 GPIO，其对应的 id 不同。前端的每个 GPIO，在状态发生改变时，将触发 toggleCheckbox() 函数。

复制代码

 <div class="card">             
  <p class="card-title"><i class="fas fa-lightbulb"></i> GPIO 2</p>
  <label class="switch">
    <input type="checkbox" onchange="toggleCheckbox(this)" id="2">
    <span class="slider"></span>
  </label>
  <p class="state">State: <span id="2s"></span></p>
</div>

此外，前端代码还定义了两个 JS 函数：getStates() 和 toggleCheckbox（）

复制代码

window.addEventListener('load', getStates);
// Function to get and update GPIO states on the webpage when it loads for the first time
  function getStates(){}
// Send Requests to Control GPIOs
  function toggleCheckbox (element) {}

getStates() 将在重新加载网页时查询当前所有 GPIO 的状态，并更新到网页上。

toggleCheckbox() 将在网页端的对应 GPIO 状态改变时触发检测 GPIO 的状态。

注意，两个函数中都使用了XML 组件生成的 URL 来设置具体的 http 请求。如

复制代码

xhr.open("GET", "/states", true);

上述语句将向 /states URL 实际发出一个的 GET 类型的请求。

此外，在前端代码中还使用了 JSON 字符串，JSON 是一种常用的结构化文本结构，这里不做详细科普，感兴趣的可以搜索相关资料进行了解。json.parse 的相关参考资料参考 javascript-json-parse。

后端设计

后端代码中主要增加两个 handler，"/states" 和 "/update"，它们分别响应对应的上述两个前端的函数 getStates() 、toggleCheckbox()。

复制代码

{"/states", HTTP_GET, output_states_get_handler, NULL},
{"/update", HTTP_GET, update_state_get_handler, NULL},

为了实现上报多个 GPIO 的状态，我们在后端代码中使用了 JSON 格式，通过 JSON 字符串获取每个 GPIO 对象详细的信息。

为了与前端解析 JSON 的过程相对应，我们需要在后端将信息封装为 JSON 字符串。这需要在文件中增加 JSON 功能的头文件 include "cJSON.h"，然后使用 cJSON 的函数制作 JSON 对象。示例演示了常见的用法，并通过 cJSON_Print() 打印最终生成的 JSON 字符串，读者可以尽情封装，在使用中体会 JSON 字符串的使用方法。

复制代码

cJSON* root = cJSON_CreateObject();
cJSON *gpio_array = cJSON_CreateArray();

最后前端回复的字符串中包含 GPIO 的详细信息，我们通过字符串解析函数 httpd_find_arg() 解析要控制的是哪一个 GPIO，以及要设置该 GPIO 是否输出高电平。

示例效果

点击不同的按钮可以切换网页的显示效果：

在网页端更新 GPIO 状态时，可以看到后端代码对应的响应，如下是对控制 GPIO2 的后端代码响应 log：

复制代码

I (76050) example_main: req:/update?output=2&state=1
I (76060) example_main: updates:gpio_num=2
I (76060) example_main: updates:gpio[2]_status=1

讨论

每个前端的请求都需要在发送完数据后回复一个 OK，或者 error 编码，这在我们前述的 HTML 基础章节中讲述了 HTTP 传输协议的原理。

复制代码

void modbus_dtu_web_response_OK(httpd_req_t *req)
{
    httpd_resp_set_type(req, HTTPD_TYPE_JSON);
    httpd_resp_set_status(req, HTTPD_200);
    httpd_resp_sendstr(req, "{\"state\": 0}");
}

void modbus_dtu_web_response_error(httpd_req_t *req, const char *status)
{
    httpd_resp_set_type(req, HTTPD_TYPE_JSON);
    httpd_resp_set_status(req, status);
    httpd_resp_sendstr(req, "{\"state\": 1}");
}

为了在网页端每次设置 GPIO后都重新加载整个网页的 GPIO 信息，我们增加了一个重定义 handler:
复制代码
```
redirect_index_html(req);
```
通过重新加载整个网页，避免网页端显示的 GPIO 状态与设备实际的 GPIO 状态不同步。这显然不是较好的做法，因为重新加载整个网页涉及的传输开销很大。我们将在后续的项目中优化这一点。
试想当多个浏览器同时访问该 web 服务器时将发生什么？

因为当前的 web 服务器不能将更新以主动通知的形式通知所有连接的设备，当多个设备同时访问该 web 服务器时，会出现 A 浏览器更改了对应 GPIO 状态，但是 B 浏览器没有主动更新网页的情况下，是无法知道当前 GPIO 状态已经更改了的。因此当前的设计不支持多设备访问。我们将在后面修正这点设计的不足。

总结

1）本节主要是演示最常见的控件-button，以及可以绑定一个事件来描述按钮按下时发生的行为。

2）通过本节的 ESP32 Web Server Mutil GPIOs 的示例，你可以模仿写出一个网友控制多个外部传感器、LED灯的物联网工程。

资源链接

1）ESP32-Web-Server ESP-IDF系列博客介绍

2）对应示例的 code 链接（点击直达代码仓库）

3）下一篇：ESP32-Web-Server 实战编程-使用文件系统建立强大的 web 系统

(码字不易感谢点赞或收藏)