Асинхронный веб-сервер

Для создания веб-сервера мы будем использовать библиотеку ESPAsyncWebServer, которая обеспечивает простой способ создания асинхронного веб-сервера. Создание асинхронного веб-сервера имеет несколько преимуществ, упомянутых на странице библиотеки GitHub, например:

• управлять более чем одним подключением одновременно;
• после отправки ответа вы сразу же готовы управлять другими соединениями, в то время как сервер позаботится об отправке ответа в фоновом режиме;
• простой механизм обработки модели;
• и более…

Ознакомьтесь с документацией библиотеки на ее странице GitHub.

Необходимые детали

В нашем случае мы будем управлять тремя выходами (светодиодами). Итак, нам потребуются следующие детали:

1. ESP8266 — 1 шт.
2. LED — 3 шт
3. Резистор 220 Ом — 3 шт.
4. Макетная плата — 1 шт.
5. Джемперы.

Схема

Прежде чем перейти к коду, подключите 3 светодиода к ESP8266. Это будут контакты GPIO 5, 4 и 2, но вы можете использовать любые другие контакты GPIO.

Установка библиотек

Чтобы создать веб-сервер, нам необходимо установить следующие библиотеки (щелкните ссылки ниже, чтобы загрузить эти библиотеки):

• ESPAsyncWebServer
• ESPAsyncTCP

Эти библиотеки недоступны для установки через диспетчер библиотек Arduino, поэтому вам необходимо скопировать файлы библиотеки в папку Libraries вашей установки Arduino. Кроме того, в среде Arduino IDE вы можете перейти в Sketch> Include Library> Add.zip Library и выбрать библиотеки, которые вы только что загрузили.

Как работает код

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

Первое, что вам нужно сделать, это включить библиотеку ESP8266WiFi.

// Загружаем библиотеку Wi-Fi #include

Как упоминалось выше, вам необходимо ввести свой ssid и пароль в следующих строках в кавычках.

const char * ssid = «»; константный символ * пароль = «»;

Затем вы устанавливаете свой веб-сервер на порт 80.

// Установите номер порта веб-сервера на 80 WiFiServer server (80);

Следующая строка создает переменную для хранения заголовка HTTP-запроса:

Заголовок строки;

Затем вы создаете вспомогательные переменные для хранения текущего состояния вашего вывода. Если вы хотите добавить больше вывода и сохранить его состояние, вам нужно создать больше переменных.

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

Настройка

Теперь перейдем к настройке. Функция setup () запускается только один раз при первой загрузке ESP. Сначала мы запускаем последовательную связь со скоростью 115200 бод для целей отладки.

Serial.begin (115200);

Вы также определяете свои GPIO как ВЫХОДЫ и устанавливаете их на НИЗКИЙ.

Следующие строки запускают соединение Wi-Fi с WiFi.begin (ssid, пароль), ждут успешного подключения и распечатывают IP-адрес ESP в последовательном мониторе.

Цикл

В loop () мы программируем, что происходит, когда новый клиент устанавливает соединение с веб-сервером.

ESP всегда слушает входящих клиентов с помощью этой строки:

WiFiClient client = server.available (); // Слушаем приходящих клиентов

При поступлении запроса от клиента мы сохраняем поступающие данные. Следующий цикл while будет выполняться, пока клиент остается подключенным. Не рекомендуется изменять следующую часть кода, если вы точно не знаете, что делаете.

Например, если вы нажали кнопку GPIO 5 ON, URL-адрес изменится на ESP IP, за которым следует / 5 / ON, и мы получим эту информацию в заголовке HTTP. Затем мы можем проверить, содержит ли заголовок выражение GET / 5 / on.

Если присутствует, код выводит сообщение на монитор последовательного порта, активирует переменную output5State и включает светодиод.

Аналогично работает и с другими кнопками. Следовательно, если вы хотите добавить дополнительные выходные данные, вам необходимо изменить эту часть кода, чтобы включить ее.

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

Следующее, что вам нужно сделать, это создать веб-страницу. ESP отправит в ваш браузер ответ с текстом HTML для отображения веб-страницы.

