Урок 1. Веб-сервер ESP32 (ESP8266) в среде Arduino IDE

Содержание

• Режимы работы ESP32.
• Принцип управления устройствами через веб-сервер ESP32.
• ESP32 как HTTP-сервер в режиме WiFi Station (STA)
• Создание простого веб-сервера на ESP8266 (NodeMCU) в Arduino IDE.
• Что такое NodeMCU? Программируем в среде Arduino IDE

Данным уроком начну серию уроков про ESP32 и ESP8266. ESP8266 и ESP32 стали достаточно популярными среди проектов, связанных с IoT или Wi-Fi. Это экономичные модули Wi-Fi, которые можно запрограммировать для создания автономного веб-сервера. Что очень радует!

Что такое веб-сервер и как он работает?

Веб-сервер — это место, где хранятся, обрабатываются и отсылаются веб-страницы веб-клиентам. Веб-клиент — это не что иное, как веб-браузер на наших ноутбуках и смартфонах. Связь между клиентом и сервером происходит с использованием специального протокола, называемого протоколом передачи гипертекста (HTTP).

В этом протоколе клиент инициирует связь, отправляя запрос на конкретную веб-страницу с помощью HTTP, а сервер отдает содержимое этой веб-страницы, или сообщение об ошибке, если не может этого сделать (например: страница не найдена, ошибка 404). Страницы, которые отдает сервер, в основном представляют собой HTML-документы.

Режимы работы ESP32.

Одна из особенностей ESP32 заключается в том, что он может не только подключаться к существующей сети Wi-Fi и действовать как веб-сервер, но также может настраивать собственную сеть, позволяя другим устройствам напрямую подключаться к ней и получать доступ к веб-страницам. Это возможно, потому что ESP32 работает в трех разных режимах: режим станции (STA), режим точки доступа (AP) и оба режима одновременно.

Режим станции (STA).

ESP32 (ESP8266), который подключается к существующей сети Wi-Fi (созданной вашим беспроводным маршрутизатором), называется станцией (STA).

В режиме STA ESP32 получает IP от маршрутизатора, к которому он подключен. С этим IP-адресом он может настроить веб-сервер и отдавать веб-страницы на все подключенные устройства в существующей сети Wi-Fi .

Режим точки доступа (AP).

ESP32 (ESP8266), который создает свою собственную сеть Wi-Fi и действует как концентратор (как Wi-Fi маршрутизатор) для одного или нескольких устройств, называется точкой доступа (AP). В отличие от Wi-Fi роутера, у него нет интерфейса для проводной сети. Итак, такой режим работы называется Soft Access Point (soft-AP). Также максимальное количество устройств, которые могут подключиться к нему, ограничено пятью.

В режиме AP ESP32 создает новую сеть Wi-Fi и устанавливает для нее SSID (имя сети) и IP-адрес. С этим IP-адресом он может отдавать веб-страницы на все подключенные устройства в своей собственной сети.

Схема подключения двух светодиодов к ESP32.

Теперь, когда мы знаем основы работы веб-сервера, и в каких режимах ESP32 может создавать веб-сервер, пришло время подключить к ESP32 два светодиода, которыми мы планируем управлять через WiFi.

Начните с размещения ESP32 на макетной плате. Затем подключите два светодиода к цифровым GPIO 4 и 5 через ограничительный резистор 220 Ом.

Когда вы закончите, у вас получится что-то похожее на изображение, показанное ниже.

Принцип управления устройствами через веб-сервер ESP32.

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

Когда вводите URL-адрес в веб-браузере и нажимаете ENTER, браузер отправляет HTTP-запрос (также известный как запрос GET) на веб-сервер. Задача веб-сервера — обработать этот запрос, сделав что-нибудь. Возможно, вы уже догадались, что мы собираемся контролировать устройство, обращаясь к определенному URL-адресу. Например, предположим, что мы ввели URL-адрес типа http://192.168.1.1/ledon в браузере. Затем браузер отправляет HTTP-запрос в ESP32 для обработки этого запроса. Когда ESP32 читает этот запрос, он знает, что пользователь хочет включить светодиод. Таким образом, он включает светодиод и отдает динамическую веб-страницу в браузер, показывая состояние светодиода: ВКЛ. Не так все это и сложно!

ESP32 в качестве HTTP-сервера с использованием режима точки доступа WiFi (AP).

А теперь перейдем к самому интересному!

