ESP32 WEB - Server ч1.

В этой статье, речь пойдет о том, как можно создать простой веб-сервер на базе ESP32 для управления выводами.

• веб-сервер,будет управлять двумя светодиодами, подключенными к ESP32 GPIO 26 и 27.
• вы можете получить доступ к веб-серверу ESP32, введя IP-адрес ESP32 в браузере на любом устройстве в локальной сети.
• нажимая кнопки на вашем веб-сервере, вы можете мгновенно изменить состояние каждого светодиода.

Для сборки прототипа потребуются

• плата ESP32
• 2 резистора 330 Ом
• 2 индикаторных светодиода 5мм
• макетная плата
• перемычки

Схема прототипа простая:

ESP32 WEB сервер - схема прототипа

2 индикаторных светодиода для через токоограничивающие резисторы подключаются к земле.

Совет: если любите сами проверять свои идеи на макетной плате - купите светодиоды рассчитанные на напряжение 12V (резистор там встроен прямо в корпус, меньше проводов - меньше глюков)

Прототип со светодиодами рассчитанными на напряжение 12V

Прошейте плату ESP32 скетчем (качаем тут) и откройте монитор порта на скорости 115200

После подключения в мониторе порта необходимо узнать IP адрес который получила плата ESP32 после подключения к домашней сети

Берем любое устройство с браузером (например смартфон) открываем браузер и вбиваем в адресную строку IP адрес платы

Открываем браузер и вбиваем IP адрес

Открывается WEB страница с помощью которой можно управлять выводами к которым подключены светодиоды

Кнопки при этом меняют свой цвет.

Осталось подключить вместо светодиодов модуль реле - и получиться пульт, для управления, например люстрой :-)

Как работает данный код ?

Введите свои учетные данные для подключения к домашней сети Wi Fi

Здесь тоже хватит знаний любого Ардуинщика

Объявляем порты как выходы, подключаемся к WI FI, выводим IP адрес в монитор порта

Входящих клиентов прослушиваем с помощью команды

WiFiClient client = server.available();

В программе есть одна интересная строчка:

while (client.connected() && currentTime - previousTime <= timeoutTime)

Читаем данные пока клиент подключен и не прошло время которое мы задали в переменной timeoutTime

Этот таймаут необходим для корректной работы с браузером Google Chrome. Именно он почему-то не закрывает соединение после передачи строки http запроса от клиента. (у меня не закрывалось соединение ни с браузера на ПК , ни с браузера смартфона - отключалось исключительно по таймеру) IE и Opera работали нормально - клацнул на кнопку и соединение сразу закрылось.

Весь остальной скетч снабжен комментариями на русском языке. Вся суть работы сводится к тому, что с WEB страницы при нажатии на кнопку отправляется строка вида:

А в ответ ESP32 присылает другую страницу с обновленной серой кнопкой одновременно с этим изменив состояние выходов к которым подключены светодиоды.

Также вы можете ознакомиться с полным списком статей на моем канале.
Всем удачи!