HTML ESP8266

HTTP-сервер ESP8266. Выводим информацию HTML, Javascript и CSS

Цель этого урока — объяснить, как работать с HTML, Javascript и CSS на веб-сервере ESP8266 HTTP.

Важно учитывать, что HTML, Javascript и CSS — это языки, которые выполняются / отображаются на стороне клиента. Поскольку мы собираемся выполнять HTTP-запросы из веб-браузера, он будет отвечать за рендеринг HTML и CSS и выполнение Javascript.

Это означает, что мы узнаем, как интерпретировать HTML, CSS или Javascript. Как увидим ниже, этот код будет храниться в строках, которые будут возвращены в ответах HTTP, почти так же, как мы это делали бы для возврата любого другого типа контента.

В этом простом примере мы создадим главную страницу на HTML. Страницу с кодом Javascript на которой будет запускаться окно предупреждения при нажатии кнопки. И страницу с кнопкой, стилизованной с помощью CSS.

Код HTTP-сервера Arduino.

Чтобы создать наш веб-сервер, мы будем использовать тот же подход, который описан в предыдущем уроке, в котором объясняются все детали настройки сервера.

Итак, самая важная часть, о которой нам нужно помнить, это то, что нам нужно указать функцию обработки для каждого URL-адреса нашего сервера. Возьмём код из последнего урока, нам нужно объявить глобальную переменную класса ESP8266WebServer и передать в качестве аргумента номер порта, на котором сервер будет прослушивать входящие HTTP-запросы.

ESP8266WebServer server (80);

Затем для каждого URL-адреса указываем функцию обработки, которая будет выполняться при отправке запроса по этому пути. Для этого мы вызываем метод on объекта server.

Для простоты предположим, что код HTML, Javascript и CSS будет статическим. Это означает, что мы можем объявить его в строке и просто вернуть, когда HTTP-запрос выполняется по желаемому URL-адресу.

Снова вспомним код из последнего урока, вызываем метод send объекта server. В качестве аргументов передаем ему код возврата для запроса, тип возвращаемого содержимого и само содержимое.

Итак, сначала мы хотим вернуть код HTTP 200 (код ОК). Затем нам нужно убедиться, что мы указали возвращаемый контент как «text / html», чтобы браузер знал, что он должен интерпретироваться и отображаться html. Тип содержимого всегда будет таким, потому что в случае отправки кода CSS или Javascript он будет встроен в код HTML.

Наконец, передадим строку с кодом HTML / Javascript / CSS. Функция будет выглядеть следующим образом.

HTML-код страницы для вывода HTTP-сервер ESP8266.

В нашем случае будем предполагать, что корневой URL («/») будет отображать страницу HTML. На которой будет текст с описанием и 2 ссылки. Каждая из этих ссылок перенаправляет пользователя на URL-адрес, с примером работы Javascript или CSS-кода. Код страницы приведён ниже.

const char * htmlMessage = " " " " "" "" "" "" " " "
Это Основная страница только в формате HTML. Пожалуйста, выберите кнопку ниже.
" "Javascript Код" "
" "CSS Код" " " " ";

Объяснение деталей структуры HTML выходит за рамки этого урока, и будет проведен только краткий анализ того, что делает каждый элемент кода.

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

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

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

const char * javascriptCode = " " " " "" "" "" "" " " "
Нажмите на кнопку, чтобы получить сообщение от ESP8266:
 " "Сообщение " "" " " " ";

button> тег для создания кнопки. Одно из его свойств позволяет указать функцию, которая будет выполняться при нажатии кнопки (событие onclick). В этом случае назначаем этому событию выполнение функции Javascript под названием «buttonFunction».

Затем используем тег , который позволяет указать код Javascript. В данном случае именно там указываем код упомянутой функции buttonFunction. Данный код соответствует всплывающему окну предупреждения, которое выведет сообщение «Привет от ESP8266!».

const char * cssButton = "" " " "" "" "" "" "" "" "" "" "";

#include #include ESP8266WebServer server(80); //Webserver Object const char* ssid = "NetworkName"; const char* password = "NetworkPass"; byte tries = 10; // Попыткок подключения к точке доступа void setup() < Serial.begin(9600); //Открыть последовательное соединение WiFi.begin(ssid, password); while (--tries && WiFi.status() != WL_CONNECTED) < delay(500); Serial.print("."); >if (WiFi.status() != WL_CONNECTED) < Serial.println("Non Connecting to WiFi.."); >else < // Иначе удалось подключиться отправляем сообщение // о подключении и выводим адрес IP Serial.println(""); Serial.println("WiFi connected"); Serial.println("IP address: "); Serial.println(WiFi.localIP()); >delay(500); Serial.println("Waiting to connect…"); server.on("/", []() < //Определите функцию обработки корневого пути (HTML-сообщение) server.send(200, "text/html", htmlMessage); >); server.on("/javascript", []() < //Определите функцию обработки для пути javascript server.send(200, "text/html", javascriptCode); >); server.on("/cssButton", []() < //Определите функцию обработки для пути CSS server.send(200, "text/html", cssButton); >); server.begin(); //Start the server Serial.println("Server listening"); > void loop() < server.handleClient(); //Обработка входящих запросов >