Как следует из заголовка, этот пример демонстрирует, как превратить ESP32 в точку доступа (AP) и отдавать веб-страницы для любого подключенного клиента. Для начала подключите ESP32 к компьютеру и загрузите код, который затем разберем более подробно.

Доступ к веб-серверу в режиме AP.

После загрузки скетча откройте Serial Monitor со скоростью 115200 бод. И нажмите кнопку RESET на ESP32. Если все в порядке, то отобразится сообщение о запуске HTTP-сервера.

Затем найдите любое устройство, которое можно подключить к сети Wi-Fi — телефон, ноутбук и т. д. И найдите сеть под названием «ESP32». Подключитесь к сети с паролем «01234567».

После подключения к сети ESP32 AP, загрузите браузер и укажите адрес 192.168.1.1. ESP32 должен открыть веб-страницу, показывающую текущее состояние светодиодов, и две кнопки для управления ими.

Если одновременно взглянуть на монитор последовательного порта, то можно увидеть состояние контактов GPIO ESP32.

Теперь нажмите кнопку, чтобы включить LED1, следя за URL-адресом. После того, как вы нажали кнопку, ESP32 получит запрос URL-адреса / led1on . Затем он включит LED1 и обновит веб-страницу с новым статусом LED.

Он также покажет состояние вывода GPIO в последовательном мониторе порта.

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

Теперь давайте внимательнее посмотрим на код, и увидим, как он работает, чтобы вы могли изменить его в соответствии со своими потребностями.

Подробное объяснение кода точки доступа WiFi (AP).

Скетч начинается с подключения библиотеки WiFi.h. Эта библиотека предоставляет специальные методы WiFi для ESP32, которые мы вызываем для подключения к сети. После этого мы также подключаем библиотеку WebServer.h, в которой есть несколько доступных методов, которые помогут нам настроить сервер и обрабатывать входящие HTTP-запросы, не беспокоясь о деталях реализации на низком уровне.

Когда мы устанавливаем ESP32 в режим точки доступа (AP), он создает сеть Wi-Fi. Следовательно, нам нужно установить его SSID, пароль, IP-адрес, маску IP-подсети и IP-шлюз.

Затем мы объявляем объект библиотеки WebServer, чтобы получить доступ к его функциям. Конструктор этого объекта принимает порт (который сервер будет слушать) в качестве параметра. Поскольку 80 — порт по умолчанию для HTTP, мы будем использовать это значение. Теперь вы можете получить доступ к серверу без необходимости указывать порт в URL-адресе.

После чего мы объявляем выводы GPIO ESP32, к которым подключены светодиоды, и их начальное состояние.

Функция Setup ().

Мы настраиваем наш HTTP-сервер перед его запуском. Прежде всего, мы открываем последовательное соединение для отладки и устанавливаем для GPIO значение OUTPUT.

Затем мы настраиваем программную точку доступа для создания сети Wi-Fi, проверяя SSID, пароль, IP-адрес, маску IP-подсети и IP-шлюз.

Чтобы обрабатывать входящие HTTP-запросы, нам нужно указать, какой код выполнять при вызове конкретного URL. Для этого мы используем метод on . Этот метод принимает два параметра. Первый — это URL-путь, а второй — имя функции, которую мы хотим выполнить при переходе по этому URL-адресу.

Например, первая строка приведенного ниже фрагмента кода указывает, что, когда сервер получает HTTP-запрос по корневому ( / ) пути, он запускает handle_OnConnect() функцию. Обратите внимание, что указанный URL-адрес является относительным путем.

Точно так же нам нужно указать еще 4 URL-адреса для обработки двух состояний 2 светодиодов.

Мы не указали, что должен делать сервер, если клиент запрашивает любой URL-адрес, отличный от указанного в server.on(). Он должен ответить HTTP-статусом 404 (Not Found) и сообщением для пользователя. Мы также помещаем в функцию и используем server.onNotFound(), чтобы сообщить, что она должна выполнить ее, когда получит запрос на URI, который не был указан в server.on.

Теперь, чтобы запустить наш сервер, мы вызываем метод begin объекта server.

Основной цикл Loop().

Чтобы обрабатывать входящие HTTP-запросы, нам нужно вызвать handleClient() метод объекта сервера. Также мы меняем состояние светодиода по запросу.

Затем нам нужно создать функцию, которую мы назначили корневому (/) URL с помощью server.on. В начале этой функции мы устанавливаем состояние обоих светодиодов на LOW (исходное состояние светодиодов) и выводим состояние светодиодов в последовательный монитор. Чтобы ответить на HTTP-запрос, мы используем метод send. Хотя метод может быть вызван с другим набором аргументов, его простейшая форма состоит из кода ответа HTTP.

