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

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

news 2025/12/14 19:07:29

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

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2025/12/10 2:57:55

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

编程新知 2025/12/10 10:18:18

智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

编程新知 2025/12/9 2:34:32

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2025/12/9 1:56:21

Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

编程新知 2025/10/31 21:54:15

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

编程新知 2025/12/14 14:08:57

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

编程新知 2025/12/14 14:26:01

Go 语言并发编程基础：无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

编程新知 2025/9/13 17:45:05

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

编程新知 2025/10/17 22:08:13

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...

编程新知 2025/12/7 21:13:39