基于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接口如下:

        首先先体验下官方的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运行到本机,如下为运行到本机的参考以及效果。

要查看运行到本机的web发出的restful api的话可以打开浏览器的开发者工具进行查看实际交互的内容,该工具可以方便确认web端发出的相关内容是否是按约定的。如下为打开开发者工具后调节rbg后发出的rest api是和文档里的约定是一样的,

        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上)。

              build完成后运行起来后找到esp32的ip地址直接访问即可出现和pc段运行的web页面一样的web效果。至此官方webserver的运行效果已走过一遍。

        3、官方webserver的简要分析

                 web打包的后台要放spiflash的话需要配置所需要的分区表,因此分区表会需要有所需要的分区支持,分区格式以及目录在编译脚本里可以看得到,如下

                如上cmake编译脚本可以看到会需要spiffs分区,会将webdemo前端构建的dist文件夹都打包放到spi flash里。

                spiffs分区可以从sample根目录的partitions_example.csv看到里面有设置了www的spiffs分区,如下,

                如上给定的网页部署文件的flash空间大小是2M,如果自行更换web后台页面如果超过2M的话需要到这里来修改这里的size大小。同时后面ota升级也会需要修改改文件来添加ota相关分区用于供esp32进行ota升级。

                webdemo npm build打包后会自行生产dist目录作为build网页最终部署的文件,如下

                后面要自己开发web页面来替换官方的demoweb的话也是直接把该部分文件删除,然后把新web build生产后的dist下的文件都拷贝到该目录下即可。

   

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/39153.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mybatis多数据源操作

最近项目,一个后端代码被两个前端页面调用,代码数据库都冗余了,写着很难受感觉跟吃狗屎一样。因此决定先把数据库分开,然后之后把项目分成多模块化得。 想把数据库分开其实就只是需要实现多数据源操作,我考虑得不多&a…

DSPy的BootstrapFewShot

这是官方文档 官方文档给示例数据的量划分了10/50/300等档位,对应BootstrapFewShot/BootstrapFewShotWithRandomSearch/MIPRO. 我们以10条示例数据example为例,即选用BootstrapFewShot DSPy认为用原始数据直接做few-shot效果不好的原因是:…

Golang-context理解

golang-context笔记整理 golang为何设计context?代码上理解原理空context类cancelCtx类.withcancelctx方法 timerCtx类valueCtx类 golang为何设计context? 有并发特性的语言中,都会有一种说法:创建异步线程或者携程的时候&#x…

【TS】TypeScript 入门指南:强大的JavaScript超集

🌈个人主页: 鑫宝Code 🔥热门专栏: 闲话杂谈| 炫酷HTML | JavaScript基础 ​💫个人格言: "如无必要,勿增实体" 文章目录 TypeScript 入门指南:强大的JavaScript超集一、TypeScript 简介1.1 …

Windows页面错误(Page Fault)写几种c++会导致,此问题的例子

在C中,直接导致Windows页面错误(Page Fault)的情景较少直接由编程错误引发,页面错误更多是由操作系统在内存管理和虚拟内存机制中处理的。不过,某些编程错误可能导致访问违规,进而间接引起操作系统报告页面…

SpringBoot实现图片添加水印(完整)

提示:昨天不是写了一个类似与图片添加水印的版本吗,今天来写一个带数据库,并且可以完整访问的版本 文章目录 目录 文章目录 引入库 配置文件 数据库配置 字段配置 索引配置 数据库表语句 启动文件 前端代码 整体代码目录 配置类AppConfig Contro…

通俗大白话理解Docker

什么是Docker Docker本质上是一种容器化技术,用于将应用程序及其所有依赖打包到一个标准化的单元中。这些单元(容器)可以在任何运行Docker的机器上运行。每个容器是相互隔离的,具有自己的文件系统、网络和进程空间。 以下是大白话…

gin框架中form, uri 2种类型的数据绑定到自定义结构体, 绑定数据默认值设置方法, 时间格式绑定和格式设置 详解

gin框架中可以非常方便的将http请求的form数据,和路由参数中的uri 数据通过反射的方式将我们自定义在结构体中的TAG字段和请求参数中同名的数据进行绑定。 要完成数据的绑定, 首先我们需要定义一个结构体和需要绑定的结构体字段,并在结构体字…

用可视化的方式学统计学

