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_serverEMBED_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 serverESP_LOGI(TAG, "Starting server on port: '%d'", config.server_port);if (httpd_start(&server, &config) == ESP_OK) {// Set URI handlersESP_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.rhkb.cn/news/204598.html

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

相关文章

【网络奇幻之旅】那年我与大数据的邂逅

【网络奇幻之旅】那年我与大数据的邂逅

&#x1f33a;个人主页&#xff1a;Dawn黎明开始 &#x1f380;系列专栏&#xff1a;网络奇幻之旅 ⭐每日一句&#xff1a;循梦而行&#xff0c;向阳而生 &#x1f4e2;欢迎大家&#xff1a;关注&#x1f50d;点赞&#x1f44d;评论&#x1f4dd;收藏⭐️ 文章目录 &#x1f4…
阅读更多...
Mysql的二阶段提交

Mysql的二阶段提交

先看执行器与InnoDB引擎是如何更新一条指定的数据的 可以看到&#xff0c;InnoDB在写redo log时&#xff0c;并不是一次性写完的&#xff0c;而有两个阶段&#xff0c;Prepare与Commit阶段&#xff0c;这就是"两阶段提交"的含义。 为什么要写redo log&#xff0c;不…
阅读更多...
win_sever系列：windows sever 2012R和windows sever 2016如何开启远程连接服务以及问题解决

win_sever系列：windows sever 2012R和windows sever 2016如何开启远程连接服务以及问题解决

windows sever 2012R和windows sever 2016如何开启远程连接服务以及问题解决 一. windows sever 2012R和windows sever 2016如何开启远程连接服务前言一、确保需要进行远程的两个服务器处于同一网段二、关闭防火墙三、需要把被远程的电脑的允许远程打开3.1打开windows sever 20…
阅读更多...
N8975A/安捷伦Agilent N8975A噪声系数分析仪

N8975A/安捷伦Agilent N8975A噪声系数分析仪

181/2461/8938产品概述N8975A是一款高性能噪声系数分析仪 用于进行快速、准确且可重复的噪声系统测量。 N8975A易用的特性能将复杂的测量简单化并让您获得值得信任的可重复且可靠的测量结果。 N8975A可同时提供噪声系数和增益测量&#xff0c;并可以多种格式查看、打印和保存…
阅读更多...
CCFCSP试题编号：202109-2试题名称：非零段划分

CCFCSP试题编号：202109-2试题名称：非零段划分

用差分法 #include<iostream> #include<algorithm> #include<cstring> using namespace std;const int N 500000; const int M 10000; int a[N 2 ] { 0 }; int d[M 1] { 0 };int main() {int n;cin >> n;for (int i 1; i < n; i){cin >&g…
阅读更多...
Android修行手册-溢出父布局的按钮实现点击

Android修行手册-溢出父布局的按钮实现点击

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…
阅读更多...
【vue】v-model在表单元素上的应用

【vue】v-model在表单元素上的应用

表单元素&#xff1a; https://blog.csdn.net/m0_67930426/article/details/134655644 使用模板 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head><body>&l…
阅读更多...
UDP实现群聊通信

UDP实现群聊通信

服务器端 #include <myhead.h> #define UDPIP "192.168.115.92" #define UDPPORT 6666 //存储客户信息的链表结构体 typedef struct Node {char name[20];struct sockaddr_in cin;struct Node *next; }*linklist; //数据结构体 struct data_cli {char type;ch…
阅读更多...
12.docker的网络-host模式

12.docker的网络-host模式

1.docker的host网络模式简介 host模式下&#xff0c;容器将不会虚拟出自己的网卡、配置IP等&#xff0c;而是使用宿主机的IP和端口&#xff1b;也就说&#xff0c;宿主机的就是我的。 2. 以host网络模式创建容器 2.1 创建容器 我们仍然以tomcat这个镜像来说明一下。我们以h…
阅读更多...
Ubuntu 22.03 LTS 安装deepin-terminal 实现 终端 分屏

Ubuntu 22.03 LTS 安装deepin-terminal 实现 终端 分屏

deepin-terminal 安装 源里面自带了这个软件&#xff0c;可以直接装 sudo apt install deepin-terminal 启动 按下Win键&#xff0c;输入deep即可快速检索出图标&#xff0c;点击启动 效果 分屏 CtrlShiftH 水平分割 CtrlShiftJ 垂直分割 最多分割成四个小窗口&#xff0…
阅读更多...
C语言数据结构之顺序表（上）

C语言数据结构之顺序表（上）

前言&#xff1a; ⭐️此篇博文主要分享博主在学习C语言的数据结构之顺序表的知识点时写的笔记&#xff0c;若有错误&#xff0c;还请佬指出&#xff0c;一定感谢&#xff01;制作不易&#xff0c;若觉得内容不错可以点赞&#x1f44d;收藏❤️&#xff0c;这是对博主最大的认可…
阅读更多...
基于C#实现并查集

基于C#实现并查集

一、场景 有时候我们会遇到这样的场景&#xff0c;比如:M{1,4,6,8},N{2,4,5,7}&#xff0c;我的需求就是判断{1,2}是否属于同一个集合&#xff0c;当然实现方法有很多&#xff0c;一般情况下&#xff0c;普通青年会做出 O(MN)的复杂度&#xff0c;那么有没有更轻量级的复杂度呢…
阅读更多...
完美解决k8s master节点无法ping node节点中的IP或Service NodePort的IP

完美解决k8s master节点无法ping node节点中的IP或Service NodePort的IP

1、问题一 使用搭建好了K8S集群&#xff0c;先是node节点加入k8s集群时&#xff0c;用的内网IP&#xff0c;导致master节点无法操作node节点中的pod&#xff08;这里的不能操作&#xff0c;指定是无法查看node节点中pod的日志、启动描述、无法进入pod内部&#xff0c;即 kubec…
阅读更多...
游戏开发引擎Cocos Creator和Unity如何对接广告-AdSet聚合广告平台

游戏开发引擎Cocos Creator和Unity如何对接广告-AdSet聚合广告平台

在游戏开发方面&#xff0c;游戏引擎的选择对开发过程和最终的产品质量有着重大的影响&#xff0c;Unity和Cocos是目前全球两大商用、通用交互内容开发工具&#xff0c;这两款引擎受到广泛关注&#xff0c;本文将从多个维度对两者进行比较&#xff0c;为开发者提供正确的选择建…
阅读更多...
SEO工具-免费功能最全的5款SEO工具

SEO工具-免费功能最全的5款SEO工具

随着互联网的蓬勃发展&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;已经成为许多企业和个人网站必备的关键技能。然而&#xff0c;对于初学者或者运营小型网站的人来说&#xff0c;使用专业的SEO工具可能涉及较高的成本。在这篇文章中&#xff0c;我们将向您推荐五款高…
阅读更多...
U4_2：图论之MST/Prim/Kruskal

U4_2：图论之MST/Prim/Kruskal

文章目录 一、最小生成树-MST生成MST策略一些定义 思路彩蛋 二、普里姆算法&#xff08;Prim算法&#xff09;思路算法流程数据存储分析 伪代码时间复杂度分析 三、克鲁斯卡尔算法&#xff08;Kruskal算法&#xff09;分析算法流程并查集-Find-set 伪代码时间复杂度分析 一、最…
阅读更多...
OpenWrt Lan口上网设置

OpenWrt Lan口上网设置

LAN口上网设置 连接上openwrt&#xff0c;我用的 倍控N5105&#xff0c;eth0&#xff0c;看到Openwrt的IP是10.0.0.1 在 网络 -> 网口配置 -> 设置好 WAN 口和 LAN 口 初次使用经常重置 openwrt 所以我设置的是 静态IP模式 - 网络 -> 防火墙 -> 常规设置 ->…
阅读更多...
IDEA2023版本创建Sping项目只能勾选17和21，却无法使用Java8？（已解决）

IDEA2023版本创建Sping项目只能勾选17和21，却无法使用Java8？（已解决）

方案&#xff1a;替换创建项目的源 我们只知道IDEA页面创建Spring项目&#xff0c;其实是访问spring initializr去创建项目。故我们可以通过阿里云国服去间接创建Spring项目。将https://start.spring.io/或者http://start.springboot.io/替换为 https://start.aliyun.com/
阅读更多...
什么是量子优势？

什么是量子优势？

量子优势是量子计算领域正在积极努力的里程碑&#xff0c;量子计算机可以解决最强大的非量子或经典计算机无法解决的问题。 量子是指原子和分子的尺度&#xff0c;在这个尺度上&#xff0c;我们所经历的物理定律被打破&#xff0c;并且应用了一组不同的、违反直觉的定律。量子…
阅读更多...
Linux——vim编辑文件时——.swp文件解决方案

Linux——vim编辑文件时——.swp文件解决方案

test.cpp样例 当我们vim test.cpp进入编辑文件。 却忘记了保存退出 再次进入就会出现一下画面 当你摁下Enter键位 出现以下几个选项 O——是只读不写 E——是正常打开文件但不会载入磁盘内容 R——覆盖——是加载存储磁盘的文件(当我们忘记保存时&#xff0c;系统会自动帮我…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023