基于VSCode+ESP-IDF+ESP32-S3的Web服务器开发教程

基于VSCode+ESP-IDF+ESP32-S3的Web服务器开发教程

引用

CSDN

1.

https://blog.csdn.net/qq_43012692/article/details/141429407

本文将详细介绍如何基于VSCode+ESP-IDF+ESP32-S3开发Web服务器。主要内容包括工程建立与配置、文件夹结构设计、代码框架以及网页添加说明等。

Web服务器的开发

工程的建立与配置

• 新建文件夹：components\bsp， 这个文件夹主要用来存放相关外设驱动文件包括.c和.h文件。
  工程架构如下：
  
• 在左侧components\bsp目录下创建websocket文件夹。
• 在websocket文件夹中新建 web_server.c、web_server.h、html文件夹。
• 在html文件夹中主要是网页的相关代码。
  详细代码框架如下：
  其中：
• css文件夹主要用来保存.css文件—处理html网页的样式;
• images文件夹主要用来保存html网页中用到的图片；
• js文件夹主要用来保存所用到的JavaScript库和自定义的js文件；
• web_client.html就是我们的客户端网页主页-home。
• web_server.c和web_server.h就是我们的web服务器代码。

新建文件的添加

• 在components\bsp文件夹下面新建一个CMakeLists.txt文件。
  在文件夹中加入如下内容：
  其中：
• 头文件路径，指本目录下的所有代码驱动。
• 头文件路径，指本目录下的所有代码驱动。
• 设置依赖库
• 注册组件到构建系统的函数
• 设置特定组件编译选项的函数
  -ffast-math: 允许编译器进行某些可能减少数学运算精度的优化，以提高性能。
  -O3: 这是一个优化级别选项，指示编译器尽可能地进行高级优化以生成更高效的代码。
  -Wno-error=format: 这将编译器关于格式字符串不匹配的警告从错误降级为警告。
  -Wno-format: 这将完全禁用关于格式字符串的警告。

网页web_client.html的添加说明

1. web_client.html的路径添加为EMBED_FILES，如果设计的页面有图片，图片路径也要添加其中，用空格隔开。
   在工程中的文件相对路径如下：
   未完，继续。。。。。