ESP32 Web Server: Управляем реле через браузер

Приветствую всех любителей DIY и умного дома! Сегодня мы погрузимся в одну из самых практичных и фундаментальных тем для микроконтроллеров ESP32 — создание собственного веб-сервера для управления физическими устройствами, а именно реле. Представьте: вы открываете браузер на телефоне или ноутбуке, вводите IP-адрес платы и видите красивую кнопку, которая щелчком включает или выключает свет в комнате, насос на даче или вентилятор. Это не магия, а реальность, которую мы создадим своими руками за полчаса. В этой статье я подробно, шаг за шагом, покажу, как развернуть веб-сервер на ESP32, подключить релейный модуль и создать простой, но функциональный интерфейс управления. Это основа для сотен проектов умного дома — от умной розетки до управления гаражными воротами.

Почему именно ESP32 и веб-сервер?

ESP32 — это не просто микроконтроллер, а настоящий комбайн с Wi-Fi и Bluetooth, который идеально подходит для сетевых проектов. Веб-сервер — универсальный способ управления. В отличие от фирменных приложений, которые могут закрыться или стать платными, ваш веб-интерфейс будет работать всегда, пока есть доступ к локальной сети. Это независимость, гибкость и полный контроль. Я использую такой подход для управления подсветкой на полках в мастерской — удобно, когда руки заняты инструментом, а попросить голосового помощника лень.

Что нам понадобится?

1. Плата ESP32 (любая модель, например, ESP32 DevKit V1).
2. Релейный модуль на 5В (обычно с одним, двумя или четырьмя каналами). Мы возьмём одноканальный для простоты.
3. Соединительные провода (папа-папа).
4. Макетная плата (опционально, для удобства).
5. USB-кабель для питания и программирования ESP32.
6. Компьютер с установленной Arduino IDE или PlatformIO (я буду показывать на Arduino IDE, как на более простом варианте).
7. Лампочка или любой другой прибор для тестирования (НИКОГДА не подключайте реле напрямую к сети 220В без должных знаний и мер безопасности! Для начала используйте низковольтную нагрузку, например, светодиодную ленту 12В).

Шаг 1: Подготовка среды разработки

Если у вас ещё не установлена Arduino IDE с поддержкой ESP32, сделаем это сейчас.

1. Скачайте и установите Arduino IDE с официального сайта.
2. Откройте IDE и перейдите в Файл -> Настройки.
3. В поле «Дополнительные ссылки для менеджера плат» вставьте следующую строку: https://espressif.github.io/arduino-esp32/package_esp32_index.json
4. Нажмите «ОК».
5. Теперь идите в Инструменты -> Плата -> Менеджер плат....
6. В поиске введите «esp32». Найдите и установите пакет «ESP32 by Espressif Systems».

Типичная ошибка: Если после установки платы ESP32 не появляются в списке, перезапустите Arduino IDE. Если не помогло — проверьте, правильно ли скопирована ссылка в настройках (без лишних пробелов).

Шаг 2: Схема подключения

Подключение релейного модуля к ESP32 очень простое. Большинство модулей имеют три управляющих контакта: * VCC — питание (5В от ESP32). * GND — земля. * IN (или SIG) — сигнальный вход, который мы будем подключать к GPIO.

ВАЖНО: ESP32 имеет контакты, которые выдают 3.3В, а релейные модули часто рассчитаны на 5В. К счастью, большинство современных модулей имеют встроенную опторазвязку и нормально работают от сигнала 3.3В. Проверьте спецификацию вашего модуля. Если он требует строго 5В на вход IN, вам понадобится простейший преобразователь уровня (level shifter).

Для нашего примера подключим одноканальный модуль: * VCC модуля -> контакт 5V на ESP32. * GND модуля -> контакт GND на ESP32. * IN модуля -> контакт GPIO 26 на ESP32 (можно выбрать любой свободный GPIO, например, 16, 17, 18, 19, 21, 22, 23, 25, 26, 27).

Нагрузку (например, светодиодную ленту) подключаем к клеммам реле (COM и NO/Normally Open).

Шаг 3: Пишем код веб-сервера

Создайте новый скетч в Arduino IDE. Весь код я подробно прокомментирую.

// Подключаем необходимые библиотеки
#include <WiFi.h>
#include <WebServer.h>

// Задаём свои учётные данные Wi-Fi сети
const char* ssid = "ВАШ_SSID";          // Название вашей Wi-Fi сети
const char* password = "ВАШ_ПАРОЛЬ";    // Пароль от вашей Wi-Fi сети

// Создаём объект веб-сервера, который будет слушать 80-й порт
WebServer server(80);

// Задаём пин, к которому подключено реле
const int relayPin = 26;

