当前位置： 首页 > news >正文

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

news 文章来源：https://blog.csdn.net/m0_59802969/article/details/143061713 2024/11/27 1:38:37

一利用此程序的思路就可以用浏览器显示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>

相关文章：

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

一利用此程序的思路就可以用浏览器显示esp32 采集的各种传感器的数据&#xff0c;也可以去控制各种传感器。省去编写针对各系统的app. 图片 1.浏览器每隔1秒更新一次数据 2.现在更新的是开机数据&#xff0c;运用此程序&#xff0c;可以实时显示各种传感器的实时数据 3.es…...

编程日记 2024/10/25 16:32:53

【亚马逊云】基于 Amazon EKS 搭建开源向量数据库 Milvus

文章目录 一、先决条件1.1 安装AWS CLI ✅1.2 安装 EKS 相关工具✅1.3 创建 Amazon S3 存储桶✅1.4 创建 Amazon MSK 实例✅ 二、创建EKS集群三、创建 ebs-sc StorageClass四、安装 AWS Load Balancer Controller五、部署 Milvus 数据库5.1 添加 Milvus Helm 仓库5.2 配置 S3 作…...

编程日记 2024/10/25 16:31:51

pytorch安装GPU版本，指定设备

安装了GPU版本的pytorch的时候&#xff0c;想要使用CPU&#xff0c;怎么操作呢&#xff1f; 设置环境变量&#xff1a; set TF_FORCE_GPU_ALLOW_GROWTHfalse set CUDA_VISIBLE_DEVICES如果想要使用固定序号的GUP设备&#xff0c;则指定ID set CUDA_VISIBLE_DEVICES0 # 使用第…...

编程日记 2024/10/25 16:30:50

草地杂草数据集野外草地数据集田间野草数据集YOLO格式VOC格式目标检测计算机视觉数据集

一、数据集概述 数据集名称&#xff1a;杂草图像数据集 数据集是一个包含野草种类的集合&#xff0c;其中每种野草都有详细的特征描述和标记。这些数据可以包括野草的图片、生长习性、叶片形状、颜色等特征。 1.1可能应用的领域 农业领域: 农业专家和农民可以利用这一数据集来…...

编程日记 2024/10/25 16:27:46

顺序表排序相关算法题|负数移到正数前面|奇数移到偶数前面|小于x的数移到大于x的数前面|快排思想(C)

负数移到正数前面 已知顺序表 ( a 1 , … , a n ) (a_{1},\dots,a_{n}) (a1​,…,an​)&#xff0c;每个元素都是整数&#xff0c;把所有值为负数的元素移到全部正数值元素前边 算法思想 快排的前后指针版本 排序|冒泡排序|快速排序|霍尔版本|挖坑版本|前后指针版本|非递归版…...

编程日记 2024/10/25 16:26:45

【小白学机器学习20】单变量分析 / 0因子分析 (只分析1个变量本身的数据)

目录 1 什么是单变量分析&#xff08;就是只分析数据本身&#xff09; 1.1 不同的名字 1.2 《戏说统计》这本书里很多概念和一般的书不一样 1.3 具体来说&#xff0c;各种概率分布都属于单变量分析 2 一维的数据分析的几个层次 2.1 数据分析的层次 2.2 一维的数据为什么…...

编程日记 2024/10/25 16:25:44

[软件工程]—桥接（Brige）模式与伪码推导

桥接&#xff08;Brige&#xff09;模式与伪码推导 1.基本概念 1.1 动机 由于某些类型的固有的实现逻辑&#xff0c;使它们具有两个变化的维度&#xff0c;乃至多个维度的变化。如何应对这种“多维度的变化”&#xff1f;如何利用面向对象技术是的类型可以轻松的沿着两个乃至…...

编程日记 2024/10/25 16:23:39

TensorFlow面试整理-TensorFlow 结构与组件

TensorFlow 的结构和组件是其功能强大、灵活性高的重要原因。掌握这些结构和组件有助于更好地理解和使用 TensorFlow 构建、训练和部署模型。以下是 TensorFlow 关键的结构与组件介绍： 1. Tensor（张量） 定义：张量是 TensorFlow 中的数据载体，类似于多维数组或矩阵。张量的…...