本次分享一个统计学学习工具:看见统计。 看见统计致力于用数据可视化 (使用D3.js完成) 让统计概念更容易理解,源于布朗大学几位作者👇 看见统计共有6个章节, 下面来看看具体内容, 中心极限定理 对于一个(性质比较好的)分布,如果我们有足够大的独立同分布的样本,其…

Java高级重点知识点-19-Lambda

文章目录 Lambda表达式函数式编程思想Lambda表达式写法代码讲解 Lambda表达式 函数式编程思想 强调做什么,而不是以什么形式做。 以函数式接口Runnable为例讲解: public class LambdaDemo {public static void main(String[] args) {Runnable runnab…

C语言实现简单的minishell

探索开源项目:MiniShell 引言 在计算机编程的世界里,Shell 是一个至关重要的组成部分,它允许用户与操作系统交互,执行命令和程序。MiniShell 是一个简化版的 Shell 程序,通常用于教学和学习目的。在本文中&#xff0…

第3篇 区块链技术的核心要素:共识机制、加密技术与分布式账本

区块链听起来像个非常高大上的技术,其实它的核心原理并不难理解。今天我们要聊的就是区块链的三个核心要素:共识机制、加密技术和分布式账本。想象一下区块链是一个巨大的数字笔记本,我们要弄清楚大家如何共同写这个笔记本,又如何…

《梦醒蝶飞:释放Excel函数与公式的力量》8.2 COUNTA函数

8.2 COUNTA函数 COUNTA函数是Excel中用于统计指定区域内所有非空单元格数量的函数。它能够统计数值、文本、错误值以及公式返回的结果,是数据分析中常用的统计工具。 8.2.1 函数简介 COUNTA函数用于统计指定区域中所有非空单元格的数量。它与COUNT函数不同&#…

创新校园服务模式 跑腿小程序平台源码构建与实践 前后端分离 带完整的安装代码包以及部署教程

系统概述 本项目是一个集任务发布、接单、支付、评价于一体的跑腿服务小程序平台,专为高校校园设计。系统采用前后端分离架构,前端负责用户界面展示和交互逻辑,后端处理业务逻辑、数据存取等,两者通过API接口进行通信&#xff0c…

二叉树的右视图-二叉树

199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 层序遍历&#xff0c;广度优先 queue先进后出&#xff0c;每层从左往右进树&#xff0c;最后一个就是最右边的数&#xff1b;pop掉这层的。push下一层&#xff1b; class Solution { public:vector<int> r…

楼层分户项目分析

文章目录 1. 区域绘制2. 户型切分3. 楼房分层4. 编辑房户信息5. 查看房户信息6. 数据库6.1. 楼栋数据库6.2. 单位数据库 7. 房户数据库 1. 区域绘制 点击绘制图形&#xff0c;激活画笔&#xff0c;右键结束绘制。 输入框可以更换地址前缀。 分户坐标是由绘制的多个点组成的&…

深度学习笔记: 最详尽解释混淆矩阵 Confusion Matrix

欢迎收藏Star我的Machine Learning Blog:https://github.com/purepisces/Wenqing-Machine_Learning_Blog。如果收藏star, 有问题可以随时与我交流, 谢谢大家&#xff01; 混淆矩阵 假设我们有包含临床测量数据的医疗数据&#xff0c;例如胸痛、良好的血液循环、动脉阻塞和体重…

华为机试HJ4字符串分隔

华为机试HJ4字符串分隔 题目&#xff1a; 将输入的字符串分隔为每8个一个新字符串&#xff0c;最有一个不足8个用0来填充。 想法&#xff1a; 遍历提取输入字符串中的每8个字符&#xff0c;填充最后一个不满足长度的字符串&#xff0c;用0填充至8个 input_str input() if…

如何将音频文件发送至摄像头

目前再很多互联互通的场景下&#xff0c;如AI盒子再从摄像头上取视频分析&#xff0c;分析出发生某个事件&#xff0c;需要反向通过摄像头的喇叭播放语音&#xff0c;发出告警提示&#xff0c;使用场景如下 盒子上对于此类场景的需求往往不能满足&#xff0c;或者为这个需求需要…

list对象根据对象属性去重

对List中的对象根据某个属性进行去重的情况。例如&#xff0c;我们有一个实体类student&#xff0c;其中包含属性id、name和age&#xff0c;现在我们有一个List<Student>&#xff0c;我们希望根据name属性去除重复的Student对象。 我们可以借助HashSet的特性&#xff0c;…