Веб-страница отправляется клиенту с помощью функции client.println (). Вы должны ввести в качестве аргумента то, что вы хотите отправить клиенту.

Первый текст, который вы всегда должны отправлять, — это следующая строка, которая указывает, что мы отправляем HTML.

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

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

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

В следующей строке вы устанавливаете заголовок своей веб-страницы, вы можете изменить этот текст на любой другой.

ESP8266 Web Server

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

Затем напишите абзац, чтобы отобразить текущее состояние GPIO 5. Как видите, мы используем переменную output5State, поэтому состояние изменяется мгновенно при изменении этой переменной.

Закрытие соединения

Наконец, когда ответ заканчивается, мы очищаем переменную заголовка и разрываем соединение клиента с client.stop ().

Schematics

Для построения схемы необходимы следующие детали:

Необходимые детали:

• ESP8266 12-Ми
• Платы для разработки Wi-Fi
• 2 светодиода
• 2 резистора (220 или 330 Ом подойдет)
• макетная доска
• Джемперы

Если вы используете ESP-01, вам также понадобится программатор FTDI.

Подключите два светодиода к ESP8266, как показано на следующей принципиальной схеме: один светодиод подключен к GPIO 4 (D2), а другой к GPIO 5 (D1).

Если вы используете ESP-01…

Если вы используете ESP8266-01, используйте приведенную ниже схему в качестве справки, но вам необходимо изменить назначение GPIO в вашем коде (в GPIO 2 и GPIO 0).

Асинхронный веб-сервер ESP — обзор проекта

Чтобы лучше понять код, давайте посмотрим, как работает веб-сервер.

Веб-сервер содержит заголовок «Веб-сервер ESP» и три кнопки для управления тремя выходами. Каждая кнопка прокрутки помечена выходным контактом GPIO. Вы можете легко удалить / добавить несколько выходов.

Красный цвет кнопки курсора означает, что выход активен (ВЫСОКОЕ состояние). Если вы активируете кнопку-ползунок, выход будет отключен (измените состояние на LOW). Когда кнопка курсора серая, это означает, что выход выключен (НИЗКОЕ состояние). Если вы активируете кнопку, она активирует выход (он изменит состояние на ВЫСОКИЙ).

Как это работает?

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

1. В первом сценарии вы нажимаете кнопку, чтобы включить GPIO 2. Когда это происходит, отправляет ли он HTTP-запрос GET на / update? Выход = 2 и состояние = 1. На основе этого URL-адреса мы меняем состояние GPIO 2 на 1 (ВЫСОКИЙ) и включаем светодиод.
2. Во втором сценарии нажмите кнопку, чтобы отключить GPIO 2. Когда это произойдет, отправьте HTTP-запрос GET a / update? Выход = 2 и состояние = 0. На основе этого URL-адреса мы меняем состояние GPIO 2 на 0 (НИЗКИЙ) и выключаем светодиод.

Как работает скетч

В этом разделе мы объясним, как работает этот скетч.

Настройка учетных данных вашей сети

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

Входные параметры

Чтобы проверить параметры, передаваемые URL-адресом (номер GPIO и его статус), мы создаем две переменные, одну для вывода, а другую для статуса:

Помните, что ESP8266 получает такие запросы: / update? Выход = 2 и состояние = 0

Объект AsyncWebServer

Создайте объект AsyncWebServer на порту 80:

Сервер AsyncWebServer (80);

Создание веб-страницы

Весь стилизованный текст HTML и JavaScript хранится в переменной index_html. Давайте пройдемся по HTML-тексту и посмотрим, что делает каждая часть.

Заголовок вставлен внутри тегов

Следующий тег
адаптируйте свою веб-страницу к экрану различных устройств (ноутбука, планшета или смартфона):

Следующая строка не разрешает запросы значков. В нашем случае у нас нет значка. Фавикон — это уменьшенное изображение веб-сайта, которое появляется рядом с его заголовком на вкладке веб-браузера. Если мы не добавим эту строку, ESP будет получать запрос на фавикон каждый раз, когда мы войдем на веб-сервер:

