ESP32-Web-Server编程-建立第一个网页

ESP32-Web-Server编程-建立第一个网页

HTTP 简述

可能你每天都要刷几个短视频，打开几个网页来娱乐一番。当你打开一个网络上的视频或者图片时，其实际发生了下面的流程：

在这里插入图片描述

其中客户端就是你的浏览器啦，服务器就是远程一个存放视频或者图片的电脑啦。他们之间传输数据时需要一个约定的标准，就像两个设备约定共同用一种语言说话一样，目前使用较多的就是 HTTP协议啦。

本系列博客基于乐鑫最流行的开源 ESP-IDF 开发环境。ESP-IDF 中 HTTP Server 组件提供了在 ESP32 上运行轻量级 Web 服务器的功能。

HTTP 的基础的方法

http 1.0定义了3种方法：GET，POST，HEAD

http 1.1新增了6种方法：PUT，DELETE，Options，Trace，Connect，Patch

作为新手，我们主要理解两种方法 GET、POST 方法就可以了。

  • GET 方法：GET方法用于使用给定的URI从给定服务器中检索信息，即从指定资源中请求数据。使用GET方法的请求应该只是检索数据，不应对数据产生其他影响。相当与从服务器接收数据。

  • POST方法：用于将数据发送到服务器以创建或更新资源。POST请求永远不会被缓存，且对数据长度没有限制；我们无法从浏览器历史记录中查找到POST请求。目前，几乎所有的提交操作都是通过该方法完成。相当于向服务器发送数据。

HTTP 的 URL、URI

服务器上的文件资源很多，访问哪个资源？用 URI\URL 来指定要访问的资源。

URI = Universal Resource Identifier 统一资源标志符，用来标识抽象或物理资源的一个紧凑字符串。

URL = Universal Resource Locator 统一资源定位符，一种定位资源的主要访问机制的字符串，一个标准的URL必须包括：protocol、host、port、path、parameter、anchor。 一个典型的 URL 标识：

协议://主机[:端口]URI

举个栗子先大致理解下他们的含义就可以了，随着学习的深入大家会慢慢理解的更多的。

https://www.baidu.com:8080/iot-wang/readme.html?user=xmh&id=1#test
通过解析上述 URL 可以得到各部分的值如下所示。

协议：https。也可以是 ftp、tftp
服务器主机域名：www.baidu.com
服务器端口号：8080
要查询的目标资源路径：/iot-wang/readme.html
客户端传递给服务器的附带参数：? 号开始后的内容，即 user=xmh&id=1，多个参数之间用 & 标识。
目标资源中可能有多个可以访问的资源，比如一个文章有多个段落，指定更详细的段落参数：# 号后的内容，即 test，也可以使用 & 连接多个锚点。

HTTP 的返回码

打开网页时显示 404？使用手机或者电脑的童鞋可能遇到过这种情况。

客户端发起一个请求后，服务器可以返回一个数字代表此次请求是否成功。数字 200 代表此次通信成功，其他数字代表此次通信有点问题：

（1）1xx（提示信息）

1xx 类状态码属于提示信息，是协议处理中的一种中间状态，实际用到的比较少。

（2）2xx（正确）

2xx 类状态码表示服务器成功处理了客户端的请求，常见的有：

「200 OK」是最常见的成功状态码，表示一切正常。如果是非 HEAD 请求，服务器返回的响应头都会有 body 数据。

「204 No Content」也是常见的成功状态码，与 200 OK 基本相同，但响应头没有 body 数据。

（3）3xx（重定向）

3xx 类状态码表示客户端请求的资源发送了变动，需要客户端用新的 URL 重新发送请求获取资源，也就是重定向。

「301 Moved Permanently」表示永久重定向，说明请求的资源已经不存在了，需改用新的 URL 再次访问。

「302 Moved Permanently」表示临时重定向，说明请求的资源还在，但暂时需要用另一个 URL 来访问。

「304 Not Modified」不具有跳转的含义，表示资源未修改，重定向已存在的缓冲文件，也称缓存重定向，用于缓存控制。

301 和 302 都会在响应头里使用字段 Location，指明后续要跳转的 URL，浏览器会自动重定向新的 URL。

（4）4xx（客户端错误）

4xx 类状态码表示客户端发送的报文有误，服务器无法处理，也就是错误码的含义。

