}
}
}
// Закрыть соединение:
client.stop();
}
}
Рассмотрим код подробнее.
Мы создаем объект WiFiServer, который “слушает” входящие соединения на определенном порту (в нашем случае 8000). Тот, кто подсоединяется к нашему серверу, называется “клиентом”. За взаимодействие с ним отвечает класс WiFiClient.
Далее, мы побайтно читаем данные с помощью вызова функции client.read(), и складываем данные в строку currentLine. К примеру, строка запроса может быть такой - GET / HTTP/1.1, здесь “GET” это тип запроса, “/” - это адрес главной страницы, 1.1 - тип стандарта. Но сам запрос мы не анализируем, а просто посылаем всегда один и тот же ответ - заглавную страницу с HTML-текстом “Hello world”. Строки типа “HTTP/1.1 200 OK” - это служебная информация, которая нужна браузеру (клиенту) чтобы понять, что мы ответили (200 - это код возврата OK, говорящий о том что все нормально). Строка “Content-type:text/html” говорит клиенту о том, что возвращаться будет HTML-страница.
Наша страница имеет следующий вид:
<html>
<head>
<title>ESP32 Server</title>
</head>
<body>Hello world</body>
</html>
Как можно видеть, она содержит “заголовок” (header) и “тело” (body). Заголовок содержит тег title - в нем хранится строка, которая будет выведена в заголовке браузера.
Итак, компилируем данный код, загружаем его в плату, и в Serial Monitor смотрим какой IP-адрес получила ESP32 при доступе к WiFi-сети. Вводим этот адрес в строку браузера, не забыв указать номер порта, например http://192.168.0.104:8000.
Все готово! Через небольшое время ожидания мы видим страницу браузера с нашим текстом Hello world. Обращаем внимание на то, что и заголовок и текст соответствуют тому, что мы ввели.
Самостоятельная работа: изучить команды HTML, поэкспериментировать с разными вариантами разметки и форматирования текста.
3.9 Управляем светодиодом через WebМы уже умеем запустить свой Web-сервер, но пока он не делает ничего полезного, кроме отображения Hello world. Исправим это упущение, и сделаем кнопки для управления светодиодом через веб браузер.
Принцип простой - мы добавим в HTML-страницу 2 ссылки, нажатие которых и будет отслеживаться сервером.
Новая HTML-страница будет выглядеть так:
<html>
<head><title>ESP32 Server</title></head>
<body>
Turn <a href=\"/H\">LED ON</a><br>
Turn <a href=\"/L\">LED OFF</a><br>
</body>
</html>
В HTML-странице можно видеть 2 ссылки с значением адреса /H и /L, когда пользователь нажмет на них, на сервер будет отправлен GET-запрос с соответствующим адресом. Это нам и нужно.
Код программы целиком приведен ниже.
#include <WiFi.h>
const char* ssid = "TP-LINK_AB11";
const char* password = "12345678";
int ledPin = 2;
WiFiServer server(8000);
void setup() {
Serial.begin(115200);
pinMode(ledPin, OUTPUT);
delay(10);
Serial.print("Connecting to ");
Serial.println(ssid);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
WiFi.begin(ssid, password);
Serial.print(".");
}
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}
void loop(){
WiFiClient client = server.available();
if (client) {
Serial.println("New Client.");
String currentLine = "";
while (client.connected()) {
if (client.available()) {
char c = client.read();
if (c == '\n') {
if (currentLine.length() == 0) {
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println();
client.print("<html>");
client.print("<head><title>ESP32 Server</title></head>");
client.print("<body>");
client.print("Turn <a href=\"/H\">LED on</a><br>");
client.print("Turn <a href=\"/L\">LED off</a><br>");
client.print("</body></html>");
client.println();
break;
} else {
currentLine = "";
}
} else if (c != '\r') {
currentLine += c;
}
// Проверка ссылок от клиента, может быть "GET /H" или "GET /L":
if (currentLine.endsWith("GET /H")) {
digitalWrite(ledPin, HIGH); // GET /H - включить светодиод
}
if (currentLine.endsWith("GET /L")) {
digitalWrite(ledPin, LOW); // GET /L выключить светодиод
}
}
}
// Закрыть соединение
client.stop();
}
}
Запускаем программу, обновляем страницу, и видим нашу “панель управления”:
Проверяем, что нажатие на одну из ссылок действительно включает или выключает светодиод.
Кстати, если у интернет-провайдера доступна услуга “статический IP”, то можно настроить перенаправление портов в роутере, и управлять светодиодом через Интернет, даже из другого города или другой страны.
Самостоятельная работа #1: изучить разные варианты форматирования текста в HTML, например, таблицы, шрифты, выравнивание. Это позволит делать более сложный и более красивый интерфейс.
Самостоятельная работа #1: подключить к плате “пищалку”, и настроить управление ею через web. Это позволит посылать сигналы родственникам или друзьям.
3.10 Выводим изображения на web-сервереВышеприведенный сервер конечно, работает, однако далеко не является шедевром web-дизайна. Немного улучшить его можно, добавив изображения. Однако, это не так просто, т.к. наш мини-сервер не имеет файловой системы, и просто положить нужные файлы мы не можем. Вместо этого используем так называемое base64-кодирование, позволяющее вставить изображение прямо в код страницы.
Чтобы вставить картинку в HTML, нужно.
1. Выбрать любую картинку. Возьмем картинку попроще, чтобы она