• Между тегами мы добавляем некоторые стили CSS для веб-страницы. Мы не будем вдаваться в подробности того, как работают стили CSS:
  

  Тело HTML документа

  Внутри тегов мы добавляем содержимое тега веб-страницы

  добавить заголовок веб-страницы. В этом случае используется текст «ESP Web Server», но вы можете добавить любой другой текст:

  ESP Web Server

  После заголовка у нас есть кнопки. Способ отображения кнопок на веб-странице (красный: если GPIO включен или серый: если GPIO отключен) зависит от текущего состояния GPIO.

  Когда вы входите на страницу веб-сервера, вы хотите, чтобы на ней отображались правильные текущие состояния GPIO. Поэтому вместо добавления текста HTML для создания кнопок мы добавим заполнитель% BUTTONPLACEHOLDER%. Затем этот заполнитель будет заменен фактическим текстом HTML для создания кнопок с правильными состояниями при загрузке веб-страницы.

  JavaScript

  Кроме того, существует JavaScript, отвечающий за отправку HTTP-запроса GET при нажатии кнопок, как описано выше:

  element.id возвращает идентификатор HTML-элемента. Идентификатор каждой кнопки будет управлять GPIO, как мы увидим в следующем разделе:

  • Кнопка GPIO 5 «element.id = 5
  • Кнопка GPIO 4 «element.id = 4
  • Кнопка GPIO 2 «element.id = 2

  Процессор

  Теперь нам нужно создать функцию processor (), которая заменяет заполнитель в тексте HTML тем, что мы определяем. Когда запрашивается веб-страница, она проверяет, есть ли заполнитель в HTML-коде. Если заполнитель% BUTTONPLACEHOLDER% найден, будет возвращен HTML-текст для создания кнопок.

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

  Давайте посмотрим, как создаются кнопки. Давайте создадим строковую переменную с именем buttons, которая содержит текст HTML для создания кнопок. Давайте объединим текст HTML с текущим статусом вывода, чтобы сделать кнопку переключения серой или красной. Текущее состояние вывода возвращается функцией outputState (GPIO) (принимает номер GPIO в качестве аргумента):

  Output — GPIO 2

  Функция outputState () возвращает «проверено», если GPIO включен, или пустое «», если GPIO отключен:

  Строка outputState (int output) {if (digitalRead (output)) {return «проверено»; } else {return «»; } }

  Таким образом, HTML-текст для GPIO 2, когда он включен, будет выглядеть так:

  Output — GPIO 2

  Разберем его подробнее, чтобы понять, как это работает.

  В HTML переключатель — это тип ввода. Тег определяет поле ввода, в которое пользователь может вводить данные. Радиокнопка — это поле ввода типа флажка. Есть много других типов полей ввода:

  Флажок можно установить или нет. Когда происходит проверка, у вас получается что-то вроде этого:

  Onchange — это атрибут события, который срабатывает, когда мы меняем значение элемента (флажок). Каждый раз, когда вы выбираете или отменяете выбор переключателя, он вызывает функцию JavaScript toggleCheckbox () для этого конкретного идентификатора элемента (этого).

  id определяет уникальный идентификатор для этого HTML-элемента. Идентификатор позволяет нам управлять элементом с помощью JavaScript или CSS:

  setup()

  В setup () мы инициализируем последовательный монитор для целей отладки:

  Serial.begin (115200);

  Схема

  Для построения схемы необходимы следующие детали:

  Необходимые детали:

  • ESP8266 12-Ми
  • 2x светодиод
  • 2 резистора (220 или 330 Ом должны работать нормально)
  • Блюдо для хлеба
  • Джемперы

  Если вы используете ESP-01, вам также понадобится программатор FTDI.

  При использовании ESP8266-01 используйте следующую диаграмму в качестве справочной.

  Шаг 1. Установка Python версии 2.7.x

  Чтобы использовать функциональность OTA, необходимо установить Python 2.7.x, если он еще не установлен на вашем компьютере.

  Перейдите на официальный сайт Python и загрузите 2.7.x (конкретная версия) для Windows (установщик MSI).

  
  Рисунок 1 — Загрузите Python 2.7.x

  Откройте установщик и следуйте инструкциям мастера установки.

  
  Рисунок 2 — Установка Python 2.7.x на ПК

  В разделе конфигурации Python 2.7.x убедитесь, что последний параметр «Добавить python.exe в путь» включен).

  
  Рисунок 3. Включите добавление python.exe в путь при установке Python

