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