// Переменная для хранения текущего состояния реле
bool relayState = LOW; // LOW - выключено, HIGH - включено

// HTML-код главной страницы (интерфейс)
// Используем raw string literal для удобства (C++11)
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Управление реле с ESP32</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 50px;
            background-color: #f4f4f4;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            display: inline-block;
        }
        h1 {
            color: #333;
        }
        .state {
            font-size: 1.2em;
            margin: 20px 0;
            padding: 10px;
            border-radius: 5px;
            background-color: #e7e7e7;
        }
        .button {
            background-color: %COLOR%;
            border: none;
            color: white;
            padding: 20px 40px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 24px;
            margin: 10px;
            cursor: pointer;
            border-radius: 12px;
            transition: background-color 0.3s;
            font-weight: bold;
        }
        .button:hover {
            background-color: %HOVER%;
        }
        .off { background-color: #d9534f; } /* Красный */
        .off:hover { background-color: #c9302c; }
        .on { background-color: #5cb85c; } /* Зелёный */
        .on:hover { background-color: #449d44; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Управление реле через ESP32</h1>
        <div class="state">
            Текущее состояние: <strong>%STATE%</strong>
        </div>
        <p>
            <a href="/relay/on"><button class="button on">ВКЛЮЧИТЬ</button></a>
            <a href="/relay/off"><button class="button off">ВЫКЛЮЧИТЬ</button></a>
        </p>
        <p><small>IP устройства: %IP%</small></p>
    </div>
</body>
</html>
)rawliteral";

// Функция для обработки главной страницы (GET запрос к корню "/")
void handleRoot() {
    String html = String(index_html); // Копируем HTML-шаблон в строку

    // Заменяем плейсхолдеры на реальные значения
    html.replace("%STATE%", relayState ? "ВКЛЮЧЕНО" : "ВЫКЛЮЧЕНО");
    html.replace("%IP%", WiFi.localIP().toString());

    // Меняем цвета кнопки в зависимости от состояния
    if (relayState) {
        // Если реле включено, главная кнопка должна быть "Выключить"
        html.replace("%COLOR%", "#d9534f"); // Красный
        html.replace("%HOVER%", "#c9302c");
    } else {
        // Если реле выключено, главная кнопка должна быть "Включить"
        html.replace("%COLOR%", "#5cb85c"); // Зелёный
        html.replace("%HOVER%", "#449d44");
    }

    // Отправляем сформированную HTML-страницу клиенту
    server.send(200, "text/html", html);
}

// Функция для включения реле (обработка запроса "/relay/on")
void handleRelayOn() {
    digitalWrite(relayPin, HIGH); // Подаём HIGH сигнал на пин реле
    relayState = HIGH;            // Обновляем переменную состояния
    Serial.println("Реле ВКЛЮЧЕНО");
    // После выполнения действия перенаправляем пользователя обратно на главную страницу
    server.sendHeader("Location", "/");
    server.send(303); // Код HTTP 303 See Other для перенаправления
}

// Функция для выключения реле (обработка запроса "/relay/off")
void handleRelayOn() {
    digitalWrite(relayPin, LOW); // Подаём LOW сигнал на пин реле
    relayState = LOW;            // Обновляем переменную состояния
    Serial.println("Реле ВЫКЛЮЧЕНО");
    server.sendHeader("Location", "/");
    server.send(303);
}

// Функция для обработки несуществующих страниц (404 Not Found)
void handleNotFound() {
    String message = "Файл не найденnn";
    message += "URI: ";
    message += server.uri();
    message += "nМетод: ";
    message += (server.method() == HTTP_GET) ? "GET" : "POST";
    message += "n";
    server.send(404, "text/plain", message);
}

void setup() {
    // Инициализируем последовательный порт для отладки
    Serial.begin(115200);
    delay(1000); // Даём время на запуск монитора порта

    // Настраиваем пин реле как выход
    pinMode(relayPin, OUTPUT);
    digitalWrite(relayPin, LOW); // Гарантированно выключаем реле при старте

    // Подключаемся к Wi-Fi сети
    Serial.print("Подключаемся к сети ");
    Serial.println(ssid);
    WiFi.begin(ssid, password);

    // Ждём подключения
    while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
    }
    Serial.println("nПодключено к Wi-Fi!");

    // Выводим IP-адрес ESP32 в Serial Monitor
    Serial.print("IP-адрес для подключения: ");
    Serial.println(WiFi.localIP());

    // Настраиваем обработчики запросов веб-сервера
    server.on("/", handleRoot);           // Главная страница
    server.on("/relay/on", handleRelayOn); // Включить реле
    server.on("/relay/off", handleRelayOff); // Выключить реле
    server.onNotFound(handleNotFound);    // Страница 404

    // Запускаем веб-сервер
    server.begin();
    Serial.println("HTTP сервер запущен!");
}

void loop() {
    // Обрабатываем входящие запросы от клиентов
    server.handleClient();
}

Шаг 4: Загрузка кода и первая проверка

1. В коде выше не забудьте заменить "ВАШ_SSID" и "ВАШ_ПАРОЛЬ" на реальные данные вашей Wi-Fi сети.
2. Подключите ESP32 к компьютеру через USB.
3. В Arduino IDE выберите правильную плату: Инструменты -> Плата -> ESP32 Arduino -> ESP32 Dev Module.
4. Выберите порт, к которому подключена плата (Инструменты -> Порт).
5. Нажмите кнопку загрузки (стрелка вправо).
6. После успешной загрузки откройте Монитор порта (Инструменты -> Монитор порта). Убедитесь, что скорость (baud rate) установлена на 115200.
7. В мониторе вы должны увидеть процесс подключения к Wi-Fi, а затем строку с IP-адресом, например: IP-адрес для подключения: 192.168.1.35.

Типичная ошибка: Если подключение к Wi-Fi долго не происходит, проверьте правильность SSID и пароля (учтите регистр). Убедитесь, что ваша сеть работает на частоте 2.4 ГГц (ESP32 не поддерживает 5 ГГц).

Шаг 5: Тестирование веб-интерфейса

1. Убедитесь, что ваш компьютер или телефон подключены к той же самой Wi-Fi сети, что и ESP32.
2. Откройте браузер (Chrome, Firefox, Safari).
3. В адресной строке введите IP-адрес, который вы увидели в Мониторе порта (например, http://192.168.1.35).
4. Должна загрузиться страница с заголовком «Управление реле через ESP32», отображающая текущее состояние и две крупные кнопки.
5. Нажмите кнопку «ВКЛЮЧИТЬ». Вы должны услышать характерный щелчок реле, а состояние на странице изменится на «ВКЛЮЧЕНО». Подключённая нагрузка (например, светодиод) должна включиться.
6. Нажмите кнопку «ВЫКЛЮЧИТЬ». Реле щёлкнет обратно, состояние обновится, нагрузка выключится.

Поздравляю! Ваш первый веб-сервер для управления реле на ESP32 работает!

Куда двигаться дальше? Улучшаем проект

Рабочий прототип готов, но это только начало. Вот несколько идей для развития:

1. Статический IP (DHCP резервация). Чтобы IP-адрес ESP32 не менялся после перезагрузки роутера, зайдите в настройки своего роутера и найдите раздел DHCP или «Адресация». Привяжите MAC-адрес вашей ESP32 (его можно увидеть в Мониторе порта при старте или в коде через WiFi.macAddress()) к постоянному IP-адресу в локальной сети.

2. Добавление пароля (HTTP Basic Auth). Защитите интерфейс простым паролем, чтобы соседи не могли управлять вашим реле. Библиотека WebServer поддерживает эту функцию.

3. Сенсорный интерфейс и AJAX. В текущем коде при нажатии кнопки страница перезагружается. Это не очень современно. Используя jаvascript (AJAX), можно отправлять команды и обновлять состояние без перезагрузки страницы. Это сделает интерфейс мгновенным и похожим на нативное приложение.

4. Интеграция с Home Assistant. Это самый мощный шаг. Вы можете превратить ваше реле в устройство, управляемое из единой системы умного дома. Для этого есть два основных пути:

   • Через MQTT. Опубликуйте статью о настройке MQTT брокера Mosquitto на Raspberry Pi. ESP32 будет публиковать своё состояние и подписываться на команды через топики MQTT.
   • Через API Home Assistant (RESTful). Home Assistant может отправлять HTTP-запросы прямо на ваш веб-сервер ESP32 для включения/выключения.

5. Управление несколькими реле. Код легко масштабируется. Добавьте новые переменные для пинов (relayPin2, relayPin3), создайте для них обработчики (/relay2/on, /relay3/off) и расширьте HTML-интерфейс дополнительными кнопками.

6. Добавление датчиков. ESP32 может не только управлять, но и читать данные. Добавьте на ту же веб-страницу показания температуры (DHT22), влажности или качества воздуха в реальном времени.

Заключение

Сегодня мы прошли полный путь от пайки проводов до работающего веб-интерфейса для управления реле на ESP32. Этот проект — отличный фундамент. На его основе можно строить более сложные системы: умные розетки с таймерами, управление поливом в умной теплице, автоматизация вентиляции или света. Главное — вы получили работающий инструмент и понимание принципов.

Экспериментируйте, улучшайте код, добавляйте функции. И помните, что самые интересные проекты рождаются на стыке технологий — например, когда ваше самодельное реле начинает слушаться голосовых команд [Яндекс Алисы через Home Assistant](/home