「400 Bad Request」表示客户端请求的报文有错误，但只是个笼统的错误。

「403 Forbidden」表示服务器禁止访问资源，并不是客户端的请求出错。

「404 Not Found」表示请求的资源在服务器上不存在或未找到，所以无法提供给客户端。

[408 Request Timeout]该响应状态码意味着服务器想要关闭这个未使用的连接。

（5）5xx（服务器错误）

5xx 类状态码表示客户端请求报文正确，但是服务器处理时内部发生了错误，属于服务器端的错误码。

「500 Internal Server Error」与 400 类型，是个笼统通用的错误码，服务器发生了什么错误，我们并不知道。

「501 Not Implemented」表示客户端请求的功能还不支持，类似“即将开业，敬请期待”的意思。

「502 Bad Gateway」通常是服务器作为网关或代理时返回的错误码，表示服务器自身工作正常，访问后端服务器发生了错误。

「503 Service Unavailable」表示服务器当前很忙，暂时无法响应服务器，类似“网络服务正忙，请稍后重试”的意思。

ESP32 上如何实现网页的发送

前端代码

前端代码负责呈现网页上的特效、网页的布局、图片、视频等内容。网站前端工程师的工作内容就是将美工设计的效果图的设计成浏览器可以运行的网页，并和后端开发工程师配合做网页的数据显示和交互。

在本系列课程中前端代码主要是HTML+CSS+JAVASCRIPT。

注意，服务器只是提供前端代码的设计文本，客户端如何解释（即显示）由客户端决定。

后端代码

后端代码就是网站的逻辑部分，主要是数据的处理，以及如何响应客户端的请求。比如客户端发起一个不支持的请求，后端代码经过判断会返回一个错误码。

在本系列课程中前端代码主要是C语言代码，感兴趣的也可以了解下可能涉及的数据库。

需求及功能解析

本节演示如何在 ESP32 上使用 wifi，并使用一个 html 文件。

示例解析

目录结构

├── CMakeLists.txt
├── main
│   ├── CMakeLists.txt
│   └── main.c                 User application
├── components
│   └── fs_image
		└── index.html
		└── ...
|	└── url_handlers
		└── url_handlers.c
		└── ...
└── README.md                  This is the file you are currently reading

  • 目录结构主要包含主目录 main，以及组件目录 components.

  • 其中组件目录components中包含了用于存储网页文件的 fs_image 目录（即前述前端文件），以及用于记录 ESP32 上接收来自服务器的请求，并作出响应的 url_handlers 目录（即后端文件）。如前所述，浏览器可以通过 URL 请求服务器端的资源（包括数据和文件），每个 URL 到来时都可以设计一个函数，来决定如何响应该 URL 请求，这便是 url_handlers 要完成的功能。

建立前后端代码

  1. 为了保存 html 文件以及图片文件到 ESP32 上，url_handlers 目录的 CMakeLists.txt 使用内嵌数据的方式将 fs_image目录的 index.html 和 favicon.ico 文件保存在 ESP32 中：（此外前端代码）

    idf_component_register(SRCS "url_handlers.c"
                    INCLUDE_DIRS "include"
                    PRIV_REQUIRES esp_http_server
                    EMBED_FILES "../fs_image/favicon.ico" "../fs_image/index.html")

  2. 为了在打开网页时显示 index.html 中的内容，在 url_handlers.c 中实现了 一个处理函数 index_html_get_handler()。这部分是后端代码。

    /* Handler to redirect incoming GET request for /index.html to /
 * This can be overridden by uploading file with same name */