3 простых шага по использованию OTA с ESP8266

1. Установка Python версии 2.7.x. Первый шаг — установить Python 2.7.x на ваш компьютер.
2. Загрузка базовой прошивки OTA через последовательный интерфейс. Скачайте скетч с прошивкой OTA. Этот шаг необходим для выполнения следующих обновлений / загрузок по беспроводной сети.
3. Загрузите новый скетч по воздуху. Теперь вы можете загружать новые скетчи в ESP8266 из Arduino IDE по воздуху.

Загрузка NodeMCU Flasher для Windows

После подключения схемы нужно скачать флешер NodeMCU. Это EXE-файл, который можно загрузить по одной из следующих ссылок:

• Win32 Windows Flasher
• Win64 Windows Flasher

Вы можете щелкнуть здесь, чтобы найти всю информацию о флешере NodeMCU.

Зачем прошивать модуль ESP8266 с помощью NodeMCU?

NodeMCU — это прошивка, которая позволяет программировать модули ESP8266 с помощью сценария LUA. Программирование ESP8266 с LUA с использованием прошивки NodeMCU очень похоже на программирование Arduino. С помощью всего нескольких строк кода вы можете установить соединение Wi-Fi, управлять объектом групповой политики ESP8266, превратить ESP8266 в веб-сервер и многое другое.

Functions

Процедура загрузки скетча OTA через последовательный интерфейс

Заводской образ в ESP8266 не поддерживает обновление по OTA. Следовательно, вам необходимо сначала загрузить прошивку OTA на ESP8266 через последовательный интерфейс.

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

Надстройка ESP8266 для Arduino IDE поставляется с библиотекой OTA и образцом BasicOTA. Вы можете получить к нему доступ через Файл -> Примеры -> ArduinoOTA -> BasicOTA.

Рисунок 4 — Откройте скетч BasicOTA в среде Arduino IDE

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

Теперь откройте монитор последовательного порта на скорости 115200 бит / с. И нажмите кнопку RST на ESP8266. Если все в порядке, он напечатает динамический IP-адрес, полученный от маршрутизатора. Запиши это.

Рисунок 5 — Запишите IP-адрес, назначенный для ESP8266 NodeMCU

Подготовьте IDE Arduino

1. Загрузите и установите Arduino IDE в своей операционной системе (некоторые старые версии не работают).
2. Затем вам необходимо установить надстройку ESP8266 для Arduino IDE. Для этого перейдите в Файл> Настройки.
3. Введите http://arduino.esp8266.com/stable/package_esp8266com_index.json в поле URL-адреса диспетчера дополнительных карт, как показано на изображении ниже. Затем нажмите кнопку «ОК».
4. Перейдите в Инструменты> Вкладки> Диспетчер вкладок…
5. Прокрутите вниз, выберите пункт меню карты ESP8266 и установите «карту esp8266», как показано на рисунке ниже.
6. Перейдите в Инструменты> Плата и выберите свою плату ESP8266. Затем снова откройте свою Arduino IDE.

Завершение

Теперь, когда вы знаете, как работает код, вы можете редактировать код, чтобы добавить дополнительные выходные данные или отредактировать свою веб-страницу. Чтобы редактировать свою веб-страницу, вам может потребоваться знание основ HTML и CSS. Вместо того, чтобы управлять двумя светодиодами, вы можете управлять реле для управления практически любым электронным устройством.

СОЗДАНИЕ ВЕБ-СЕРВЕРА С ИСПОЛЬЗОВАНИЕМ NODEMCU

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

Читайте также: arduino_s_04