WhyCan Forum(哇酷开发者社区)

msr06rr

会员

所在地： 苏州

注册时间： 2018-01-11

已发帖子： 180

积分： 170.5

ESP32+mDNS+HTTP Server的方案验证

上图，跑的都是官方的示例代码，东拼西凑

一直觉得ESP32+液晶屏不是物联网GUI最佳方案（当然也有必须要液晶屏的场合），好的液晶屏成本高，想要做酷炫的界面还依赖GUI引擎（很多还是收费的）。但是Web就不同了，做个酷炫的显示界面，有一堆开源前端框架，比如Vue。
最近有空尝试用Vue写个前端，编译后部署在SD卡上。后端的程序不用很复杂，基于IDF现有的组件，实现几条简单的REST API还是没问题的吧。
主要网页中的URL这个有点蛋疼，因为DHCP分到的IP地址是会发生变化

好在局域网中可以使用mDNS，IDF中也已经包含了这个组件，开箱即用

这种方案有个弊端，就是操作系统要支持mDNS才行，Ubuntu自带avahi，mac自带bonjour，但是windows和Android我就不知道了，还没试过。

msr06rr

会员

所在地： 苏州

注册时间： 2018-01-11

已发帖子： 180

积分： 170.5

Re: ESP32+mDNS+HTTP Server的方案验证

更新...
小型嵌入式Web开发（不跑Linux）有一个痛点是如何在开发阶段快速迭代，不可能每次修改html代码就要重新烧写程序，哪怕是放在SD卡上，每次插拔也很蛋疼，可能修改html只要几秒，但是部署一次就要花1分钟。
所以就想到了semihost方式的开发，相当于是热部署吧。只要后端程序不改变，就不需要重新烧固件，不需要插拔SD卡，连着JTAG就完事了。
过程如下：
浏览器向esp32发送GET请求，esp32根据请求地址，从host主机端检索文件，然后发送响应数据包给浏览器。网页文件都在host端，基本可以实现开发阶段的热更新，“实时”预览。只是这个实时性能还要看JTAG速度有多快了。
实际测试，VUE编译后大约550K的网站，每次刷新需要5秒左右的时间。

最近编辑记录 msr06rr (2019-03-28 15:44:02)

msr06rr

会员

所在地： 苏州

注册时间： 2018-01-11

已发帖子： 180

积分： 170.5

Re: ESP32+mDNS+HTTP Server的方案验证

https://github.com/espressif/esp-idf/tree/master/examples/storage/semihost_vfs

确切的说是ESP32控制JTAG，通过JTAG来做IO操作。IDF还将这种semihost封装在了VFS上，所以在esp32上用open，read，write等方式操作PC上的文件。

msr06rr

会员

所在地： 苏州

注册时间： 2018-01-11

已发帖子： 180

积分： 170.5

Re: ESP32+mDNS+HTTP Server的方案验证

还是没有脑补成功，

ESP32 是连接 JLINK + OpenOCD ?
再操作电脑上的文件?

是的哇，ESP32连着JTAG，主机端要开启OpenOCD 

msr06rr

会员

所在地： 苏州

注册时间： 2018-01-11

已发帖子： 180

积分： 170.5

Re: ESP32+mDNS+HTTP Server的方案验证

https://docs.espressif.com/projects/esp-idf/zh_CN/latest/api-guides/jtag-debugging/index.html

msr06rr

会员

所在地： 苏州

注册时间： 2018-01-11

已发帖子： 180

积分： 170.5

Re: ESP32+mDNS+HTTP Server的方案验证

用vuetify的模板搭了个框架，可以以此写一个admin页面

不得不说semihost目前加载速度有点慢，加了vuetify库后刷新一次要10秒了

后面部署到SD卡上看看能不能快点

msr06rr

会员

所在地： 苏州

注册时间： 2018-01-11

已发帖子： 180

积分： 170.5

Re: ESP32+mDNS+HTTP Server的方案验证

Vue这类单页应用的框架，首次加载是会消耗很多时间，但是后续的路由跳转并不会发生太多流量，响应还是很快的。
接下来尝试使用axios发起post请求给esp32，看看能否成功

msr06rr

会员

所在地： 苏州

注册时间： 2018-01-11

已发帖子： 180

积分： 170.5

Re: ESP32+mDNS+HTTP Server的方案验证

网站部署，要么放在spi flash上（如果网站编译后体积较大，可能不太适合），要么放在SD卡或者SD Nand上。

晒一下刚焊接的SD Nand

msr06rr

会员

所在地： 苏州

注册时间： 2018-01-11

已发帖子： 180

积分： 170.5

Re: ESP32+mDNS+HTTP Server的方案验证

看起来好像是雷龙的吧?

哈哈哈，晕哥好眼力！

msr06rr

会员

所在地： 苏州

注册时间： 2018-01-11

已发帖子： 180

积分： 170.5

Re: ESP32+mDNS+HTTP Server的方案验证

吼，SD Nand 识别到了。

将网站部署在SD Nand上，网站打开速度可以秒开。

msr06rr

会员

所在地： 苏州

注册时间： 2018-01-11

已发帖子： 180

积分： 170.5

Re: ESP32+mDNS+HTTP Server的方案验证

吼，SD Nand 识别到了。

https://s2.ax1x.com/2019/04/08/A4sFIg.png

将网站部署在SD Nand上，网站打开速度可以秒开。

https://s2.ax1x.com/2019/04/08/A4smMq.png

这个是用 spi 还是 sdio 访问 sd nand 芯片?

SDIO接口

msr06rr

会员

所在地： 苏州

注册时间： 2018-01-11

已发帖子： 180

积分： 170.5

Re: ESP32+mDNS+HTTP Server的方案验证

发现编译后的website不是很大，2M不到，塞到SPI Flash 中刚刚好啊，实测下来速度还不如SD卡。

IDF中有一个好用的制作spiffs bin 文件的工具，目前已经集成到编译系统当中，只需要在Makefile中指定好文件目录，就能在编译阶段自动制作bin，烧写阶段自动烧写到SPI Flash中的指定分区中，超级无敌爽，无需额外的命令行操作。教程：https://docs.espressif.com/projects/esp-idf/en/latest/api-reference/storage/spiffs.html

最近编辑记录 msr06rr (2019-04-11 12:11:34)

msr06rr

会员

所在地： 苏州

注册时间： 2018-01-11

已发帖子： 180

积分： 170.5

Re: ESP32+mDNS+HTTP Server的方案验证

作为一个电子工程师居然爱上了Vue，真特码好用。我用的前端五件套：Vue+VueRouter+Vuex+axios+Vuetify

最近编辑记录 msr06rr (2019-04-19 11:08:20)

msr06rr

会员

所在地： 苏州

注册时间： 2018-01-11

已发帖子： 180

积分： 170.5

Re: ESP32+mDNS+HTTP Server的方案验证

* 第一个页面用来展示板卡和软件信息：IDF版本号，芯片特征啥的
* 第二个页面是动态展示ESP32传感器数据（虽然目前我上传的都是随机数）
* 第三个页面是远程控制三色LED（虽然我的板子上并没有这个LED，目前只是在ESP32上print拿到的三色数据

Vue真香～