В нашем случае мы отправляем код 200 (один из кодов состояния HTTP), который соответствует ответу OK — ответ получен. Затем мы указываем тип содержимого как «текст / html» и, наконец, вызываем пользовательскую функцию SendHTML (), которая создает динамическую HTML-страницу, содержащую состояние светодиодов.

Точно так же нам нужно создать четыре функции для обработки запросов включения / выключения светодиодов и страницы ошибки 404.

Отображение веб-страницы HTML.

SendHTML() Функция отвечает за создание веб-страницы всякий раз, когда веб-сервер ESP32 получает запрос от веб-клиента. Он просто объединяет HTML-код в большую строку и возвращает server.send() функцию, которую мы обсуждали ранее. Функция принимает состояние светодиодов в качестве параметров для динамической генерации содержимого HTML.

Первый текст, который вы всегда должны отправить ! DOCTYPE, который указывает на то, что мы посылаем HTML код.

Затем элемент meta viewport заставляет веб-страницу загружаться в любом браузере. В то время как тег title устанавливает заголовок страницы.

Стилизация веб-страницы.

Затем у нас есть CSS для стилизации кнопок и внешнего вида веб-страницы. Мы выбираем шрифт Helvetica, определяем контент, который будет отображаться, в виде встроенного блока, и выравниваться по центру.

Затем следующий код устанавливает цвет, шрифт и поля тегов h2, H3 и p.

Дальше прописывая стили, которые применяются к кнопкам, указав свойства: цвет, размер, поля и т. д. Кнопки ВКЛ. и ВЫКЛ. имеют разный цвет фона, в то время как :active selector для кнопок обеспечивает эффект нажатия кнопки.

Установка заголовка веб-страницы.

Далее задается заголовок веб-страницы. Вы можете изменить этот текст на любой, который подходит для вашего приложения.

Отображение кнопок, и соответствующего их состояния

Чтобы динамически генерировать кнопки и статус светодиода, мы используем оператор if. Таким образом, в зависимости от состояния контактов GPIO отображается кнопка ВКЛ / ВЫКЛ.

ESP32 как HTTP-сервер в режиме WiFi Station (STA)

Теперь перейдем к нашему следующему примеру, который демонстрирует, как использовать ESP32 в режиме станции (STA) и выводить веб-страницы для любого подключенного клиента в сети.

Перед загрузкой кода, нужно внести некоторые изменения, чтобы все работало как нужно. Вам необходимо изменить две переменные с вашими сетевыми учетными данными, чтобы ESP32 мог установить соединение с существующей сетью.

Должен получиться вот такое код.

Доступ к веб-серверу в режиме STA.

После загрузки скетча откройте Serial Monitor со скоростью 115200 бод. И нажмите кнопку RESET на ESP32. Если все в порядке, он выведет динамический IP-адрес, полученный от вашего маршрутизатора, и покажет сообщение о запуске HTTP-сервера.

Затем загрузите браузер и укажите ему IP-адрес, отображаемый в последовательном мониторе порта. ESP32 должен сгенерировать веб-страницу, показывающую текущее состояние светодиодов, и две кнопки для управления ими.

Если посмотреть в монитор последовательного порта, то можно увидеть состояние контактов GPIO ESP32.

Теперь нажмите кнопку, чтобы включить LED1, следя за URL-адресом. После того, как вы нажмете кнопку, ESP32 получит запрос URL-адреса / led1on . Затем он включает LED1 и обновляет веб-страницу с новым статусом LED.

Данные также выводятся о состоянии вывода GPIO в последовательный монитор порта.

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

Пояснение к коду.

Если вы сравните этот код с предыдущим кодом, единственное отличие состоит в том, что мы не устанавливаем программную точку доступа, а подключаемся к существующей сети с помощью WiFi.begin() функции.

Пока ESP32 пытается подключиться к сети, мы можем проверить статус подключения с помощью WiFi.status() функции.

Данная функция возвращает следующие статусы:

