add a post on using http as the service protocol

Author: paul356

_org/2025-02-26-mobile-storage-http.org

@@ -0,0 +1,73 @@
+#+OPTIONS: ^:nil
+#+BEGIN_EXPORT html
+---
+layout: default
+title: 一种基于ESP32丰富连接能力的移动存储设备 -- 改用HTTP协议
+tags: [ESP-IDF, ESP32, SDMMC，HTTP]
+nav_order: {{ page.date }}
+sync_wexin: 1
+---
+#+END_EXPORT
+
+* 一种基于ESP32丰富连接能力的移动存储设备 -- 改用HTTP协议
+
+** 前言
+
+在测试了端到端的读性能之后，我发现了一个难以解决的问题，就是在ESP32S3上运行基于Rust的异步框架的WebDAV有点小马拉大车的感觉，下载文件的速度大约在十几KB左右，而且还需要扩展SPIRAM才能满足程序的内存需求。因为SPIRAM比其内建的RAM速度缓慢，导致性能更差。另外我也不想自己从头实现一个WebDAV服务器，所以我调整了思路，改在ESP32S3上运行更加轻巧的HTTP服务。本文介绍这个最终方案。
+
+因为怀疑上个版本PCB会导致SDMMC和SPIRAM有冲突，我做了一版新的PCB。但其实是ESP-IDF的软件问题，因为新PCB也会有出现疑似SDMMC和SPIRAM冲突的问题。最新的ESP-IDF 5.3已经修复了这个问题，重新安装ESP-IDF 5.3的最新版本就可以解决SDMMC和SPIRAM冲突的问题。我还是做了一些修改，包括改了SD卡的位置。还增加了两个按钮，对应的GPIO口是IO8和IO18。给LED的尾部加了两个孔，可以安装两个铜柱来支撑LED。贴好片的新PCB外观如下。
+
+[[/images/esp32s3-storage-pcb-v2.jpg]]
+
+本系列其他文章
+1. [[https://paul356.github.io/2024/10/31/mobile-storage.html][一种基于ESP32丰富连接能力的的移动存储设备]]
+2. [[https://paul356.github.io/2024/12/12/mobile-storage-pcb.html][一种基于esp32丰富连接能力的移动存储设备 -- 电路设计]]
+3. [[https://paul356.github.io/2024/12/27/mobile-storage-sd-card-test.html][一种基于esp32丰富连接能力的移动存储设备 -- 测试sd卡读写]]
+4. [[https://paul356.github.io/2025/01/06/mobile-storage-display.html][一种基于esp32丰富连接能力的移动存储设备 -- 验证屏幕显示]]
+5. [[https://paul356.github.io/2025/02/07/mobile-storage-speed.html][一种基于ESP32丰富连接能力的移动存储设备 -- 测试TF卡读写速度]]
+
+** 基于HTTP的存储服务的工作原理
+移动存储通过WiFi协议接入本地局域网，并且运行HTTP服务器提供网页服务，局域网内的设备可以访问存储设备提供的主页。主页上显示的是SD卡上的数据列表，用户可以通过网页下载、上传、删除文件，也可以创建和切换文件目录。
+
+使用HTTP协议的原因是考虑HTTP没有状态，不需要很复杂的解析流程，对于ESP32S3这样的嵌入式处理器也能高效处理，所以整体的性能应该还能让人接受。
+
+** 软件设计
+移动存储的软件主要包含三个部分：设备配置管理、HTTP请求处理、前端页面。本项目的最终代码可以在[[https://github.com/paul356/esp32s3_file_server][esp32s3_file_server]]仓库中下载。
+
+*** 设备配置管理
+设备配置管理完成esp32s3硬件的配置，包含wifi配置的修改和恢复、挂载存储设备、监测按钮操作、显示屏的初始化等。这个部分主要就是初始化各个硬件模块，并提供接口给http请求处理部分调用，并将修改值保存到nvs鍵值存储中。这个部分的代码主要包含源文件 ~main.c~ 和components目录下的模块。
+
+*** http请求处理
+http请求处理是网页应用的后台处理程序，处理具体的http请求，包括下列请求：
+1. 获取给定目录下的文件和目录列表
+2. 获取指定路径的文件
+3. 删除指定的文件或目录
+4. 创建新目录
+5. 上传文件
+6. 查询wifi配置
+7. 修改wifi配置
+8. 获取前端网页文件
+这些请求会在用户访问主页时触发，http服务器将请求处理的结果返回给主页，主页根据结果刷新页面内容。http请求处理的代码位于源文件 ~esp32s3_file_server.c~ 中。
+
+*** 前端页面
+前端页面使用vue.js开发，是一个单页面应用，包含两个视图： ~fileexplorer~ 和 ~config~ 。 ~fileexplorer~ 服务于用户的文件操作。 ~config~ 目前用于修改wifi配置。代码在web目录下，通过 ~npm run build~ 命令生成最终的网页文件。由于这是我第一个使用vue.js，可能代码写得比较乱，有啥问题欢迎给我提issue。
+
+** 使用说明
+简单介绍一下如何通过网页使用移动存储服务。
+
+*** 文件操作
+[[/images/esp32s3-http-web.jpg]]
+文件操作主要通过 ~fileexplorer~ 视图，试图主要分为三个部分，在图中被标上了三个红色的矩形。矩形1中是当前目录的全路径，其中每一级目录都是一个按钮，可以点击其中一个目录返回上级目录。矩形2是当前目录中的文件和目录列表，可以通过下载和删除按钮来对某一个文件进行操作，还可以选择进入一个子目录。矩形3包含了一个创建目录的表单和上传文件的表单，用户可以在当前目录中创建子目录和上传新文件。
+
+*** 设备配置
+[[/images/esp32s3-http-web-config.jpg]]
+移动存储提供一个默认热点，第一次使用时用户先连接这个热点，然后通过配置视图修改移动存储的网络配置。通过输入无线局域网的ssid和密码，移动存储就可以接入无线局域网。当网络配置错误或者无线局域网的密码被修改时，可以按一下io8对应的按钮来恢复默认热点配置。
+
+*** 读写性能
+我使用curl工具测试了一下文件下载和上传的性能。测试时我的电脑和移动存储离wifi路由器的距离都不远，且这款路由器号称支持wifi 6+，路由器的速度应该不是瓶颈。我通过预取数据的方法优化了文件下载速度，文件下载平均速度为470kb/秒，比优化前的331kb/秒提升了一些。但上传速度还没有尝试优化，目前测试结果是154kb/秒。暂且看来esp32s3用于小文件的中转，速度还能接受，但是大文件速度就有点慢了。
+
+** 总结
+从零到一做一款产品，实在是一件不容易的事情，需要解决很多问题。以后再遇到难用的产品，可能会换位思考一下，少吐槽两句。软件应该就是这样了，下一阶段我会继续优化硬件设计，将移动存储做得轻薄纤巧，可以方便地放在口袋里，走到哪服务到哪。
+
+** 链接
+1. esp32s3_file_server - https://github.com/paul356/esp32s3_file_server

_posts/2025-02-26-mobile-storage-http.md

@@ -0,0 +1,95 @@
+---
+layout: default
+title: 一种基于ESP32丰富连接能力的移动存储设备 -- 改用HTTP协议
+tags: [ESP-IDF, ESP32, SDMMC，HTTP]
+nav_order: {{ page.date }}
+sync_wexin: 1
+---
+
+
+# 一种基于ESP32丰富连接能力的移动存储设备 – 改用HTTP协议
+
+
+## 前言
+
+在测试了端到端的读性能之后，我发现了一个难以解决的问题，就是在ESP32S3上运行基于Rust的异步框架的WebDAV有点小马拉大车的感觉，下载文件的速度大约在十几KB左右，而且还需要扩展SPIRAM才能满足程序的内存需求。因为SPIRAM比其内建的RAM速度缓慢，导致性能更差。另外我也不想自己从头实现一个WebDAV服务器，所以我调整了思路，改在ESP32S3上运行更加轻巧的HTTP服务。本文介绍这个最终方案。
+
+因为怀疑上个版本PCB会导致SDMMC和SPIRAM有冲突，我做了一版新的PCB。但其实是ESP-IDF的软件问题，因为新PCB也会有出现疑似SDMMC和SPIRAM冲突的问题。最新的ESP-IDF 5.3已经修复了这个问题，重新安装ESP-IDF 5.3的最新版本就可以解决SDMMC和SPIRAM冲突的问题。我还是做了一些修改，包括改了SD卡的位置。还增加了两个按钮，对应的GPIO口是IO8和IO18。给LED的尾部加了两个孔，可以安装两个铜柱来支撑LED。贴好片的新PCB外观如下。
+
+![img](/images/esp32s3-storage-pcb-v2.jpg)
+
+本系列其他文章
+
+1.  [一种基于ESP32丰富连接能力的的移动存储设备](https://paul356.github.io/2024/10/31/mobile-storage.html)
+2.  [一种基于esp32丰富连接能力的移动存储设备 – 电路设计](https://paul356.github.io/2024/12/12/mobile-storage-pcb.html)
+3.  [一种基于esp32丰富连接能力的移动存储设备 – 测试sd卡读写](https://paul356.github.io/2024/12/27/mobile-storage-sd-card-test.html)
+4.  [一种基于esp32丰富连接能力的移动存储设备 – 验证屏幕显示](https://paul356.github.io/2025/01/06/mobile-storage-display.html)
+5.  [一种基于ESP32丰富连接能力的移动存储设备 – 测试TF卡读写速度](https://paul356.github.io/2025/02/07/mobile-storage-speed.html)
+
+
+## 基于HTTP的存储服务的工作原理
+
+移动存储通过WiFi协议接入本地局域网，并且运行HTTP服务器提供网页服务，局域网内的设备可以访问存储设备提供的主页。主页上显示的是SD卡上的数据列表，用户可以通过网页下载、上传、删除文件，也可以创建和切换文件目录。
+
+使用HTTP协议的原因是考虑HTTP没有状态，不需要很复杂的解析流程，对于ESP32S3这样的嵌入式处理器也能高效处理，所以整体的性能应该还能让人接受。
+
+
+## 软件设计
+
+移动存储的软件主要包含三个部分：设备配置管理、HTTP请求处理、前端页面。本项目的最终代码可以在[esp32s3\_file\_server](https://github.com/paul356/esp32s3_file_server)仓库中下载。
+
+
+### 设备配置管理
+
+设备配置管理完成esp32s3硬件的配置，包含wifi配置的修改和恢复、挂载存储设备、监测按钮操作、显示屏的初始化等。这个部分主要就是初始化各个硬件模块，并提供接口给http请求处理部分调用，并将修改值保存到nvs鍵值存储中。这个部分的代码主要包含源文件 `main.c` 和components目录下的模块。
+
+
+### http请求处理
+
+http请求处理是网页应用的后台处理程序，处理具体的http请求，包括下列请求：
+
+1.  获取给定目录下的文件和目录列表
+2.  获取指定路径的文件
+3.  删除指定的文件或目录
+4.  创建新目录
+5.  上传文件
+6.  查询wifi配置
+7.  修改wifi配置
+8.  获取前端网页文件
+
+这些请求会在用户访问主页时触发，http服务器将请求处理的结果返回给主页，主页根据结果刷新页面内容。http请求处理的代码位于源文件 `esp32s3_file_server.c` 中。
+
+
+### 前端页面
+
+前端页面使用vue.js开发，是一个单页面应用，包含两个视图： `fileexplorer` 和 `config` 。 `fileexplorer` 服务于用户的文件操作。 `config` 目前用于修改wifi配置。代码在web目录下，通过 `npm run build` 命令生成最终的网页文件。由于这是我第一个使用vue.js，可能代码写得比较乱，有啥问题欢迎给我提issue。
+
+
+## 使用说明
+
+简单介绍一下如何通过网页使用移动存储服务。
+
+
+### 文件操作
+
+![img](/images/esp32s3-http-web.jpg) 文件操作主要通过 `fileexplorer` 视图，试图主要分为三个部分，在图中被标上了三个红色的矩形。矩形1中是当前目录的全路径，其中每一级目录都是一个按钮，可以点击其中一个目录返回上级目录。矩形2是当前目录中的文件和目录列表，可以通过下载和删除按钮来对某一个文件进行操作，还可以选择进入一个子目录。矩形3包含了一个创建目录的表单和上传文件的表单，用户可以在当前目录中创建子目录和上传新文件。
+
+
+### 设备配置
+
+![img](/images/esp32s3-http-web-config.jpg) 移动存储提供一个默认热点，第一次使用时用户先连接这个热点，然后通过配置视图修改移动存储的网络配置。通过输入无线局域网的ssid和密码，移动存储就可以接入无线局域网。当网络配置错误或者无线局域网的密码被修改时，可以按一下io8对应的按钮来恢复默认热点配置。
+
+
+### 读写性能
+
+我使用curl工具测试了一下文件下载和上传的性能。测试时我的电脑和移动存储离wifi路由器的距离都不远，且这款路由器号称支持wifi 6+，路由器的速度应该不是瓶颈。我通过预取数据的方法优化了文件下载速度，文件下载平均速度为470kb/秒，比优化前的331kb/秒提升了一些。但上传速度还没有尝试优化，目前测试结果是154kb/秒。暂且看来esp32s3用于小文件的中转，速度还能接受，但是大文件速度就有点慢了。
+
+
+## 总结
+
+从零到一做一款产品，实在是一件不容易的事情，需要解决很多问题。以后再遇到难用的产品，可能会换位思考一下，少吐槽两句。软件应该就是这样了，下一阶段我会继续优化硬件设计，将移动存储做得轻薄纤巧，可以方便地放在口袋里，走到哪服务到哪。
+
+
+## 链接
+
+1.  esp32s3\_file\_server - <https://github.com/paul356/esp32s3_file_server>