编程日记 2024/10/25 16:21:37

linux下gpio模拟spi三线时序

目录 前言一、配置内容二、驱动代码实现三、总结 前言 本笔记总结linux下使用gpio模拟spi时序的方法&#xff0c;基于arm64架构的一个SOC&#xff0c;linux内核版本为linux5.10.xxx&#xff0c;以驱动三线spi(时钟线sclk&#xff0c;片选cs&#xff0c;sdata数据读和写使用同一…...

编程日记 2024/10/25 16:20:35

makesense导出的压缩包是空的

md ,那些教程感觉都不是人写的&#xff0c;没说要在右边选标签&#xff0c;我本来就是一个标签&#xff0c;我以为他会自动识别打标&#xff0c;结果死活导出来空包 密码要在右边选标签&#xff0c;...

编程日记 2024/10/25 16:19:32

Spring Boot框架下的中小企业设备维护系统

5系统详细实现 5.1 用户信息管理 中小企业设备管理系统的系统管理员可以对用户信息添加修改删除以及查询操作。具体界面的展示如图5.1所示。 图5.1 用户信息管理界面 5.2 员工信息管理 管理员可以对员工信息进行添加修改删除操作。具体界面如图5.2所示。 图5.2 员工信息界面…...

编程日记 2024/10/25 16:18:31

处理文件上传和进度条的显示（进度条随文件上传进度值变化）

成品效果图&#xff1a; 解决问题&#xff1a;上传文件过大时&#xff0c;等待时间过长&#xff0c;但是进度条却不会动&#xff0c;只会在上传完成之后才会显示上传完成 上传文件的upload.component.html <nz-modal [(nzVisible)]"isVisible" [nzTitle]"文…...

编程日记 2024/10/25 16:16:29

【套题】大沥2019年真题——第5题

05.魔术数组 题目描述 一个 N 行 N 列的二维数组&#xff0c;如果它满足如下的特性&#xff0c;则成为“魔术数组”&#xff1a; 1、从二维数组任意选出 N 个整数。 2、选出的 N 个整数都是在不同的行且在不同的列。 3、在满足上述两个条件下&#xff0c;任意选出来的 N 个整…...

编程日记 2024/10/25 16:15:28

上传Gitee仓库流程图

推荐一个流程图工具 登录 | ProcessOnProcessOn是一个在线协作绘图平台&#xff0c;为用户提供强大、易用的作图工具&#xff01;支持在线创作流程图、思维导图、组织结构图、网络拓扑图、BPMN、UML图、UI界面原型设计、iOS界面原型设计等。同时依托于互联网实现了人与人之间的…...

编程日记 2024/10/25 16:14:26

二叉树相关OJ题 — 第一弹

目录 1. 检验两棵树是否相同 ​编辑 1. 题目解析 2. 解题步骤 2.判断一棵大树中是否包含有和一棵小树具有相同结构和节点值的子树 1. 题目解析 2. 解题步骤 3. 翻转二叉树 1. 题目解析 2.解题步骤 4. 判断一颗二叉树是否是平衡二叉树 1. 题目解析 2. 解题步骤…...

编程日记 2024/10/25 16:13:23

【学习笔记】RFID

RFID 1、 概述 1.1、RFID 介绍 1.2、RFID 发展史 1.3、RFID 系统的构造 1.3.1、阅读器 Reader 和 天线 Antenna 1.3.3、电子标签 tag 1.4、电子标签按吐字率分类 1.5、电子标签按能量供应的方式划分 1.6、RFID 工作流程 …...

编程日记 2024/10/25 16:12:22

自动化部署-01-jenkins安装

文章目录 前言一、下载安装二、启动三、问题3.1 jdk版本问题3.2 端口冲突3.3 库文件加载问题3.4 系统字体配置问题 四、再次启动五、配置jenkins5.1 解锁5.2 安装插件5.3 创建管理员用户5.4 实例配置5.5 开始使用5.6 完成 总结 前言 spingcloud微服务等每次部署到服务器上&…...