static esp_err_t index_html_get_handler(httpd_req_t *req)
{
    extern const char html_start[] asm("_binary_index_html_start");
    extern const char html_end[]   asm("_binary_index_html_end");
    const size_t html_size = (html_end - html_start);
    httpd_resp_set_type(req, "text/html");
    /* Add file upload form and script which on execution sends a POST request to /upload */
    httpd_resp_send_chunk(req, (const char*) html_start, html_size);
    /* Respond with an empty chunk to signal HTTP response completion */
    return httpd_resp_send_chunk(req, NULL, 0);
}

  3. 在实现了 html 文件以及 对应的 handles 后，可以在 main.c 中注册对应的 handler:

    static httpd_handle_t start_webserver(void)
{
    httpd_handle_t server = NULL;
    httpd_config_t config = HTTPD_DEFAULT_CONFIG();
    config.lru_purge_enable = true;

    // Start the httpd server
    ESP_LOGI(TAG, "Starting server on port: '%d'", config.server_port);
    if (httpd_start(&server, &config) == ESP_OK) {
        // Set URI handlers
        ESP_LOGI(TAG, "Registering URI handlers");
        for (int i = 0; i < sizeof(httpd_uri_array) / sizeof(httpd_uri_t); i++) {
            if (httpd_register_uri_handler(server, &httpd_uri_array[i]) != ESP_OK) {
                ESP_LOGE(TAG, "httpd register uri_array[%d] fail", i);
            }
        }
        ESP_LOGI(TAG, "Success starting server!");
        return server;
    }

    ESP_LOGI(TAG, "Error starting server!");
    return NULL;
}

如此，当打开网页时，浏览器会自动请求名为 index.html 的文件，并显示其中的内容。

编译并烧录固件到设备中

1）在工程目录，打开配置菜单

idf.py menuconfig

主要是配置 wifi 连接的名称和密码：

在这里插入图片描述

2）编译烧录固件到设备中

idf.py -p PORT build flash monitor

(Replace PORT with the name of the serial port to use.)

(To exit the serial monitor, type Ctrl-].)

如果你是新手，请参考 Getting Started Guide 搭建编译环境。

3）网页显示

设备烧录固件后，启动该设备，从 log 中查看设备的 IP地址：

I (3288) app_wifi: got ip:192.168.47.100
I (3288) esp_netif_handlers: sta ip: 192.168.47.100, mask: 255.255.255.0, gw: 192.168.47.1
I (3288) example_main: Starting server on port: '80'
I (3298) example_main: Registering URI handlers
I (3298) example_main: Success starting server!

这里假设设备 IP 地址是 192.168.47.100.

让手机或者电脑与 ESP32 连接同一个路由器，然后打开手机或者电脑上电浏览器，输入上述IP地址，即可打开网页：

在这里插入图片描述

上述示例网页即是本例程 fs_images 目录的 index.html 文件在该浏览器中所程序的样子。

4）功能演示

本节主要是呈现一个网页给用户。

讨论

1）输入网址后，浏览器会自动请求 favicon.ico(即上述网页中第一行显示的图标)。

默认情况下，当请求一个网站的 “/” 目录内容时，会默认打开该目录的 index.html 文件。

同样的，默认情况下，浏览器会自动请求 "/"目录下的 favicon.ico 文件，用作网址栏的一个标识图像。

2）如何设计 index.html 文件中的内容，使之在网页上呈现合适的内容？

这正是本系列博客主要介绍的内容。以试验促进理解，在测试实践中学习，敬请参考后续章节。

总结

1）本节主要是介绍 HTTP 协议、Web 编程的基础知识，包括HTTP 的基础的方法；什么是 URL、URI；HTTP 的返回码；

2）本节还介绍了 ESP32 上 HTTP 编程的要点，包括如何建立前端、后端代码，它们如何相互作用以实现一个 Web 应用。

资源链接

1）ESP32-Web-Server ESP-IDF系列博客介绍
2）对应示例的 code 链接 （点击直达代码仓库）

3）下一篇：ESP32-Web-Server编程-HTML 基础

(码字不易感谢点赞或收藏)

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

openGauss学习笔记-133 openGauss 数据库运维-例行维护-日维护检查项

openGauss学习笔记-133 openGauss 数据库运维-例行维护-日维护检查项

文章目录 openGauss学习笔记-133 openGauss 数据库运维-例行维护-日维护检查项133.1 检查openGauss状态133.2 检查锁信息133.3 统计事件数据133.4 对象检查133.5 SQL报告检查133.6 备份133.7 基本信息检查 openGauss学习笔记-133 openGauss 数据库运维-例行维护-日维护检查项 …
阅读更多...
系列二十二、各种注解

系列二十二、各种注解

一、Import # 用法 1&#xff09;Import(User.class)&#xff1a;如果导入的是配置类&#xff0c;将会按照配置类正常解析&#xff0c;如果是个普通类就会解析成bean 2&#xff09;Import&#xff08;实现了ImportSelector接口的类.class&#xff09;&#xff1a;可以一次性注册…
阅读更多...
Linux 栈回溯

