esp32开发与应用（项目2- 网页设备控制）

原创已于 2026-06-19 18:16:18 修改 · 191 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#嵌入式硬件 #服务器

于 2026-06-19 11:42:37 首次发布

esp32开发与应用专栏收录该内容

48 篇文章

订阅专栏

前面我们介绍过，esp32可以配置为wifi station模式，当然wifi也可以配置为ap模式。并且很多时候，默认状态下都是配置为ap模式，只有ap下输入用户名和密码之后，才好进入station模式，和pc处于同一个网段。但是不管是那种模式，我们利用网络的目的，都是为了控制设备，这是我们的初衷。

1、先配置为ap模式

配置为ap模式，主要就是设定一下ssid名称和密码。注意这个ssid，是将来pc需要去连接的ssid，密码则是对应的密码。一般情况下，密码为8位即可，当让这一点也可以修改。

2、再配置http server

ap模式设置好了，只是代表我们可以连接上设备的wifi了。两者如果需要通信的话，最简单的方式就是http server。这种情况下，一般需要启动http server、构建静态网页、注册回调函数。

3、最简单的模块控制

一开始的时候，模块控制这部分可以从最简单的gpio开始，比如说led on、led off等等。等到后期慢慢熟练了，再做一些其他的功能，比如参数设定、参数标定、命令发送等等。

4、修改CMakeLists.txt

本身esp32开启ap、httpserver的时候，需要依赖很多第三方库。所以用之前最好在CMakeLists.txt把这些第三方库都加进来，这样有利于后面的编译工作，

idf_component_register(SRCS "main.c" 
                    INCLUDE_DIRS "."
                    REQUIRES esp_wifi esp_event esp_netif esp_http_server nvs_flash  driver)

5、准备ai编程

这里ai编程的内容就稍微多了一点，所以描述的时候，可以这样写，

esp-idf编写一个网页端控制led的程序。程序开启wifi，ap模式，默认ip是192.168.4.1。浏览器输入ip后，出来一个网页，网页有两个按钮，一个led on，一个led off。按下led on，d23输出高电平，按下led off，d23输出低电平。

不出意外的话，就可以得到这样的代码，

#include <stdio.h>
#include <string.h>
#include "freertos/FreeRTOS.h"
#include "freertos/task.h"
#include "freertos/event_groups.h"
#include "esp_system.h"
#include "esp_wifi.h"
#include "esp_event.h"
#include "esp_log.h"
#include "nvs_flash.h"
#include "esp_netif.h"
#include "esp_http_server.h"
#include "driver/gpio.h"
#include "esp_mac.h"

#define EXAMPLE_ESP_WIFI_SSID      "ESP32_LED_AP"
#define EXAMPLE_ESP_WIFI_PASS      "12345678"
#define EXAMPLE_MAX_STA_CONN       5
#define LED_GPIO                   23

static const char *TAG = "LED_WEB_SERVER";

const char* index_html = 
"<!DOCTYPE html>"
"<html>"
"<head>"
"  <meta charset='UTF-8'>"
"  <meta name='viewport' content='width=device-width, initial-scale=1'>"
"  <title>ESP32 LED Control</title>"
"  <style>"
"    body { font-family: Arial; text-align: center; margin-top: 50px; }"
"    .btn { padding: 15px 30px; font-size: 20px; margin: 10px; border: none; border-radius: 10px; color: white; cursor: pointer; }"
"    .btn-on { background-color: #4CAF50; }"
"    .btn-off { background-color: #f44336; }"
"  </style>"
"</head>"
"<body>"
"  <h1>ESP32 LED Web Control</h1>"
"  <p>GPIO 23</p>"
"  <button class='btn btn-on' onclick=\"fetch('/led/on')\">LED ON</button>"
"  <button class='btn btn-off' onclick=\"fetch('/led/off')\">LED OFF</button>"
"</body>"
"</html>";

static esp_err_t root_get_handler(httpd_req_t *req) 
{
    httpd_resp_set_type(req, "text/html");
    httpd_resp_send(req, index_html, strlen(index_html));
    return ESP_OK;
}

static esp_err_t led_on_handler(httpd_req_t *req)
{
    gpio_set_level(LED_GPIO, 1);
    ESP_LOGI(TAG, "LED ON");
    httpd_resp_sendstr(req, "LED ON");
    return ESP_OK;
}

