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

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

图片

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();  // 
	
	//  NVS
	esp_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);
	
	//  WiFi
	ESP_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());  //  WiFi
	
	ESP_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控制ds3231
    ESP_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>