基于ESP32 IDF的WebServer实现以及OTA固件升级实现纪录（一）
webserver即运行在esp32上的web服务，相当于esp32作为web服务器，它可以处理web浏览器等客户端的http相干请求（常见的get/post/put等http方法）。ota即在线固件升级，idf已经提供了丰富的官方ota示例，不过主要是esp32作为httpclient去请求长途服务器云端的固件来进行本地固件升级，该方式会需要有一个远端的httpserver，现实产品部署的时间会需要一个进行云端部署用来存放要升级的固件，对小企业来说会有一部分云端费用。esp32本身除了支持wifi还支持蓝牙ble，也可以通过ble进行ota升级，可参考GitHub - iot-lorawan/esp32-ota-ble: ota update with ble in esp32 use Siliconlabs EFR Connect App，本文主要形貌别的一种方式的ota，即基于webserver方式的ota升级，该方式不需要云端，只需登录esp32本身的webserver后台，选择要升级的固件后即可进行在线升级。该方式也较常见于智能网关的本地后台在线升级方式使用。
esp官方提供的参考示比方下：esp-idf/examples/protocols/http_server/restful_server at master · espressif/esp-idf · GitHub，该方式基于restful架构，使用了今世化的web开发方式，可以前后端分离进行并行开发，前后端约定好restful接口api后即可各自同步进行。
官方的restful接口如下：
https://img-blog.csdnimg.cn/direct/74187b170b5c4769aa959cc1693fd20f.png
首先先体验下官方的sample示例，大体了解下官方的实现流程后再来进行改造实现本身的webserver后台页面以及所需要的restful api接口。
1、进入官方sample示例目录，按readme进行build前端页面
假如后续需要本身更换webserver后台或者修改web页面等的话web前端的build需要稍微了解下，官方web是基于vue前端框架的，需要事先安装nodejs环境，官方示例的webdemo对nodejs版本有要求，需要用nodejs v10，不能用最新版的build否则会编译不过。
官方的build：
cd path_to_this_example/front/web-demo
npm install
npm run build 如上该步是直接编译打包成dist文件用来给esp32部署。
假如想直接在本机pc上直接查看webdemo的效果的话可以npm install后运行npm run serve来把webdemo运行到本机，如下为运行到本机的参考以及效果。
https://img-blog.csdnimg.cn/direct/b9658fd9dc52484d8dbf91d8cfd0b575.png
https://img-blog.csdnimg.cn/direct/e43334ea58384b58be19085a473ebf8a.png
https://img-blog.csdnimg.cn/direct/e29953f803074efb946febebd8616fbd.png
https://img-blog.csdnimg.cn/direct/4d93093f6fc34a70bfd04bb8a07e7371.png
要查看运行到本机的web发出的restful api的话可以打开浏览器的开发者工具进行查看现实交互的内容，该工具可以方便确认web端发出的相干内容是否是按约定的。如下为打开开发者工具后调节rbg后发出的rest api是和文档里的约定是一样的，
https://img-blog.csdnimg.cn/direct/e0652d46507f402d918687e1ff7ef53d.png
2、官方示例的webdemo简单了解后可以开始构建esp的嵌入式端的代码，参考官方指引
idf.py set-target esp32s3
idf.py menuconfig
idf.py build
idf.py -p COM23 flash monitor 此中menuconfig事先设置要要连接的wifi热门ssid以及wiif热门密码，同时注意关闭半主机调试方式，否则烧录进去后装备会一直复位（半主机调试方式主要是esp32可以直接通过jtag接口去访问pc机的web文件作为webserver后台文件，无需web打包的文件放到esp32的spi flash上）。
https://img-blog.csdnimg.cn/direct/629065cdd7f441448f0c75985a2e317d.png
build完成后运行起来后找到esp32的ip地址直接访问即可出现和pc段运行的web页面一样的web效果。至此官方webserver的运行效果已走过一遍。
3、官方webserver的简要分析
web打包的后台要放spiflash的话需要配置所需要的分区表，因此分区表会需要有所需要的分区支持，分区格式以及目录在编译脚本里可以看得到，如下
https://img-blog.csdnimg.cn/direct/f755185aae8441b581de214bf34133bb.png
如上cmake编译脚本可以看到会需要spiffs分区，会将webdemo前端构建的dist文件夹都打包放到spi flash里。
spiffs分区可以从sample根目录的partitions_example.csv看到内里有设置了www的spiffs分区，如下，https://img-blog.csdnimg.cn/direct/7a04a30e62ba4717b98a1d1cc28f697e.png
如上给定的网页部署文件的flash空间巨细是2M，假如自行更换web后台页面假如超过2M的话需要到这里来修改这里的size巨细。同时背面ota升级也会需要修改改文件来添加ota相干分区用于供esp32进行ota升级。
webdemo npm build打包后会自行生产dist目录作为build网页终极部署的文件，如下
https://img-blog.csdnimg.cn/direct/9fccde31e85944d687a80d56ab99900e.png
背面要本身开发web页面来替换官方的demoweb的话也是直接把该部分文件删除，然后把新web build生产后的dist下的文件都拷贝到该目录下即可。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]