编程日记 2024/10/25 16:11:21

AI工具大爆发，建议每个都使用收藏

2024年被誉为AI应用元年&#xff0c;这一年人们普遍意识到&#xff0c;未来占据主导地位的将是基于大模型的应用程序&#xff0c;而不仅仅是大模型本身。因此&#xff0c;在这一趋势的推动下&#xff0c;各式各样的AI应用如雨后春笋般涌现出来。 今天就聊聊这些好用的AI工具&a…...

编程日记 2024/10/25 16:10:19

Mybatis之参数处理

在MyBatis中&#xff0c;参数处理是非常关键的部分&#xff0c;它负责将传入的参数正确映射到SQL语句中 单个简单类型参数 简单类型对于mybatis来说都是可以自动类型识别的&#xff1a; 也就是说对于mybatis来说&#xff0c;它是可以自动推断出ps.setXxxx()方法的。ps.setSt…...

编程日记 2024/10/25 16:09:18

windows内核探索--打印windows的GDT表(全局描述符表)

x86 #include <windows.h> #include<stdio.h> #include "x86struct.h" void PrintSegmentDescriptor(ULONG64* sd, WORD Count); SegmentSelector GetSegmentSelector(USHORT Selector); int main() {printf("0环cs段寄存器 ");GetSegmentSel…...

编程日记 2024/10/25 16:08:15

【ChatGPT】让ChatGPT帮助进行头脑风暴与创意生成

让ChatGPT帮助进行头脑风暴与创意生成 在日常工作和生活中&#xff0c;创意和头脑风暴是解决问题、创新和推动项目的关键步骤。ChatGPT&#xff0c;作为一个强大的语言模型&#xff0c;不仅可以提供信息和答案&#xff0c;还可以成为强大的头脑风暴工具&#xff0c;帮助用户快…...

编程日记 2024/10/25 16:07:13

大数据处理随堂测试

HDFS MapReduce HBase Spark...

编程日记 2024/10/25 16:06:12

2024最新pycharm安装教程及基本使用（超详细，新手小白必看）

文章目录 前言一、官网下载二、安装步骤三、使用示范四、番外篇&#xff08;汉&#xff09;大纲 PythonPyCharm安装包领取方式戳‘这块里’ 前言 一、官网下载 1. 进入pycharm官网&#xff0c;点击下载 PyCharm: The Python IDE for data science and web development by J…...

编程日记 2024/10/25 16:05:10

三国杀钓鱼自动化

三国杀钓鱼脚本 前言 本来是想做必杀的&#xff0c;但是后来测试了大约400钓发现纯靠连点没有漏掉的鱼&#xff0c;所以必杀功能就舍弃了。 我pyinstaller打包后运行.exe居然黑屏了&#xff1f;&#xff1f;&#xff1f;可能是多进程报错处理没写好&#xff0c;反正还是用vsc…...

编程日记 2024/10/25 16:03:08

在pycharm中使用sqllite

在pycharm中使用sqllite sqllite 简介 SQLite 是一个开源的、轻量级的、关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;它设计用于嵌入到应用程序中&#xff0c;并且可以在无需外部服务器进程的情况下运行。SQLite 提供了完整的 SQL 语言支持&#xff0c;允…...

编程日记 2024/10/25 16:01:05

Linux——文件操作

前言 1&#xff09;在Linux下面&#xff0c;一切皆文件&#xff0c;文件文件内容文件属性 2&#xff09;在访问文件是&#xff0c;都得先将文件打开&#xff0c;修改文件的本质其实还是通过执行代码的形式修改。 3&#xff09;文件是被进程打开的&#xff0c;一个进程可以打…...

编程日记 2024/10/25 15:57:59

数据结构 ——— 数组栈oj题：有效括号

目录 题目要求 代码实现 题目要求 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭合。 每…...

编程日记 2024/10/25 15:55:57

Character AI被起诉！14岁青少年自杀，AI陪伴何去何从

