ESP32-Web-Server ESP-IDF 开发系列介绍

已于 2023-12-11 19:02:22 修改
阅读量746 收藏 5
点赞数 1
分类专栏： ESP-Web开发 ESP 文章标签： 前端 物联网 iot html 服务器
于 2023-10-17 19:58:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangyx1234/article/details/133246944
版权

介绍

使用 ESP-IDF 在ESP32上构建 HTTP Web 服务器或 WebSocket Web 服务器。
带你玩转物联网小项目开发系列之～玩转 Web server 开发。

Web 的优势

Web 通过网页提供物联网项目的人机交互界面。

Web 是最便宜的无线“UI”。仅仅通过电脑或者手机上的浏览器就可以立即打开一个人机交互界面。

即便在没有浏览器的平台上，你仍然可以通过一些工具，如 wget、cURL 来从 esp32 web 服务器上下载一些文件或者数据。

学习内容

学习使用 ESP32 建立一个 web 访问框架。

学习 HTML、CSS、JavaScript 和 Websocket 和 HTTP协议。

学习一些重要的 web 技术，如SSE（Server-Sent Events）、AJAX（Asynchronous JavaScript and XML）、文件系统。

掌握典型的物联网应用，如通过网页控制物联网设备、通过网页显示传感器的数据、通过网页进行配网、通过网页进行 OTA、登录授权、通过网页传输文件、图片等。

了解技术细节、知其然知其所以然，物联网 DIY 开发人员必备技能。

使用说明

1.基于ESP-IDF v4.4 开发环境。
2.主要编程语言为 C 语言，适合嵌入式、物联网开发工程师快速上手。
3.分为三个部分：基