Linux 栈回溯

目录 前言一、什么是栈回溯&#xff1f;二、栈回溯的实现原理三、参考阅读 前言 日常工作中&#xff0c;我们在开发软件程序时&#xff0c;经常会遇到程序奔溃的问题&#xff0c;导致程序奔溃的原因有很多&#xff0c;我们一般都是定位到相关代码&#xff0c;再去查询具体原因。…
阅读更多...
FinOps和DevOps的未来会怎样？

FinOps和DevOps的未来会怎样？

FinOps&#xff08;或财务运营&#xff09;是一种文化实践&#xff0c;它将财务责任引入云的可变支出模型。这是一种将系统、最佳实践和文化相结合的战略方法&#xff0c;可提高组织了解云成本并做出明智决策的能力。 本质上&#xff0c;FinOps 是一个管理云运营费用&#xff…
阅读更多...
C++:OJ练习(每日练习系列)

C++:OJ练习(每日练习系列)

编程题&#xff1a; 题一&#xff1a;把字符串转换成整数 把字符串转换成整数_牛客题霸_牛客网 示例1 输入&#xff1a; "2147483647" 返回值&#xff1a; 2147483647思路一&#xff1a; 第一步&#xff1a;it从str的第一个字符开始遍历&#xff0c;定义一个最后输…
阅读更多...
使用 ChatGPT 创建 Makefile 构建系统：从 Docker 开始

使用 ChatGPT 创建 Makefile 构建系统：从 Docker 开始

使用 Docker 搭配 ChatGPT 创建 Makefile 构建系统 Makefile 构建系统是嵌入式软件团队实现其开发流程现代化的基础。构建系统不仅允许开发人员选择各种构建目标&#xff0c;还可以将这些构建集成到持续集成/持续部署 (CI/CD) 流程中。使用诸如 ChatGPT 这样的人工智能 (AI) 工…
阅读更多...
【docker】docker的基础命令

【docker】docker的基础命令

基础操作 docker info #查看docker的基本信息docker version #查看docker版本信息一、镜像操作 1、搜索镜像 docker search nginx2、下载镜像 docker pull nginx#从仓库中下载镜像&#xff0c;若没有指定标签&#xff0c;则下载最新的版本&#xff0c;也就是标签为: lat…
阅读更多...
使用opencv实现图像滤波

使用opencv实现图像滤波

1 图像滤波介绍 滤波是信号和图像处理中的基本任务之一&#xff0c;其旨在有选择地提取图像的某些特征&#xff0c;可以用于在给定应用程序的上下文中传达重要信息&#xff0c;例如&#xff0c;去除图像中的噪声、提取所需的视觉特征、图像重采样等。 1.1 图像滤波理论 图像…
阅读更多...
Matplotlib线形图的创建_Python数据分析与可视化

Matplotlib线形图的创建_Python数据分析与可视化

线形图的创建 绘制线形图设置颜色和风格设置坐标轴上下限设置图形标签 绘制线形图 在所有图形中&#xff0c;最简单的应该就是线性方程y f (x) 的可视化了。来看看如何创建这个简单的线形图。要画Matplotlib图形时&#xff0c;都需要先创建一个图形fig 和一个坐标轴ax。创建图…
阅读更多...
AI - Crowd Simulation(集群模拟)

AI - Crowd Simulation(集群模拟)

类似鱼群&#xff0c;鸟群这种群体运动模拟。 是Microscopic Models 微观模型&#xff0c;定义每一个个体的行为&#xff0c;然后合在一起。 主要是根据一定范围内族群其他对象的运动状态决定自己的运动状态 Cohesion 保证个体不会脱离群体 求物体一定半径范围内的其他临近物…
阅读更多...
深度学习回顾：七种网络

深度学习回顾：七种网络

一、说明 本文 揭开CNN、Seq2Seq、Faster R-CNN 和 PPO &#xff0c;以及transformer和humg-face— 编码和创新之路。对于此类编程的短小示例&#xff0c;用于对照观察&#xff0c;或做学习实验。 二、CNN网络示例 2.1 CNN用mnist数据集 CNN 专为图像处理而设计&#xff0c;包…
阅读更多...
idea创建不了spring2.X版本，无法使用JDK8，最低支持JDK17 ， 如何用idea创建spring2.X版本，使用JDK8解决方案