终于&#xff0c;AI在青少年心理问题方面&#xff0c;被推上了风口浪尖。 最近&#xff0c;美国佛罗里达州&#xff0c;一名14岁男孩Sewell Setzer的父母控告Character AI公司&#xff0c;声称孩子沉迷该公司的AI聊天机器人&#xff0c;最后走上了自杀的道路。 跟AI聊天还能致…...

编程日记 2024/10/25 15:53:55

CSS3 动画相关属性实例大全（三)（columns、filter、flex、flex-basis 、flex-grow、flex-shrink属性）

CSS3 动画相关属性实例大全&#xff08;三) &#xff08;columns、filter、flex、flex-basis 、flex-grow、flex-shrink属性&#xff09; 本文目录&#xff1a; 一、columns属性&#xff08;设置元素的列宽和列数&#xff09; 二、filter属性&#xff08;调整图像、背景和边…...

编程日记 2024/10/25 15:52:54

中国最厉害的思想家改名大师颜廷利:以诚信为基，塑企业信誉

跨文化融合&#xff0c;共筑包容性文化殿堂。尊重差异&#xff0c;促进团队合作&#xff0c;以诚信为基&#xff0c;塑企业信誉。融合《升命学说》智慧&#xff0c;推动员工多元化&#xff0c;践行社会责任&#xff0c;树立良好形象。创新不息&#xff0c;持续学习&#xff0c;…...

编程日记 2024/10/25 15:51:52

济南软件优化网站/口碑营销方案

这篇文章主要介绍了pygame开发&#xff0c;通过本文&#xff0c;您可以使用pygame开发一个马赛逻辑小游戏~有需要的朋友可以借鉴参考下&#xff0c;希望能够有所帮助 一、游戏简介 马赛逻辑&#xff0c;是一个类似数独和扫雷的逻辑小游戏&#xff0c;根据棋盘周围的数据提示点…...

编程日记 2024/11/27 1:27:34

学做包子馒头的网站/可以营销的十大产品

读写分离 何为读写分离&#xff1f; 见名思意&#xff0c;根据读写分离的名字&#xff0c;我们就可以知道&#xff1a;读写分离主要是为了将对数据库的读写操作分散到不同的数据库节点上。 这样的话&#xff0c;就能够小幅提升写性能&#xff0c;大幅提升读性能。 我简单画了…...

编程日记 2024/11/26 23:31:27

网站开发的后台技术/商丘优化公司

scratch3.0中我们通过添加“朗读文字”扩展便可以编写程序&#xff0c;将文字朗读出来。那么如何编程&#xff0c;让Python将文字转成语音并读出来&#xff1f;方法比较多&#xff0c;我们在此先介绍一种(利用系统内置语音引擎实现发音)&#xff0c;其他方法大家可以网上找到答…...

编程日记 2024/11/26 22:34:58

成都手工活外发加工网/宁波优化网站哪家好

Web Service 的创建简单编码、发布和部署 上一篇详细概述了WebService的创建&#xff0c;编码&#xff0c;发布和部署&#xff0c;那么作为客户端的程序如何访问远程端的WebService 接下来看一下具体步骤&#xff1a; C#winForm调用WebService的远程接口 创建一个WebService工程…...

编程日记 2024/11/26 22:00:41

佛山营销网站建设服务/竞价网络推广外包

此笔记出自《深入理解java虚拟机 第二版》&#xff0c;仅做摘要整理&#xff0c;详细了解可购买相关书籍。 图片扎堆&#xff0c;一是为了让文字更加紧凑&#xff0c;二是为了学习完文字知识后能单纯看图回顾&#xff0c;及时复习&#xff0c;三是增加不同类型之间对比。 三连问…...

编程日记 2024/11/26 21:33:30

浏阳市政府门户网站/东莞好的网站国外站建设价格

Linux应用 编程深入 语言编程标准C程序设计七---经典C11程序设计 以下内容为阅读&#xff1a; 《标准C程序设计》&#xff08;第7版&#xff09; 作者&#xff1a;E. Balagurusamy&#xff08;印&#xff09;&#xff0c; 李周芳译 清华大学出版社…...

编程日记 2024/11/26 20:30:54