STM Урок 137. LAN8742A. LWIP. SOCKET. HTTP. AJAX

 

 

 

Продолжим работу с LWIP SOCKET, а также с протоколом HTTP.

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

В этом нам поможет технология AJAX, которой мы уже с вами пользовались, когда использовали API NETCONN, поэтому, думаю, нам будет гораздо легче, чем если бы мы знакомились с данной технологией с нуля.

Кто не видел урок 128 по применению технологии AJAX — непременно посмотрите.

Ну, теперь, когда все посмотрели урок, сразу же перейдём к проекту, который был сделан из проекта урока 136 с именем LAN8742_HTTP_SERVER_SOCKET и присвоим ему новое имя LAN8742_HTTP_SERVER_AJAX_SOCKET.

Откроем проект в Cube MX и и включим генератор случайных величин RNG

 

 

Затем сгенерируем проект для System Workbench, откроем его там, уберём при наличии отладочные настройки, настроим уровень оптимизации в 1 и пока собирать не будем, так как у нас пока нет файла fsdata.c.

Весь состав документального контента мы возьмём тот же, что и в уроке 128. Скопируем папку fs, сохранённую для данного урока, вместе с содержимым, а также файлы makefsdata.exe, makefsdata.cmd и msvcr100d.dll, чтобы мы могли свободно собирать недостающий файл с контентом, в папку «Папка с проектом//Middlewares/Third_Party/LwIP/src/apps/httpd/». Также в папку fs помести файл favicon.ico, который вы сами себе сгенерируйте под себя. Это иконка сайта, которая отображается в закладке с браузером вместе с именем документа. Если этот файл поместить, то серверу не придется постоянно отвечать браузерам об его отсутствии. Для генерации данного файла существует ряд онлайн-сервисов.

Соберём с помощью файла makefsdata.cmd файл fsdata.c, вернёмся в проект, освежим проект в дереве (Refresh) и отключим от компиляции наш файл fsdata.c.

Попробуем теперь собрать проект, проект должен будет нормально собраться.

В файле main.c из функции tcp_thread удалим ответ на запрос файла index1.html, так как у нас такого уже нет

 

else if (strncmp((char const *)buf,«GET /index1.html«,16)==0)

{

  fs_open(&file, «/index1.html«);

  write(accept_sock, (const unsigned char*)(file.data), (size_t)file.len);

  fs_close(&file);

}

 

Добавим скрипты

 

 

Добавим также ответы на запросы фоновых изображений

 

 

Добавим глобальный статический строковый массив

 

 

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

 

 

Также добавим несколько статических массивов и расположим их в памяти FLASH

 

 

После функции StrSort добавим функцию сборки и отправки строковой WEB-страницы

 

 

 

Также ниже добавим функцию сборки и отправки WEB-страницы с данными для графика, сгенерированными случайно в заданном диапазоне

 

 

И напоследок в функции tcp_thread ответим на запросы таких страниц, а заодно и примем страницу с командой на вывод квадрата определённого цвета на дисплее

 

 

Соберём код, прошьём контроллер, запустим WEB-браузер, запросим нашу страницу index.html (как мы знаем из кода, для этого достаточно введения в адресную строку только адреса IP нашего сервера) и попробуем сначала с помощью соответствующих кнопочек вывести квадратики различных цветов на дисплее нашей платы

 

Должна наблюдаться вот такая картина на дисплее

 

 

Теперь нажмём кнопку «START» для получения текстовой информации от сервера о задачах

 

 

Начнётся динамический вывод информации о задачах

 

 

Нажмём кнопку «STOP«

 

 

Вывод информации прекратится и появится возможность нажать кнопку «START» также и для вывода графической информации, пришедшей с сервера, чем мы сейчас и воспользуемся

 

 

Начнётся вывод графической информации, состоящей из случайных величин, которые нам в браузер передал сервер

 

 

 

Нажмём кнопку «STOP» и вывод информации прекратится

 

 

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

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

 

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

 

Исходный код

 

Архив файлов для сервера

 

 

Отладочную плату можно приобрести здесь 32F746G-DISCOVERY

 

 

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

 

STM LAN8742A. LWIP. SOCKET. HTTP. AJAX

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

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

*