idea创建不了spring2.X版本，无法使用JDK8，最低支持JDK17 ， 如何用idea创建spring2.X版本，使用JDK8解决方案

&#x1f9f8;欢迎来到dream_ready的博客&#xff0c;&#x1f4dc;相信您对博主首页也很感兴趣o (ˉ▽ˉ&#xff1b;) &#x1f4dc;jdk17安装全方位手把手安装教程 / 已有jdk8了&#xff0c;安装JDK17后如何配置环境变量 / 多个不同版本的JDK&#xff0c;如何配置环境变量&a…
阅读更多...
FreeRTOS源码阅读笔记6--event_groups.c

FreeRTOS源码阅读笔记6--event_groups.c

通常用的事件标志组是一个32位的变量uxEventBits&#xff0c;可设置的位有24位&#xff0c;一共就是24 种事件。 事件组的结构体类型&#xff1a; 6.1创建事件组xEventGroupCreate() 6.1.1函数原型 返回值&#xff1a;事件组句柄&#xff0c;指向事件组。 6.1.2函数框架 ①…
阅读更多...
通过亚马逊云科技云存储服务探索云原生应用的威力

通过亚马逊云科技云存储服务探索云原生应用的威力

文章作者&#xff1a;Libai 欢迎来到我们关于“使用亚马逊云科技云存储服务构建云原生应用”的文章的第一部分。在本文中&#xff0c;我们将深入探讨云原生应用的世界&#xff0c;并探索亚马逊云科技云存储服务在构建和扩展这些应用中的关键作用。 亚马逊云科技开发者社区为开发…
阅读更多...
鸿蒙应用开发-初见：ArkUI

鸿蒙应用开发-初见：ArkUI

编程范式&#xff1a;命令式->声明式 以一个卡片的实现做下讲解 命令式 简单讲就是需要开发用代码一步一步进行布局&#xff0c;这个过程需要开发全程参与。 Objective-C UIView *cardView [[UIView alloc] init]; cardView.backgroundColor [UIColor whiteColor]; ca…
阅读更多...
[socket 弹 shell] msg_box3

[socket 弹 shell] msg_box3

前言 题目比较简单&#xff0c;没开 Canary 和 NX. Arch: amd64-64-littleRELRO: Full RELROStack: Canary foundNX: NX disabledPIE: PIE enabledRWX: Has RWX segments 漏洞利用与分析&#xff1a; 白给的函数调用&#xff0c;其中 ptr 10 是用…
阅读更多...
Elasticsearch启动失败问题汇总

Elasticsearch启动失败问题汇总

版本elasticsearch-8.11.1&#xff0c;解压安装完后&#xff0c;修改安装目录下conf/jvm.options&#xff0c; 默认配置如下&#xff1a; -Xms4g -Xmx4g 默认的配置占用内存太多了&#xff0c;调小一些&#xff1a; -Xms256m -Xmx256m由于es和jdk是一个强依赖的关系&#xff0…
阅读更多...
[黑马程序员SpringBoot2]——开发实用篇3

[黑马程序员SpringBoot2]——开发实用篇3

目录&#xff1a; jetcache远程缓存方案jetcache本地缓存方案jetcache方法缓存j2cache基本操作springboot整合quartz​​​​​​​springboot整合task发送简单邮件发送多部件邮件消息简介购物订单案例-发送短信ActiveMQ安装springboot整合ActiveMQRabbitMQ安装springboot整合…
阅读更多...
代理IP可以用于哪些实际场景？遇到问题如何解决

代理IP可以用于哪些实际场景？遇到问题如何解决

随着互联网的普及和网络应用的广泛使用&#xff0c;代理IP已成为许多人工作和生活中不可或缺的一部分。代理IP可以用于多种实际场景&#xff0c;并在遇到问题时提供有效的解决方案。下面将详细介绍代理IP的实际应用场景及遇到问题时的解决方法。 一、代理IP的实际应用场景 1. 网…
阅读更多...
C#，数值计算——插值和外推，径向基函数插值（RBF_interp）的计算方法与源程序

C#，数值计算——插值和外推，径向基函数插值（RBF_interp）的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// 径向基函数插值 /// Object for radial basis function interpolation using n points in dim /// dimensions.Call constructor once, then interp as many times as desir…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站