ESP32-Web-Server编程综合项目1-结合 Web Server 实现 WiFi 配网和网页 OTA 更新

├── CMakeLists.txt
├── main
│   ├── CMakeLists.txt
│   └── main.c                 User application
├── components
│   └── fs_image
		└── index.html
		└── ...
|	└── url_handlers
		└── url_handlers.c
		└── ...
└── README.md                  This is the file you are currently reading

目录结构主要包含主目录 main，以及组件目录 components.
其中组件目录 components中包含了用于存储网页文件的 fs _image 目录（即前端文件）。

前端 代码

多网页菜单 设计

在 components/fs_image/web_image/index.html 中设计三个子菜单：wifi manager、o t a、Ho me：

&lt;div class="topnav-right"&gt;
  &lt;a href="wifimanager"&gt;WiFi Manager</a>
  <a href="ota">OTA</a>
  <a href="/">Home</a>
</div>

当点击对应的 href 时，浏览器会向 ESP32 Web Server 发送对该 href 的 Get 请求。

SoftAP 配网界面

在 components/fs_image/web_image/wifimanager_softap.html 中设计 SoftAP 配网的界面：

<form action="/wifi_config" method="POST">
  <p>
    <label for="ssid">SSID</label>
    <input type="text" id ="ssid" name="ssid"><br>
    <label for="pass">Password</label>
    <input type="text" id ="pass" name="pass"><br>
    <label for="ip">IP Address</label>
    <input type="text" id ="ip" name="ip" value="192.168.1.xxx">
    <input type ="submit" value ="Submit">
  </p>
</form>

上述配网界面非常简单，提供了输入路由器 WiFi 名称和密码的输入框。

当用户输入 WiFi 名称和密码后，将通过 http 的 POST 方法向 /wifi_config 推送配网信息。

WiFi Manager 界面

在配网成功，设备连接路由器后，我们可以像往常一样。让手机或者电脑连接到同一个路由器，然后通过局域网打开 ESP32 设备上的控制网页。

在 components/fs_image/web_image/wifimanager.html 界面，我们可以重新下发设备要连接的路由器的信息：

<form action="/wifi_config" method="POST">
  <p>
    <label for="ssid">SSID</label>
    <input type="text" id ="ssid" name="ssid"><br>
    <label for="pass">Password</label>
    <input type="text" id ="pass" name="pass"><br>
    <!-- <label for="ip">IP Address</label>
    <input type="text" id ="ip" name="ip" value="192.168.1.200"> -->
    <input type ="submit" value ="Submit">
  </p>
</form>

OTA 更新界面

可以通过子菜单跳转到 OTA 更新的网页。

在 components/fs_image/web_image/ota.html 中，建立了一个 input file 的输入框。，并设置了一个 submit 按钮：

<h2>ESP32 Firmware Update Page</h2>
    <h4 id="latest_firmware"></h4>

<input type="file" id="selectedFile" accept=".bin" style="display: none;" onchange="myFunction()" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />
<h3 id="file_info"></h3>
<input type='submit' id="upload_button" value='Update Firmware' onclick="updateFirmware()"><br>
<p>
<button onclick="rebootButton()">Reboot</button>
</p>

选中文件后，通过ota.html 中的 updateFirmware() 实现向 /update 以 POST 方法推送新固件数据：

function updateFirmware() {
    // Form Data
    var formData = new FormData();

    var fileSelect = document.getElementById("selectedFile");

    if (fileSelect.files &amp;&amp; fileSelect.files.length == 1) {
        var file = fileSelect.files[0];
        formData.set("file", file, file.name);
        document.getElementById("status").innerHTML = "Uploading " + file.name + " , Please Wait...";

        // Http Request
        var request = new XMLHttpRequest();

        request.upload.addEventListener("progress", updateProgress);

        request.open('POST', "/update");
        request.responseType = "blob";
        request.send(formData);
    } else {
        window.alert('Select A File First')
    }
}

此外，为了反映 OTA 更新过程的进度，在 ota.html 中的 script 中添加了更新进度的函数：

// progress on transfers from the server to the client (downloads)
function updateProgress(oEvent) {
    if (oEvent.lengthComputable) {
        getstatus();
    } else {
        window.alert('total size is unknown')
    }
}

后端代码

后端代码除建立前述基于 spi ffs 的 Web Server 外，重点是设计对应前端文件的各个 URL 的 handlers.

这里的 URL 分为两组，一组是还未进行 WiFi 配网（比如设备刚出厂，用户首次使用时）时手机通过连接 ESP32 的 SoftAP 时打开的网页 httpd_uri_array_softap_only[]、一组是配网后，ESP32 设备连接到路由器后，用户通过手机或者电脑连接至同一个路由器时通过局域网打开的网页httpd_uri_array[]：