static esp_err_t led_off_handler(httpd_req_t *req)
{
    gpio_set_level(LED_GPIO, 0);
    ESP_LOGI(TAG, "LED OFF");
    httpd_resp_sendstr(req, "LED OFF");
    return ESP_OK;
}

static httpd_handle_t start_webserver(void)
{
    httpd_handle_t server = NULL;
    httpd_config_t config = HTTPD_DEFAULT_CONFIG();
    config.max_uri_handlers = 8;

    if (httpd_start(&server, &config) == ESP_OK) {
        ESP_LOGI(TAG, "HTTP server started");

        httpd_uri_t uri_root = {
            .uri       = "/",
            .method    = HTTP_GET,
            .handler   = root_get_handler,
            .user_ctx  = NULL
        };
        httpd_register_uri_handler(server, &uri_root);

        httpd_uri_t uri_on = {
            .uri       = "/led/on",
            .method    = HTTP_GET,
            .handler   = led_on_handler,
            .user_ctx  = NULL
        };
        httpd_register_uri_handler(server, &uri_on);

        httpd_uri_t uri_off = {
            .uri       = "/led/off",
            .method    = HTTP_GET,
            .handler   = led_off_handler,
            .user_ctx  = NULL
        };
        httpd_register_uri_handler(server, &uri_off);

        return server;
    } else {
        ESP_LOGI(TAG, "Failed to start HTTP server");
        return NULL;
    }
}

static void wifi_event_handler(void* arg, esp_event_base_t event_base,\
                                int32_t event_id, void* event_data) 
{
    if (event_id == WIFI_EVENT_AP_STACONNECTED) {
        wifi_event_ap_staconnected_t* event = (wifi_event_ap_staconnected_t*) event_data;

        ESP_LOGI(TAG, "Station " 
                 "%02x:%02x:%02x:%02x:%02x:%02x joined, AID=%d", 
                 event->mac[0], event->mac[1], event->mac[2],
                 event->mac[3], event->mac[4], event->mac[5],
                 event->aid);
    }
    else if (event_id == WIFI_EVENT_AP_STADISCONNECTED)
    {
        wifi_event_ap_stadisconnected_t* event = (wifi_event_ap_stadisconnected_t*) event_data;

        ESP_LOGI(TAG, "Station " 
                 "%02x:%02x:%02x:%02x:%02x:%02x left, AID=%d", 
                 event->mac[0], event->mac[1], event->mac[2],
                 event->mac[3], event->mac[4], event->mac[5],
                 event->aid);
    }
}

static void wifi_init_softap(void)
{
    esp_netif_create_default_wifi_ap();

    wifi_init_config_t cfg = WIFI_INIT_CONFIG_DEFAULT();
    ESP_ERROR_CHECK(esp_wifi_init(&cfg));

    ESP_ERROR_CHECK(esp_event_handler_register(WIFI_EVENT, ESP_EVENT_ANY_ID, &wifi_event_handler, NULL));

    wifi_config_t wifi_config = {
        .ap = {
            .ssid = EXAMPLE_ESP_WIFI_SSID,
            .ssid_len = strlen(EXAMPLE_ESP_WIFI_SSID),
            .password = EXAMPLE_ESP_WIFI_PASS,
            .max_connection = EXAMPLE_MAX_STA_CONN,
            .authmode = WIFI_AUTH_WPA_WPA2_PSK
        },
    };
    if (strlen(EXAMPLE_ESP_WIFI_PASS) == 0) {
        wifi_config.ap.authmode = WIFI_AUTH_OPEN;
    }

    ESP_ERROR_CHECK(esp_wifi_set_mode(WIFI_MODE_AP));
    ESP_ERROR_CHECK(esp_wifi_set_config(WIFI_IF_AP, &wifi_config));
    ESP_ERROR_CHECK(esp_wifi_start());

    ESP_LOGI(TAG, "WiFi AP started. SSID: %s, IP: 192.168.4.1", EXAMPLE_ESP_WIFI_SSID);
}

void app_main(void)
{
    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);

    gpio_reset_pin(LED_GPIO);
    gpio_set_direction(LED_GPIO, GPIO_MODE_OUTPUT);
    gpio_set_level(LED_GPIO, 0);

    ESP_ERROR_CHECK(esp_netif_init());
    ESP_ERROR_CHECK(esp_event_loop_create_default());

    wifi_init_softap();
    start_webserver();

    ESP_LOGI(TAG, "System ready. Connect to Wi-Fi and open http://192.168.4.1");
}