了解本专栏 订阅专栏 解锁全文 超级会员免费看
物联网老王
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
ESP32网络开发实例-WebSocket服务器
视觉与物联智能
10-10 1282
在本文中，将介绍如何使用 WebSocket 通信协议通过 ESP32 构建 Web 服务器。 例如，我们将向介绍如何构建网页以远程控制 ESP32 输出。 输出状态显示在网页上，并在所有客户端中自动更新。
使用ESP32建立WebSocket服务器
最新发布
qq_38334677的博客
06-15 1015
本文详细介绍了如何使用ESP32建立WebSocket服务器，包括WiFi连接、WebSocket服务器的实现和测试方法。通过这些示例代码和测试方法，读者可以轻松实现一个功能完整的WebSocket服务器，并将其应用于各种物联网项目中。ESP32作为一款功能强大的物联网芯片，结合WebSocket技术，可以实现低延迟、双向通信的实时应用。希望本文能为读者提供有益的参考，帮助大家更好地利用ESP32开发高效的物联网应用。
ESP8266的Web配网+强制门户
04-11
ESP8266的Web配网+强制门户源码ESP8266的Web配网+强制门户源码ESP8266的Web配网+强制门户源码
【ESP32 WiFi篇（六）】ESP32 WebSocket
K3169的博客
01-30 3798
WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议），它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的。
ESP32WebSocket
bytechip的博客
12-15 2703
这个实验的功能演示 ESP32WebSocket 的使用方法。 这个实验的代码为工程“4_8_wifi_WebSocket”目录。 4.8.1. 实验内容 (1) 学习 Websocket 原理和工作过程 4.8.2. WebSocket 简介 WebSocket 是一种网络通信协议，是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的 协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。 在 WebSocket API 中，浏览器和服务
ESP32构建简单WebServer服务器
delete_you的博客
06-15 3125
ESP32搭设webserver服务器 实现打开简单的网页
ESP32 官方文档（一）关于 ESP-IDF 编程的一些说明
热门推荐
InfiniteYuan
07-22 1万+
关于ESP-IDF编程的一些说明 应用启动流程 本说明解释了在调用 ESP-IDF 应用程序的 app_main 函数之前发生的各种步骤。 启动过程的高级视图如下： 1. ROM 中的第一阶段引导程序将第二阶段引导程序映像从闪存偏移量 0x1000 加载到 RAM（ IRAM 和 DRAM ）。 2. 第二阶段引导程序从闪存中加载分区表和主应用程序映像。主应用程序包含 RAM 段...
ESP32-web-server
05-22
ESP32-web-server项目是基于ESP32微控制器利用Visual Studio Code（VScode）和ESP-IDF框架构建的一个集成Web服务器和WebSocket服务器的实例。ESP32是一款强大的、低功耗的微控制器，广泛应用于物联网(IoT)项目，因为...
esp32-Simple-http-server:基本的HTTP服务器能够使用esp-idf和freertos接收HTTP请求
05-12
该服务器使用ESP32的（ESP-IDF）入门这些说明将为您提供在本地计算机上运行并运行的项目的副本，以进行开发和测试。先决条件您需要什么东西来安装软件以及如何安装它们工具链最新的ESP-IDF 跑步编译之前，您应该先...
ESP32-S3搭建外网可访问的网络摄像头（内网穿透）
09-05
请参见：https://blog.csdn.net/m0_38106923/article/details/132679738 ESP32-S3搭建外网可访问的网络摄像头（内网穿透），Arduino IDE开发环境 项目代码可直接编译运行~
ESP32 HttpServer模式下 本地OTA 例程（基于ESP-IDF类似Arduino下OTAWebUpdater例程）
05-17
支持AP模式下与STA模式下的本地局域网OTA功能（不需要OTA服务器）。 demo包含： 1. wifi连接初始化（包括AP模式和STA模式） 2. OTA服务器（端口89）：包含固件上传页面URI、POST文件接收URI、当前固件信息查询URI ...
Homekit：带有Arduino框架的ESP32的Homekit
01-28
该应用程序将ESP32上的Apple Homekit暴露于温度和湿度等传感器。 不需要其他桥梁，例如 ！ 它基于构建，并使用作为组件。 为了同时暴露不同的传感器，使用了插件系统。 一个插件可以 将多个传感器（例如温度探头）...
micropython基础入门（esp32/esp8266单片机开发）
08-08
2022 / 01/ 30: 新版esptool 刷micropython固件指令不是 esptool.py cmd... 而是 esptool cmd... 即可;另外rshell 在 >= python 3.10 的时候出错解决方法可以查看:  已于2022年发布的: 第二章：修复rshell在python3.10出错 免费内容： https://edu.csdn.net/course/detail/29666 micropython语法和python3一样,编写起来非常方便。如果你快速入门单片机玩物联网而且像轻松实现各种功能，那绝力推荐使用micropython。方便易懂易学。 同时如果你懂C语音，也可以用C写好函数并编译进micropython固件里然后进入micropython调用（非必须）。 能通过WIFI联网(2.1章)，也能通过sim卡使用2G/3G/4G/5G联网（4.5章）。 为实现语音控制，本教程会教大家使用tensorflow利用神经网络训练自己的语音模型并应用。为实现通过网页控制，本教程会教大家linux(debian10 nginx->uwsgi->python3->postgresql)网站前后台入门。为记录单片机传输过来的数据， 本教程会教大家入门数据库。  本教程会通过通俗易懂的比喻来讲解各种原理与思路，并手把手编写程序来实现各项功能。 本教程micropython版本是 2019年6月发布的1.11； 更多内容请看视频列表。  学习这门课程之前你需要至少掌握: 1: python3基础（变量, 循环, 函数, 常用库, 常用方法）。 本视频使用到的零件与淘宝上大致价格:     1: 超声波传感器(3)     2: MAX9814麦克风放大模块(8)     3: DHT22(15)     4: LED(0.1)     5: 8路5V低电平触发继电器(12)     6: HX1838红外接收模块(2)     7：红外发射管(0.1)，HX1838红外接收板(1)     other: 电表, 排线, 面包板(2)*2,ESP32(28)  
ESP32 IDF开发 应用篇⑳ WebSocket
lu330274924的博客
11-15 1345
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。这里介绍大部分Websocket库的使用更详细的请参考：更多API 参考esp-idf\components\esp_websocket_client\include\esp_websocket_client.hWebsocket API和http API的封装类似使用起来也似曾相识。跟esp_http_client主要是对esp_websocket_client_config_t结构体的操作。
基于ESP32的简易web服务器
xitianqu的博客
01-05 3854
基于ESP32的简易异步web服务器。
基于ESP32CAM实现WebSocket服务器实时点灯
niruxi0401的博客
06-01 4992
使用现在最流行的WebSocket技术在ESP32CAM上构建一个Websocket服务器实时响应浏览器客户端的请求，实现实时点灯，这次客户端再也不用发送get或者post请求响应了
ESP32系列四：搭建http的webserver的服务器
挨踢农民的博客
03-05 4994
最近在使用ESP32搭建web服务器测试，发现esp32搭建这类开发环境还是比较方便的。具体的http协议这里就不再赘述，我们主要说一下如何使用ESP32提供的API来搭建我们的http web。一、web服务器搭建过程1、配置web服务器在中，Web服务器使用httpd组件实现。我们需要先创建httpd_config_t结构体，指定服务器的端口、最大并发连接数、URI匹配处理器等选项。然后，我们通过调用httpd_start函数来启动Web服务器。
ESP32-Web-Server编程- WebSocket 编程
wangyx1234的博客
11-27 1765
1）本节主要是介绍在 ESP32 上实现 WebSocket 服务器。相比 HTTP 协议，WebSocket 通信协议除了可以双向通信、并且向多个客户端同时发送通知信息外，还可以提供持久连接，并且由于没有为每个请求重新建立连接的开销，因此延迟较低。
esp32-cam示例代码解读
05-20
ESP32-CAM是一款集成了ESP32和摄像头的开发板，它可以用于物联网、机器视觉、智能家居等领域的开发。下面我将对ESP32-CAM的示例代码进行解读。 首先，我们需要了解示例代码的主要功能。该示例代码可以让ESP32-CAM将拍摄到的图像传输到Web服务器上，并通过Web页面查看实时图像。该示例代码分为两个部分：ESP32-CAM端和Web服务器端。 ESP32-CAM端代码： 该部分代码主要有以下几个功能： 1. 初始化摄像头 ``` #include "esp_camera.h" camera_config_t config; esp_err_t camera_init(){ config.ledc_channel = LEDC_CHANNEL_0; config.ledc_timer = LEDC_TIMER_0; config.pin_d0 = Y2_GPIO_NUM; config.pin_d1 = Y3_GPIO_NUM; config.pin_d2 = Y4_GPIO_NUM; config.pin_d3 = Y5_GPIO_NUM; config.pin_d4 = Y6_GPIO_NUM; config.pin_d5 = Y7_GPIO_NUM; config.pin_d6 = Y8_GPIO_NUM; config.pin_d7 = Y9_GPIO_NUM; config.pin_xclk = XCLK_GPIO_NUM; config.pin_pclk = PCLK_GPIO_NUM; config.pin_vsync = VSYNC_GPIO_NUM; config.pin_href = HREF_GPIO_NUM; config.pin_sscb_sda = SIOD_GPIO_NUM; config.pin_sscb_scl = SIOC_GPIO_NUM; config.pin_pwdn = PWDN_GPIO_NUM; config.pin_reset = RESET_GPIO_NUM; config.xclk_freq_hz = 20000000; config.pixel_format = PIXFORMAT_JPEG; if(psramFound()){ config.frame_size = FRAMESIZE_UXGA; config.jpeg_quality = 10; config.fb_count = 2; } else { config.frame_size = FRAMESIZE_SVGA; config.jpeg_quality = 12; config.fb_count = 1; } return esp_camera_init(&config); } ``` 该函数使用ESP-IDF的相机库来初始化摄像头，并设置相机的参数。 2. 开启服务器 ``` esp_err_t stream_httpd_start(void){ httpd_handle_t server = NULL; httpd_config_t config = HTTPD_DEFAULT_CONFIG(); config.server_port = 80; httpd_uri_t index_uri = { .uri = "/", .method = HTTP_GET, .handler = stream_handler, .user_ctx = NULL }; httpd_uri_t capture_uri = { .uri = "/capture", .method = HTTP_GET, .handler = capture_handler, .user_ctx = NULL }; if (httpd_start(&server, &config) == ESP_OK) { httpd_register_uri_handler(server, &index_uri); httpd_register_uri_handler(server, &capture_uri); return ESP_OK; } return ESP_FAIL; } ``` 该函数使用ESP-IDF的HTTP服务器库开启服务器，并注册了两个URI处理器：/和/capture。其中，/处理器用于显示实时图像，/capture处理器用于获取当前图像并保存到SD卡中。 3. 图像处理 ``` esp_err_t capture(){ camera_fb_t * fb = NULL; esp_err_t res = ESP_OK; fb = esp_camera_fb_get(); if (!fb) { ESP_LOGE(TAG, "Camera capture failed"); return ESP_FAIL; } res = esp_camera_fb_return(fb); if (res != ESP_OK) { ESP_LOGE(TAG, "Camera capture failed"); return ESP_FAIL; } return ESP_OK; } ``` 该函数使用ESP-IDF的相机库获取当前图像，并将其保存到SD卡中。 Web服务器端代码： 该部分代码主要有以下几个功能： 1. 显示实时图像 ``` static esp_err_t stream_handler(httpd_req_t *req){ httpd_resp_set_type(req, "text/html"); httpd_resp_set_hdr(req, "Content-Encoding", "identity"); httpd_resp_send(req, (const char *) index_ov2640_html_gz_start, index_ov2640_html_gz_end - index_ov2640_html_gz_start); return ESP_OK; } ``` 该函数用于显示实时图像。它使用HTTP响应对象将HTML代码发送给客户端，客户端可以在Web页面上查看实时图像。 2. 获取当前图像 ``` static esp_err_t capture_handler(httpd_req_t *req){ esp_err_t res = ESP_OK; res = capture(); if (res == ESP_OK) { httpd_resp_set_type(req, "application/octet-stream"); httpd_resp_set_hdr(req, "Content-Disposition", "inline; filename=capture.jpg"); httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*"); camera_fb_t * fb = esp_camera_fb_get(); if (!fb) { ESP_LOGE(TAG, "Camera capture failed"); return ESP_FAIL; } res = httpd_resp_send(req, (const char *) fb->buf, fb->len); esp_camera_fb_return(fb); } else { httpd_resp_send_500(req); } return res; } ``` 该函数用于获取当前图像并将其发送回客户端。它使用HTTP响应对象将JPEG图像数据发送给客户端，客户端可以将其保存到本地设备上。 以上就是ESP32-CAM示例代码的主要功能及其实现原理。除此之外，还有一些辅助函数和宏定义，可以在示例代码中查看。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

物联网老王

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值