httpd_uri_t httpd_uri_array_softap_only[] = {
        {"/wifi_config", HTTP_POST, wifi_config_post_handler, rest_context},
        {"/*", HTTP_GET, softap_wifi_html_get_handler,rest_context}
    };

httpd_uri_t httpd_uri_array[] = {
    {"/wifimanager", HTTP_GET, wifi_manage_html_get_handler, rest_context},
    {"/ota", HTTP_GET, ota_html_get_handler, rest_context},
    {"/wifi_config", HTTP_POST, wifi_config_post_handler, rest_context},
    {"/update", HTTP_POST, OTA_update_post_handler, rest_context},
    {"/status", HTTP_POST, OTA_update_status_handler, rest_context},
    {"/reboot", HTTP_GET, reboot_html_get_handler, rest_context},
    {"/*", HTTP_GET, rest_common_get_handler,rest_context}//Catch-all callback function for the filesystem, this must be set to the array last one
};

if (!s_sta_connected) { // 首次配网时
    uris = httpd_uri_array_softap_only;
    uris_len = sizeof(httpd_uri_array_softap_only)/sizeof(httpd_uri_t);
} else { // 已经配过网时
    uris = httpd_uri_array;
    uris_len = sizeof(httpd_uri_array)/sizeof(httpd_uri_t);
}

for(int i = 0; i < uris_len; i++){
    if (httpd_register_uri_handler(server, &amp;uris[i]) != ESP_OK) {
        ESP_LOGE(TAG, "httpd register uri_array[%d] fail", i);
    }
}

配网处理

配网处理在 main/main.c 中的 wifi_config_post_handler() 中，接收网页端 POST 的路由器 WiFi 的名称和密码，并使用 wifi_config_store() 将其存储在设备上。设备重新上电后将检测到已经存储了WiFi 的名称和密码，然后触发向该路由器的 WiFi 连接。

if (recv_post_data(req, buf) != ESP_OK) {
    ESP_LOGE(TAG, "recv post data error");
    return ESP_FAIL;
}

str_len = httpd_find_arg(buf, PARAM_INPUT_1, temp_str, sizeof(temp_str));
if ((str_len != -1) &amp;&amp; (strlen((char *)temp_str) != 0)) {
    // snprintf((char *)wifi_config.sta.ssid, 32, "%s", temp_str);
    memcpy((char *)wifi_config.sta.ssid, temp_str, 32);
    ESP_LOGI(TAG, "ssid:%s", (char *)wifi_config.sta.ssid);
}

memset(temp_str, '', sizeof(temp_str));

str_len = httpd_find_arg(buf, PARAM_INPUT_2, temp_str, sizeof(temp_str));
if ((str_len != -1) &amp;& (strlen((char *)temp_str) != 0)) {
    memcpy((char *)wifi_config.sta.password, temp_str, 64);
    ESP_LOGI(TAG, "pwd:%s", (char *)wifi_config.sta.password);
}
if(!wifi_config_store(&wifi_config)) {
    return ESP_FAIL;
}

关于 WiFi Manager

WiFI 管理主要是负责管理 WiFi 的工作模式，WiFi 配网信息。

默认情况下，设备将建立一个名称为 IoT_Old_Wang、密码为 123456789 、IP 地址默认为 192.168.4.1的 SoftAP，用户可以通过手机或者电脑搜索该热点，然后连接到该默认 AP，并使用浏览器打开 192.168.4.1 网址，查看配网界面。

如果需要更改默认 SoftAP 的信息，可以在编译程序时通过 idf.py menuconfig 打开配置菜单配置下述信息：

在这里插入图片描述

OTA 的后端处理

OTA 更新的后端处理在 main/web_ota.c 中，在 OTA_update_post_handler() 内，主要是接收从网页下发的固件数据：

if (esp_ota_end(ota_handle) == ESP_OK)
{
    // Lets update the partition
    if(esp_ota_set_boot_partition(update_partition) == ESP_OK) 
    {
        const esp_partition_t *boot_partition = esp_ota_get_boot_partition();

        // Webpage will request status when complete 
        // This is to let it know it was successful
        flash_status = 1;
        ESP_LOGI("OTA", "Next boot partition subtype %d at offset 0x%x", boot_partition->subtype, boot_partition->address);
        ESP_LOGI("OTA", "Please Restart System...");
    }
    else
    {
        ESP_LOGI("OTA", "rnrn !!! Flashed Error !!!");
    }
}

接收完固件将设置标志位 flash_status=1，当网页端重新请求固件的 status 时，将在 OTA_update_status_handler()中触发创建一个定时重启设备的定时器：

if (flash_status == 1)
{
    // We cannot directly call reboot here because we need the 
    // browser to get the ack back. Send message to another task or create a 
    create_a_restart_timer();
    // xEventGroupSetBits(reboot_event_group, REBOOT_BIT);		
}