Создание веб-сервера на базе ESP32 с помощью Arduino IDE (обновленное руководство 2026 года)
Он ESP32‘Встроенный Wi-Fi делает его идеальным микроконтроллером для создания автономных веб-серверов, позволяющих управлять устройствами из любого браузера. Это подробное руководство шаг за шагом покажет вам, как создать адаптивный веб-сервер с помощью Arduino IDE для управления такими выходами, как светодиоды или реле. Сервер работает в вашей локальной сети и доступен со смартфонов, планшетов или компьютеров. Обновленное для 2026 года, это руководство содержит полный код, пошаговое подключение и подробное объяснение принципа работы.

Обзор проекта: Ваша первая панель управления IoT
Этот проект преобразит ваш ESP32 в выделенный веб-сервер Система, обеспечивающая простой и удобный для мобильных устройств интерфейс. Вам предстоит создать систему, в которой:
-
К нему подключены два светодиода (представляющие любое выходное устройство). ESP32‘Контакты GPIO.
-
Он ESP32 Подключается к вашей локальной сети Wi-Fi.
-
Для доступа к странице управления необходимо ввести IP-адрес платы в любой веб-браузер.
-
Нажатие кнопок на веб-странице мгновенно включает или выключает подключенные светодиоды.
Этот базовый проект демонстрирует основные принципы управления IoT, которые в дальнейшем можно масштабировать для управления реле освещения, двигателями, датчиками или другими устройствами домашней автоматизации.
Предварительные требования и настройка оборудования
Требования к программному обеспечению
-
Arduino IDE (Рекомендуется версия 2.x или более поздняя) должна быть установлена на вашем компьютере.
-
ESP32 Комплект платы Установлено в среде разработки Arduino IDE. Вы можете установить его через
Инструменты > Плата > Диспетчер плат...и в поисках “ESP32 от компании Espressif Systems”. -
Базовые навыки загрузки кода в систему. ESP32.
Аппаратные компоненты
Вам понадобятся следующие компоненты:
| Компонент | Количество | Примечания |
|---|---|---|
| ESP32 Совет по развитию (например, DOIT DEVKIT V1) | 1 | Большинство плат с 30 или 36 контактами подойдут. |
| 5-мм светодиод | 2 | Любой цвет. |
| Резистор (от 220 Ом до 330 Ом) | 2 | Для ограничения тока. |
| Макетная плата | 1 | Для упрощения прототипирования. |
| Соединительные провода (От мужчины к мужчине) | Несколько | Для установления связей. |
| Кабель Micro USB | 1 | Для питания и программирования. |
Схема электропроводки
Соедините компоненты, как показано ниже. Перед включением питания цепи всегда дважды проверяйте соединения.
(Вставьте сюда четкую диаграмму или схему, показывающую:)
-
ESP32 GPIO26 → Резистор → Анод светодиода (длинная ножка); Катод светодиода → НД.
-
ESP32 GPIO27 → Резистор → Второй светодиодный анод; Катод светодиода → НД.
-
ESP32 Vin/GND При необходимости подключите к силовым шинам макетной платы.
)
⚠️ Важно: Он ESP32‘Контакты GPIO этого устройства: не выдерживает 5 В. Используйте правильные логические уровни 3,3 В. Убедитесь, что более длинный вывод (анод) светодиода подключен к выводу GPIO через резистор, а более короткий вывод (катод) подключен к земле.
Полное собрание сочинений ESP32 Код веб-сервера
Скопируйте приведенный ниже код целиком в вашу среду разработки Arduino IDE. Вам необходимо обновить SSID и пароль переменные с учетными данными вашей собственной сети Wi-Fi перед загрузкой.
/********* * Автономный веб-сервер для ESP32 * Управляет двумя светодиодами, подключенными к GPIO 26 и GPIO 27 * Подробная информация о проекте: https://www.randomnerdtutorials.com * Основано на примерах из библиотеки Arduino WiFi *********/ #включать <WiFi.h> #включать <WiFiClient.h> // ======== НАСТРОЙКА СЕТИ ======== константа чар* SSID = ""НАЗВАНИЕ ВАШЕЙ СЕТИ WI-FI""; // Замените на ваш SSID константа чар* пароль = ""ВАШ_ПАРОЛЬ_WIFI""; // Замените на ваш пароль // ======== НАСТРОЙКА СЕРВЕРА И ПИН-КОДА ======== WiFiServer сервер(80); // Установите порт веб-сервера на 80 (стандартный HTTP) // Определяем контакты GPIO для выходов константа инт ledPin_26 = 26; константа инт ledPin_27 = 27; // Переменные для отслеживания текущего состояния каждого выхода Строка state_26 = ""выключенный""; Строка state_27 = ""выключенный""; // Переменная заголовка для хранения HTTP-запроса Заголовок строки; // Временные параметры для таймаута соединения (2000 мс = 2 с) без подписи длинный текущее время = миллис(); без подписи длинный предыдущее время = 0; константа длинный timeoutTime = 2000; // ======== ФУНКЦИЯ НАСТРОЙКИ ======== пустота настраивать() { Серийный номер.начинать(115200); // Запуск последовательной связи для отладки // Инициализируем выводы GPIO как выходы и устанавливаем их в низкий уровень (ВЫКЛ.) pinMode(ledPin_26, ВЫХОД); pinMode(ledPin_27, ВЫХОД); digitalWrite(ledPin_26, НИЗКИЙ); digitalWrite(ledPin_27, НИЗКИЙ); // Подключение к сети Wi-Fi Серийный номер.печать(""Подключение к""); Серийный номер.println(SSID); Wi-Fi.начинать(SSID, пароль); пока (Wi-Fi.статус() != WL_CONNECTED) { задерживать(500); Серийный номер.печать("."); } // Вывести сведения о подключении Серийный номер.println("Wi-Fi успешно подключен!"); Серийный номер.печать("IP-адрес платы:"); Серийный номер.println(Wi-Fi.локальный IP()); // <- ВАЖНО: Для доступа к серверу вам необходим этот IP-адрес сервер.начинать(); // Запуск веб-сервера } // ======== ГЛАВНЫЙ ЦИКЛ ======== пустота петля() { WiFiClient клиент = сервер.доступный(); // Прослушивание входящих клиентских подключений если (клиент) { // Подключился новый клиент Серийный номер.println("Подключен новый клиент"."); Строка currentLine = ""; // Буфер для входящих данных текущее время = миллис(); предыдущее время = текущее время; // Оставайтесь на связи, пока клиент активен и в пределах временного окна. пока (клиент.подключенный() && (текущее время - предыдущее время <= timeoutTime)) { текущее время = миллис(); если (клиент.доступный()) { // Данные доступны для чтения с клиента чар c = клиент.читать(); // Считываем один байт Серийный номер.писать(c); // Вывод эхо-сигнала в последовательный монитор (необязательно) заголовок += c; // Добавить к строке заголовка если (c == ''\n'') { // Конец строки в HTTP-запросе // Если строка пустая, HTTP-запрос завершен если (текущая строка.длина() == 0) { // Отправляем стандартный заголовок HTTP-ответа клиент.println(""HTTP/1.1 200 OK""); клиент.println(""Content-type:text/html""); клиент.println(""Соединение: закрыто""); клиент.println(); // Пустая строка обозначает конец заголовка // ======== ЛОГИКА УПРАВЛЕНИЯ ======== // Проверяем URL-адрес запроса и управляем выводами GPIO соответствующим образом. если (заголовок.индекс(""GET /26/on"") >= 0) { Серийный номер.println(""Включение GPIO 26""); состояние_26 = ""на""; digitalWrite(ledPin_26, ВЫСОКИЙ); } еще если (заголовок.индекс(""ПОЛУЧИТЬ /26/скидку"") >= 0) { Серийный номер.println(""Выключение GPIO 26""); состояние_26 = ""выключенный""; digitalWrite(ledPin_26, НИЗКИЙ); } еще если (заголовок.индекс(""GET /27/on"") >= 0) { Серийный номер.println(""Включение GPIO 27""); состояние_27 = ""на""; digitalWrite(ledPin_27, ВЫСОКИЙ); } еще если (заголовок.индекс(""GET /27/off"") >= 0) { Серийный номер.println(""Выключение GPIO 27""); состояние_27 = ""выключенный""; digitalWrite(ledPin_27, НИЗКИЙ); } // ======== СГЕНЕРИРУЙТЕ HTML-СТРАНИЦУ ======== клиент.println("<!DOCTYPE html><html>"); клиент.println("" ""); клиент.println(""Веб-сервер ESP32 ""); клиент.println("" "); клиент.println(""html {font-family: Arial, sans-serif; display: inline-block; text-align: center;}""); клиент.println("".button {background-color: #4CAF50; border: none; color: white; padding: 15px 32px;""); клиент.println(""text-decoration: none; display: inline-block; font-size: 18px; margin: 4px 2px; cursor: pointer;}""); клиент.println("".button-off {background-color: #555555;}""); // Стиль для кнопки ВЫКЛ. клиент.println("" ""); клиент.println("<body>"); клиент.println("<h1>\u041f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c ESP32<\/h1>"); // Управление дисплеем для GPIO 26 клиент.println("<p>\u0421\u0432\u0435\u0442\u043e\u0434\u0438\u043e\u0434 \u043d\u0430 \u0432\u044b\u0432\u043e\u0434\u0435 GPIO 26 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435: <strong>" + состояние_26 + "<\/strong><\/p>"); если (состояние_26 == ""выключенный"") { клиент.println("<p><a href=\"\/ru\/26\/on\/\"><button class=\"button\">\u0412\u041a\u041b\u042e\u0427\u0410\u0422\u042c<\/button><\/a><\/p>"); } еще { клиент.println("<p><a href=\"\/ru\/26\/off\/\"><button class=\"button button-off\">\u0412\u042b\u041a\u041b\u042e\u0427\u0410\u0422\u042c<\/button><\/a><\/p>"); } // Управление дисплеем для GPIO 27 клиент.println("<p>\u0421\u0432\u0435\u0442\u043e\u0434\u0438\u043e\u0434 \u043d\u0430 \u0432\u044b\u0432\u043e\u0434\u0435 GPIO 27: <strong>" + состояние_27 + "<\/strong><\/p>"); если (состояние_27 == ""выключенный"") { клиент.println("<p><a href=\"\/ru\/27\/on\/\"><button class=\"button\">\u0412\u041a\u041b\u042e\u0427\u0410\u0422\u042c<\/button><\/a><\/p>"); } еще { клиент.println("<p><a href=\"\/ru\/27\/off\/\"><button class=\"button button-off\">\u0412\u042b\u041a\u041b\u042e\u0427\u0410\u0422\u042c<\/button><\/a><\/p>"); } клиент.println("<\/body><\/html>"); клиент.println(); // Конец ответа перерыв; // Выход из цикла while } еще { // Если обнаружен символ новой строки, очищаем буфер текущей строки. текущая строка = ""; } } еще если (c != ''\r'') { // Игнорировать символы возврата каретки текущая строка += c; // Добавить символ в текущую строку } } } // Очистите переменную заголовка и закройте соединение заголовок = ""; клиент.останавливаться(); Серийный номер.println("Отключение клиента"."); Серийный номер.println(); } }
Как использовать и тестировать веб-сервер
1. Загрузите код.
-
В среде разработки Arduino IDE выберите свой ESP32 доска под
Инструменты > Доска. -
Выберите правильный COM-порт в разделе
Инструменты > Порт. -
Нажмите кнопку загрузки.
2. Найдите ESP32‘IP-адрес
-
Откройте Последовательный монитор (
Инструменты > Последовательный монитор). -
Установите скорость передачи данных на 115200.
-
Нажмите Кнопка EN/RST на вашем ESP32 доска.
-
Посмотрите на вывод. После сообщения “Wi-Fi успешно подключен!” вы увидите строку примерно такого вида:
IP-адрес платы: 192.168.1.XXX
Скопируйте этот IP-адрес.
3. Откройте панель управления.
-
На любом устройстве, подключенном к той же локальной сети Wi-Fi (телефон, ноутбук, планшет), откройте веб-браузер (Chrome, Safari, Firefox и т. д.).
-
В адресной строке браузера введите: IP-адрес, который вы скопировали (например,
http://192.168.1.XXX) и нажмите Enter. -
Он ESP32 Должна загрузиться веб-страница панели управления, на которой отобразятся две кнопки для управления светодиодами.
4. Проверьте функциональность.
-
Нажмите “"ВКЛЮЧАТЬ"” Кнопка для GPIO 26. Соответствующий светодиод должен загореться, и веб-страница обновит его состояние на “включено”.
-
Нажмите “"ВЫКЛЮЧАТЬ"” кнопка для выключения.
-
Повторите то же самое для GPIO 27. Наблюдайте за последовательным монитором, чтобы увидеть HTTP-запросы в реальном времени.
GET /26/on) по мере нажатия.
Как работает код: подробный технический анализ
1. Сетевой фонд
Он WiFi.h Библиотека предоставляет все необходимые функции. WiFiServer server(80); Объект прослушивает входящие соединения на порту 80, стандартном порту для HTTP-трафика. Процесс подключения в настраивать() Это блокирующий процесс, но он включает визуальную обратную связь через последовательный монитор.
2. Обработка запросов клиентов
Ядро сервера находится в петля(). The server.available() Функция проверяет наличие нового клиента. Когда браузер устанавливает соединение, он отправляет... HTTP GET-запрос. Код считывает этот запрос посимвольно, сохраняя его в памяти. заголовок нить.
3. Анализ запросов и управление выводами GPIO.
Программа осуществляет поиск по входящим заголовок для конкретных шаблонов URL:
-
""GET /26/on""→ Устанавливает высокий уровень сигнала на GPIO 26 и обновляет его.состояние_26к""на"". -
""ПОЛУЧИТЬ /26/скидку""→ Устанавливает низкий уровень на выводе GPIO 26 и обновляет данные.состояние_26к""выключенный"".
Вот как щелчок кнопки в браузере преобразуется в физическое действие на экране. ESP32.
4. Генерация динамического HTML
После обработки запроса код в режиме реального времени формирует HTML-страницу. Он использует текущий код. состояние_XX Переменные для отображения правильного статуса и кнопки (ВКЛ или ВЫКЛ). CSS-стили внутри Использование тегов делает страницу адаптивной и лаконичной.
5. Управление соединениями
Он timeoutTime Эта константа предотвращает зависание сервера в случае неожиданного отключения клиента. Соединение закрывается явным образом с помощью client.stop() После отправки HTML-страницы освобождаются ресурсы для следующего запроса.
Устранение распространенных проблем
| Проблема | Вероятная причина | Решение |
|---|---|---|
| В последовательном мониторе отсутствует IP-адрес. | Неверные учетные данные Wi-Fi, слабый сигнал или плата не перезагружается. | 1. Перепроверьте. SSID/пароль. 2. Нажмите ESP32‘Нажмите кнопку EN/RST после загрузки. 3. Переместите доску ближе к роутеру. |
| “Не удалось подключиться к ESP32”при загрузке» | Выбран неверный COM-порт или не установлены драйверы. | 1. Перейдите по ссылке Инструменты > Порт и выберите другой COM-порт. 2. Установите драйверы USB CP210x или CH340 для вашего устройства. ESP32. |
| Веб-страница не загружается (тайм-аут) | Устройство находится не в той же сети или имеет неверный IP-адрес. | Убедитесь, что ваш телефон/компьютер подключен к та же сеть Wi-Fi как ESP32. Скопируйте IP-адрес из последовательного монитора. |
| Светодиод не загорается | Неправильная проводка или перегоревший светодиод. | Убедитесь, что светодиод подключен с правильной полярностью (длинный вывод к GPIO) и что резистор установлен на место. Попробуйте другой светодиод. |
Следующие шаги: Расширение вашего проекта
Этот веб-сервер представляет собой базовую структуру. Вы можете расширить его, добавив следующие функции:
-
Добавление дополнительных выходных данных: Управляйте реле, сервоприводами или светодиодными лентами, определяя дополнительные контакты GPIO и добавляя соответствующие кнопки/URL-адреса в код.
-
Считывание данных с датчика: Отображайте данные с датчиков (например, DHT11 для измерения температуры) на веб-странице, добавляя их показания в блок генерации HTML.
-
Повышение уровня безопасности: Внедрите базовый контроль доступа или перейдите на более продвинутые фреймворки для веб-серверов, такие как... AsyncTCP и ESPAsyncWebServer для эффективной обработки множества соединений.
-
Удаленный доступ: Используйте переадресацию портов на вашем маршрутизаторе или в облачном сервисе (с соответствующими мерами безопасности) для управления вашими портами. ESP32 извне вашей домашней сети.
Освоив этот автономный веб-сервер, вы сделали значительный шаг в мир Интернета вещей. ESP32. Принципы, которые вы здесь изучили — обработка HTTP-запросов, генерация динамического контента и управление оборудованием — лежат в основе бесчисленных проектов по автоматизации и мониторингу дома.
======================================
