浏览器实时更新esp32-c3 Supermini http server 数据

一利用此程序的思路就可以用浏览器显示esp32 采集的各种传感器的数据,也可以去控制各种传感器。省去编写针对各系统的app.  

图片

48d7489c9574460e9ba59f463d9abc31.jpg

1.浏览器每隔1秒更新一次数据

2.现在更新的是开机数据,运用此程序,可以实时显示各种传感器的实时数据

3.esp32 服务器代码


#include <string.h>
#include "freertos/FreeRTOS.h"
#include "freertos/event_groups.h"
#include "esp_wifi.h"
#include "esp_event.h"
#include "esp_log.h"
#include "nvs_flash.h"
#include "esp_http_server.h"
#include "esp_timer.h"// WiFi 
#define WIFI_SSID "ChinaNet-AETP5V"
#define WIFI_PASS "wf123456"static EventGroupHandle_t s_wifi_event_group;
static const int WIFI_CONNECTED_BIT = BIT0;
static const char *TAG = "WiFi_HTTP";
static  uint64_t n;
// 
static void event_handler(void* arg, esp_event_base_t event_base, int32_t event_id, void* event_data) {if (event_base == WIFI_EVENT && event_id == WIFI_EVENT_STA_START) {esp_wifi_connect();  // } else if (event_base == WIFI_EVENT && event_id == WIFI_EVENT_STA_DISCONNECTED) {esp_wifi_connect();  // ESP_LOGI(TAG, "...");} else if (event_base == IP_EVENT && event_id == IP_EVENT_STA_GOT_IP) {ip_event_got_ip_t* event = (ip_event_got_ip_t*) event_data;ESP_LOGI(TAG, "IP: " IPSTR, IP2STR(&event->ip_info.ip));xEventGroupSetBits(s_wifi_event_group, WIFI_CONNECTED_BIT);  // λ}
}// WiFi 
void wifi_init_sta(void) {s_wifi_event_group = xEventGroupCreate();  // //  NVSesp_err_t ret = nvs_flash_init();if (ret == ESP_ERR_NVS_NO_FREE_PAGES || ret == ESP_ERR_NVS_NEW_VERSION_FOUND) {ESP_ERROR_CHECK(nvs_flash_erase());ret = nvs_flash_init();}ESP_ERROR_CHECK(ret);//  WiFiESP_ERROR_CHECK(esp_netif_init());ESP_ERROR_CHECK(esp_event_loop_create_default());esp_netif_create_default_wifi_sta();wifi_init_config_t cfg = WIFI_INIT_CONFIG_DEFAULT();ESP_ERROR_CHECK(esp_wifi_init(&cfg));ESP_ERROR_CHECK(esp_event_handler_instance_register(WIFI_EVENT, ESP_EVENT_ANY_ID, &event_handler, NULL, NULL));ESP_ERROR_CHECK(esp_event_handler_instance_register(IP_EVENT, IP_EVENT_STA_GOT_IP, &event_handler, NULL, NULL));//  WiFi wifi_config_t wifi_config = {.sta = {.ssid = WIFI_SSID,.password = WIFI_PASS,},};ESP_ERROR_CHECK(esp_wifi_set_mode(WIFI_MODE_STA));  // ESP_ERROR_CHECK(esp_wifi_set_config(ESP_IF_WIFI_STA, &wifi_config));ESP_ERROR_CHECK(esp_wifi_start());  //  WiFiESP_LOGI(TAG, "WiFi ");
}// 浏览器向esp32 GET信息
esp_err_t hello_get_handler(httpd_req_t *req) {ESP_LOGI(TAG, "Requested URI: %s", req->uri);     //显示浏览器向esp32 http server 发送的信息   可以把uri的信息提取出来 控制esp32 如uri中有ds3231  则esp32控制ds3231ESP_LOGI(TAG, "Requested Method: %s", http_method_str(req->method));ESP_LOGI(TAG, "Requested URI: %d", req->content_len);n=esp_timer_get_time();   //esp32 从开机到运行此命令的时间(微秒)char resp_str[21]; // uint64_t 的最大长度是 20 位,加上结尾的 null 字符snprintf(resp_str, sizeof(resp_str), "%llu", n);    // 使用 snprintf 将 uint64_t 转换为字符串httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*"); // 允许所有来源,此条非常重要httpd_resp_set_type(req, "text/plain");httpd_resp_send(req, resp_str, HTTPD_RESP_USE_STRLEN);      //esp32 向浏览器发送return ESP_OK;
}//  URI 
httpd_uri_t hello = {.uri = "/time",.method = HTTP_GET,.handler = hello_get_handler,.user_ctx = NULL 
};//  HTTP 
static httpd_handle_t start_webserver(void) {httpd_config_t config = HTTPD_DEFAULT_CONFIG();httpd_handle_t server = NULL;if (httpd_start(&server, &config) == ESP_OK) {httpd_register_uri_handler(server, &hello);  // }return server;
}void app_main(void) {//  WiFi wifi_init_sta();//  WiFi EventBits_t bits = xEventGroupWaitBits(s_wifi_event_group, WIFI_CONNECTED_BIT, pdFALSE, pdTRUE, portMAX_DELAY);if (bits & WIFI_CONNECTED_BIT) {ESP_LOGI(TAG, "WiFi ok");//  HTTP start_webserver();} else {ESP_LOGI(TAG, "WiFi no");}
}

4.浏览器代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ESP32 Time</title><script>function fetchTime() {fetch('http://192.168.101.40/time') // 替换为你的服务器地址.then(response => response.text()).then(data => {document.getElementById('wz').innerText = data;}).catch(error => console.error('Error fetching time:', error));}// 每1秒调用 fetchTime 函数setInterval(fetchTime, 1000);</script>
</head>
<body><h1> ESP32 开机时间:</h1><div id="wz">Waiting ...</div>
</body>
</html>

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

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

相关文章

鸿蒙网络编程系列27-HTTPS服务端证书的四种校验方式示例

1. 服务端数字证书验证的问题 在鸿蒙客户端对服务端发起HTTPS请求时&#xff0c;如果使用HttpRequest的request发起请求&#xff0c;那么就存在服务端数字证书的验证问题&#xff0c;你只有两个选择&#xff0c;一个是使用系统的CA&#xff0c;一个是使用自己选定的CA&#xf…

C++初阶

目录 一.命名空间 1.命名空间定义 2.命名空间使用 二.C输入&输出 三.缺省参数 四. 函数重载 五.引用 1.常引用 2.传值、传引用效率比较 3.引用和指针的区别 4.引用和指针的不同点: 小知识点: 六.内联函数 七.auto关键字(C11) 1.auto的使用细则 八.基于范围…

【Spring声明式事务失效的12种场景测试】

文章目录 一.Spring声明式事务是什么&#xff1f;二.Spring事务失效的12种场景1.访问权限问题 小结 一.Spring声明式事务是什么&#xff1f; Spring声明式事务是一种通过配置的方式管理事务的方法&#xff0c;它通过注解或XML配置来声明哪些方法需要事务管理&#xff0c;从而将…

杨氏矩阵(有一个数字矩阵,矩阵的每行从左到右的递增的,矩阵从上到下是递增的请编写一个程序,在这样的矩阵中查找某个数字是否存在)

//杨氏矩阵 //有一个数字矩阵&#xff0c;矩阵的每行从左到右的递增的&#xff0c;矩阵从上到下是递增的 //请编写一个程序&#xff0c;在这样的矩阵中查找某个数字是否存在 // 1 2 3 // 4 5 6 // 7 8 9 #include<stdio.h> int main() {int a[3][3] { 0 };int i 0, j …

数据库管理-第252期 深入浅出多主多活数据库技术- Cantian存储引擎(二)(20241017)

数据库管理252期 2024-10-17 数据库管理-第252期 深入浅出多主多活数据库技术- Cantian存储引擎&#xff08;二&#xff09;&#xff08;20241017&#xff09;1 部署规划2 服务器基础配置2.1 配置HOSTS2.2 关闭防火墙2.3 关闭SELinux2.4 配置yum源 3 编译服务器配置3.1 安装git…

Vue Google 广告的配置

前置条件&#xff1a;已经在Google AdSense 中 添加网站 并通过审核 同时已创建广告单元。 因 VUE 的 Script 配置问题&#xff0c;所以不能直接拷贝内容。 index.html 配置 添加 Google 广告的脚本。 //index.template.html /* * 在head标签中添加 script 【 **** 】&#…

网络变压器在PCIe网口应用的案例

PCIe&#xff08;Peripheral Component Interconnect Express&#xff09;是一种高速串行计算机总线标准&#xff0c;用于连接计算机主板上的设备&#xff0c;如显卡、网络适配器、存储控制器等。H82422S 网络变压器&#xff08;Ethernet Transformer&#xff09;&#xff0c;在…

SSM框架学习(七、MyBatis-Plus高级用法:最优化持久层开发)

目录 一、MyBatis-Plus快速入门 1.简介 2.快速入门 二、MyBatis-Plus核心功能 1.基于Mapper接口CRUD &#xff08;1&#xff09;Insert 方法 &#xff08;2&#xff09;Delete方法 &#xff08;3&#xff09;Update 方法 &#xff08;4&#xff09;Select方法 2.基于Serv…

使用LangGraph构建多Agent系统架构!

0 前言 Agent是一个使用大语言模型决定应用程序控制流的系统。随着这些系统的开发&#xff0c;它们随时间推移变得复杂&#xff0c;使管理和扩展更困难。如你可能会遇到&#xff1a; Agent拥有太多的工具可供使用&#xff0c;对接下来应该调用哪个工具做出糟糕决策上下文过于…

重塑企业数字化未来:物联网与微服务架构的战略性深度融合

从物联网到微服务架构的战略价值解读 随着全球数字化转型的不断加速&#xff0c;企业需要重新审视其技术基础架构&#xff0c;以适应日益复杂的业务需求和市场变化。物联网&#xff08;IoT&#xff09;作为核心技术&#xff0c;已广泛应用于制造、农业、交通、医疗等各个行业&…

Qt 支持打包成安卓

1. 打开维护Qt&#xff0c;双击MaintenanceTool.exe 2.登陆进去,默认是添加或移除组件&#xff0c;点击下一步&#xff0c; 勾选Android, 点击下一步 3.更新安装中 4.进度100%&#xff0c;完成安装&#xff0c;重启。 5.打开 Qt Creator&#xff0c;编辑-》Preferences... 6.进…

比亚迪车机安装第三方应用教程

比亚迪车机安装第三方应用教程 比亚迪车机U盘安装APP&#xff0c; 无论是dlink3.0还是4.0都是安卓系统&#xff0c;因此理论上安卓应用是都可以安装的&#xff0c;主要就是横屏和竖屏的区别。在比亚迪上安装软件我主要推荐两种方法。 第一种&#xff0c;直接从电脑端下载安装布…

(01)fastapi的基础学习——开启学习之路

前言 性能极高&#xff0c;可与 NodeJS, Go 媲美。(得益于Starlette和Pydantic)。 Starlette 是一个轻量级 ASGI 框架/工具包。它非常适合用来构建高性能的 asyncio 服务&#xff0c;并支持 HTTP 和 WebSockets。 官方网址&#xff1a;Starlette Pydantic 是一个使用Python…

摇人摇人, JD内推岗位(社招+校招)

摇人摇人, 有找工作的家人们看过来啊~ 虚位以待, 快到碗里来 算法开发工程师岗 京东云 北京|T7, 5-10年 岗位职责&#xff1a; 参与基于RAG知识库平台和ChatBI产品打造和商业化落地&#xff0c;进行相关技术&#xff1a;包括OCR、文档拆分、意图理解、多轮对话、NL2SQL、Embed…

idea删除git历史提交记录

前言&#xff1a;此文章是我在实际工作中有效解决问题的方法&#xff0c;做记录的同时也供大家参考&#xff01; 一、 首先&#xff0c;通过idea的终端或系统的cmd控制台&#xff0c;进入到你的项目文件根目录&#xff0c;idea终端默认就是项目根目录。 二、确保你当前处于要删…

Bluetooth Channel Sounding中关于CS Step及Phase Based Ranging相应Mode介绍

目录 BLE CS中Step定义 BLE CS中交互的数据包/波形格式 BLE CS中Step的不同Mode BLE CS中Step的执行过程 Mode0介绍 Mode0 步骤的作用 Mode0步骤的执行过程 Mode0步骤的执行时间 Mode0步骤的时间精度要求 Mode2介绍 Mode2步骤的作用和执行过程 Mode2步骤的执行时间 B…

Vue3 集成Monaco Editor编辑器

Vue3 集成Monaco Editor编辑器 1. 安装依赖2. 使用3. 效果 Monaco Editor &#xff08;官方链接 https://microsoft.github.io/monaco-editor/&#xff09;是一个由微软开发的功能强大的在线代码编辑器&#xff0c;被广泛应用于各种 Web 开发场景中。以下是对 Monaco Editor 的…

Linux 阻塞和非阻塞 IO 实验

阻塞和非阻塞 IO 是 Linux 驱动开发里面很常见的两种设备访问模式&#xff0c;在编写驱动的时候一定要考虑到阻塞和非阻塞。本章我们就来学习一下阻塞和非阻塞 IO&#xff0c;以及如何在驱动程序中处理阻塞与非阻塞&#xff0c;如何在驱动程序使用等待队列和 poll 机制。 阻塞和…

【机器学习】聚类算法|KMeans实现流程|SSE误差平法和|SC轮廓系数法|顾客数据聚类分析案例

文章目录 聚类算法聚类算法简介聚类算法分类 聚类算法API案例 使用KMeans模型数据探索聚类 KMeans实现流程***模型评估方法误差平方和 SSE(The sum of squares due to error)“肘”方法 (Elbow method) - K值确定 SC轮廓系数法&#xff08;Silhouette Coefficient&#xff09;聚…

微服务--OpenFeign【重点】

如果哪天 我们硬编码写的接口变了&#xff0c;只要写过该接口的 都要改&#xff0c;太麻烦了&#xff0c; 所以 就用 OpenFeign 来解决这个麻烦 了解&#xff1a; SimpleClientHttpRequestFactory和 HttpComponentsClientHttpRequestFactory 都是Spring框架中用于创建ClientH…