Урок 32. Wi-Fi. STA. HTTP Server. AJAX



Продолжаем работу с нашим сервером HTTP и на данном уроке мы попробуем не просто что-то передать от клиента на сервер, но и дождаться от сервера ответа, что позволит нам судить о том, что сервер наши данные успешно принял и команды наши выполнил, а также данным образом мы можем получить от сервера ещё какую-то нужную нам информацию.

Поможет нам в данной задаче технология AJAX, которая помимо всего этого позволит нам отобразить полученную информацию в любом месте страницы без перезагрузки всей страницы, что сэкономит нам ещё и сетевой трафик. С данной технологией мы уже работали с использованием контроллера STM32, поэтому код нам писать будет гораздо проще.

Напомню только, что такое AJAX.

AJAX означает Asynchronous Javascript and XML. Из данной расшифровки следует, что AJAX использует именно язык JavaScript.

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

 

 

Проект был сделан из проекта прошлого урока с именем WIFI_STA_HTTP_SERVER_PARAM и получил новое имя WIFI_STA_HTTP_SERVER_AJAX.

Откроем наш проект в Espressif IDE и попробуем его собрать. Если всё нормально, то пока займёмся страничкой, которую мы сделаем также из странички, которую мы писали в прошлом уроке. Откроем её в блокноте и, во-первых, добавим в открывающем теге body функцию для события завершения открытия документа

 

<body onload="onload()">

 

Выше добавим блок с java-скриптами, в котором и разместим данную функцию, пока пустотелую

 

 

Объявим глобальную переменную для объекта класса запроса

 

 

А в теле функции onload создадим такой объект

 

 

В начале тела страницы добавим именованный блок

 

 

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

Чтобы таблица смотрелась лучше, создадим для неё стили

 

 

Теперь немного изменим код наших кнопок, так как будет уже не форма, а блок

вместо строки

 

<form action="" method="get">

 

будет обычный div

 

<div>

 

А вместо </form> будет также соответствующий закрывающий тег

 

</div>

 

Код кнопок также немного изменится. вместо типа submit будет button, а также будут добавлены события на нажатие, которые будут вызывать соответствующие функции.

Кот тела тела блока теперь будет таким

 

 

Вернёмся в наш скрипт и в функции onload отправим запрос на таблицу серверу, и, дождавшись ответа, отправим нашу таблицу в блок для отображения

 

 

Обратим внимание, что метод запроса у нас будет POST. При использовании такого метода запроса параметры со значениями будут уже в строке браузера не видны. Также нужно в данном случае заполнять ещё кое-какие свойства в запросе, но, так как наш сервер не обрабатывает скрипты php, то это необязательно.

А чтобы информация о светящихся и несветящихся кристаллах светодиода отображалась ещё и в реальном времени, так как зайти на сервер мы можем одновременно с нескольких клиентов, мы задействуем таймер.

 

 

Объявим глобальную переменную для идентификатора таймера

 

 

В конце тела функции onload после отправки запроса создадим наш таймер, обработчик которого будет запускаться автоматически каждую секунду

 

 

Ниже добавим функцию для обработчика практически с тем же кодом запроса, что и в функции onload

 

 

Подобные запросы отправим при нажатии каждой кнопки. Различие будет только в имени и значении параметра

 

 

Со страничкой управились. Можно сразу залить изменения в раздел SPIFFS и заняться нашим проектом.

 

 

В файле http.c после функции download_get_handler добавим подобный обработчик, который будет обрабатывать запросы с методом POST

 

 

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

Пока оставим наш обработчик и перейдём в функцию start_webserver, в которой объявим ещё одну переменную типа структуры для URI но уже с методом запроса POST. В соответствующем поле структуры мы и пропишем наш новый обработчик

 

 

Не забываем зарегистрировать наш URI

 

 

Вернёмся в наш обработчик download_post_handler и в случае соответствия параметра и значения определённому цвету кристалла зажжём его или погасим

 

 

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

Подготовим память для строки с таблицей

 

 

Дальнейший код заслуживает особого внимания.

Как я и говорил на прошлом уроке, мне не удалось найти функцию в комплекте IDF, которая отследит уровень ножки порта. Вернее, есть такая функция, но она работает только с ножками порта, настроенными на вход. А хотелось бы передать клиенту честную информацию о зажжённых или незажжённых светодиодах. Поэтому будем использовать регистр напрямую. Объявим переменную и сразу же считаем туда весь нужный нам регистр

 

 

Подготовим таблицу, в которой и занесём уровни в виде строк ON или OFF, учитывая, что из-за общего анода у нас всё наоборот

 

 

Ну и осталось нам лишь только передать документ клиенту

 

 

Вот вроде бы и всё.

Соберём код, прошьём контроллер, узнаем сетевой адрес и запросим нашу страничку в браузере

 

 

Всё отлично отображается.

Если мы посмотрим обмен трафика в WireShark, то увидим, что постоянно раз в секунду идут запросы с ответами

 

 

Нажмём красную кнопку. У нас загорится соответствующий светодиод

 

 

Также в табличке мы увидим отчёт нашего сервера о том, что светодиод горит

 

 

Если нажмём кнопку RED OFF, то светодиод погаснет

 

 

В табличке также светодиод отключился

 

 

Если мы проделаем то же самое со следующими кнопками и кристаллами, у нас также будет работать. Например, давайте зажжём все кристаллы, поочерёдно нажав все три правые кнопки

 

 

Светятся все три кристалла, а также на страничке тоже все включились

 

 

 

Можете также подключиться с других компьютеров, смартфонов планшетов, всё будет работать, причём одновременно, я пробовал подключиться одновременно до трёх устройств. Также, благодаря таймеру, информация, изменённая с другого клиента, изменяется во всех практически в реальном времени.

Итак, на данном занятии нам удалось передавать данные клиенту по запросу посредством протокола HTTP с использованием некоторых интересных возможностей языка JavaScript без перезагрузки страницы. И не только это, а ещё и передавать данные от клиента серверу также без перезагрузки страницы.

Всем спасибо за внимание!

 

Данная статья в Дзен.

 

 

Предыдущий урок Программирование МК ESP32 Следующий урок

 

Исходный код

 

 

Недорогие отладочные платы ESP32 можно купить здесь:

На AliExpress Недорогие отладочные платы ESP32

На Яндекс.Маркет Недорогие отладочные платы ESP32

Логический анализатор 16 каналов можно приобрести (AliExpress) здесь

 

 

Смотреть ВИДЕОУРОК в YouTube (нажмите на картинку)

ESP32 Wi-Fi. STA. HTTP Server. AJAX

 

Смотреть ВИДЕОУРОК в Дзен (нажмите на картинку)

ESP32 Wi-Fi. STA. HTTP Server. AJAX

Один комментарий на “Урок 32. Wi-Fi. STA. HTTP Server. AJAX
  1. Влад:

    Спасибо большое за нужные и полезные уроки.
    Не нашел файл который нужно залить в SPIFFS.
    Не подскажете где его найти?
    Спасибо

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*