• WL_CONNECTED: возвращается при подключении к сети Wi-Fi;
• WL_NO_SHIELD: возвращается, когда Wi-Fi модуль не подключен;
• WL_IDLE_STATUS: временное состояние, возвращаемое при вызове WiFi.begin(), и остающееся активным до тех пор, пока не истечет количество попыток подключения (что приводит к WL_CONNECT_FAILED), или пока не будет установлено соединение (что приводит к WL_CONNECTED);
• WL_NO_SSID_AVAIL: возвращается, когда нет доступных SSID;
• WL_SCAN_COMPLETED: возвращается, когда сканирование сетей завершено;
• WL_CONNECT_FAILED: возвращается при неудаче подключения после всех попыток;
• WL_CONNECTION_LOST: возвращается при потере соединения;
• WL_DISCONNECTED: возвращается при отключении от сети.

Как только ESP32 подключен к сети, в мониторе порта вы увидите IP-адрес, который выводит функция WiFi.localIP.

Единственная разница между режимами AP и STA заключается в том, что один создает сеть, а другой присоединяется к существующей сети. Итак, остальная часть кода для обработки HTTP-запросов и обслуживания веб-страницы в режиме STA такая же, как и в режиме AP, описанном выше, которая включает в себя:

• Объявление контактов GPIO ESP32, к которым подключены светодиоды
• Определение нескольких методов server.on () для обработки входящих HTTP-запросов
• Определение метода server.onNotFound () для обработки ошибки HTTP 404
• Создание пользовательских функций, которые выполняются при переходе по определенным URL
• Создание HTML-страницы
• Стилизация веб-страницы
• Создание кнопок и отображение их статуса

Создание простого веб-сервера на ESP8266 (NodeMCU) в Arduino IDE.

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

Что такое NodeMCU? Программируем в среде Arduino IDE

Схема подключения двух светодиодов к ESP8266 NodeMCU.

Не смотря на то, что распиновка плат отличается, в примере для обеих плат будем использовать GPIO D4 и D5. Это поможет объединить код в дальнейшем.

В итоге у нас должно получиться подключение как на схеме.

Использование ESP8266 (NodeMCU) в качестве HTTP сервера в режиме Wi-Fi Station (STA)

Давайте рассмотрим пример использования ESP8266 (NodeMCU) в качестве HTTP сервера в режиме Wi-Fi Station (STA). Прежде чем приступить к загрузке скетча, чтобы он у вас заработал, необходимо внести некоторые изменения. Чтобы ESP8266 мог установить соединение с существующей сетью, вам необходимо изменить две следующие переменные с учетными данными вашей сети.

После чего можно загрузить код в ESP8266 (NodeMCU).

Доступ к веб-серверу в режиме STA при использовании ESP8266.

После загрузки кода в ESP8266 NodeMCU, как и в примере с ESP32, в мониторе порта увидим знакомую информацию.

Затем загрузите браузер и введите IP адрес, указанный в мониторе последовательного порта. NodeMCU должен выдать веб-страницу, показывающую текущее состояние светодиодов, и две кнопки для управления ими.

Если в это время взглянуть на монитор последовательного порта, то можно увидеть состояние выводов GPIO NodeMCU.

В работе данного примера нет ни каких изменений в сравнении с работай ESP32.

Изменения в скетче для ESP8266 NodeMCU.

Первым делом нам нужно изменить библиотеки для работы с ESP8266.

Затем объявляем объект библиотеки ESP8266WebServer, чтобы получить доступ к ее функциям. Конструктор этого объекта в качестве параметра принимает номер порта (который сервер будет прослушивать).

GPIO у данной платы также обозначаются по другому, их следует также изменить.

Осталось подправитьв HTML странице выводимую информацию. Здесь изменим заголовок страницы. Чтобы было понято, что данный пример работает на ESP8266.

Изменить код для работы ESP8266 в режиме точки доступа (AP) будет не сложно. Это будет для вас домашнее задание.

Доступ к веб-серверу в режиме STA код для ESP32 end ESP8266.

Чтобы не плодить десятки версий кода для ESP32 и ESP8266, код можно объединить, что позволит, используя один скетч и прошивать ESP32 и ESP8266, достаточно только выбрать нужную плату в Arduino IDE.

Вод такой код получается. Пояснять его не буду. Тут добавились 3 условия, а остальной код мы рассмотрели выше.

На этом урок заканчиваю. Если вам понравился Урок, не забудьте нажать на сердечко в правой колонке сверху страницы, или ниже статьи, если вы читаете с телефона.

Понравился Урок 1. Веб-сервер ESP32 (ESP8266) в среде Arduino IDE? Не забудь поделиться с друзьями в соц. сетях.

А также подписаться на наш канал на YouTube, вступить в группу Вконтакте, в группу на Facebook.

Источник: arduino-tex.ru