Создание простого веб-сервера ESP8266 в Arduino IDE с использованием режимов точки доступа и станции

Создание простого веб-сервера на ESP8266 NodeMCU в Arduino IDE

В последние годы ESP8266 стал одним из самых популярных модулей в проектах IoT и Wi-Fi. Это недорогой Wi-Fi модуль, который при небольших дополнительных усилиях можно запрограммировать для работы в качестве автономного веб-сервера. Разве это не круто!

Что такое веб-сервер и как он работает?

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

Иллюстрация работы HTTP веб-сервера и клиента

В этом протоколе клиент начинает взаимодействие, отправляя HTTP-запрос на определённую веб-страницу. Затем сервер отправляет в ответ содержимое этой веб-страницы или сообщение об ошибке, если не может её найти (например, знаменитая ошибка 404).

Режимы работы ESP8266

Одна из самых полезных особенностей ESP8266 — это его способность не только подключаться к существующей Wi-Fi сети и выступать в роли веб-сервера, но и создавать собственную сеть, позволяя другим устройствам подключаться напрямую к нему и получать доступ к веб-страницам.

Это возможно благодаря тому, что ESP8266 может работать в трёх режимах: режим станции (STA), режим программной точки доступа (AP) и оба режима одновременно.

Режим станции (STA)

В режиме станции (STA) ESP8266 подключается к существующей Wi-Fi сети (той, которую создаёт ваш беспроводной маршрутизатор).

Демонстрация режима станции (STA) веб-сервера ESP8266 NodeMCU

В режиме STA ESP8266 получает IP-адрес от беспроводного маршрутизатора, к которому он подключён. С этим IP-адресом он может настроить веб-сервер и предоставлять веб-страницы всем подключённым устройствам в существующей Wi-Fi сети.

Режим программной точки доступа (AP)

В режиме точки доступа (AP) ESP8266 создаёт собственную Wi-Fi сеть и действует как хаб (подобно Wi-Fi маршрутизатору) для одной или нескольких станций.

Однако, в отличие от Wi-Fi маршрутизатора, у него нет интерфейса к проводной сети. Поэтому этот режим работы называется программной точкой доступа (soft-AP). Кроме того, к нему одновременно может подключиться не более пяти станций.

Демонстрация режима программной точки доступа (AP) веб-сервера ESP8266 NodeMCU

В режиме AP ESP8266 создаёт новую Wi-Fi сеть и назначает ей SSID (имя сети) и IP-адрес. С этим IP-адресом он может предоставлять веб-страницы всем подключённым устройствам.

Подключение светодиодов к ESP8266

Теперь, когда мы понимаем основы работы веб-сервера и режимы, в которых ESP8266 может его создать, пришло время подключить несколько светодиодов к ESP8266, которыми мы хотим управлять через Wi-Fi.

Начните с размещения NodeMCU на макетной плате, убедившись, что каждая сторона платы находится на разных сторонах макетной платы. Далее подключите два светодиода к цифровым GPIO D6 и D7 через токоограничивающий резистор 220 Ом.

Когда вы закончите, у вас должно получиться нечто похожее на изображение ниже.

Схема подключения светодиодов к ESP8266 NodeMCU для веб-сервера

Подключение светодиодов к ESP8266 NodeMCU

Идея управления устройствами через веб-сервер ESP8266

Итак, вы можете задаться вопросом: «Как мне управлять устройствами через веб-сервер, который только обрабатывает и предоставляет веб-страницы?».

Всё предельно просто. Мы будем управлять устройствами, переходя по определённому URL-адресу.

Когда вы вводите URL в веб-браузере, он отправляет HTTP-запрос (также известный как GET-запрос) веб-серверу. Обработка этого запроса является обязанностью веб-сервера.

Предположим, вы ввели в браузере URL вроде http://192.168.1.1/ledon. Тогда браузер отправит HTTP-запрос к ESP8266. Когда ESP8266 получит этот запрос, он поймёт, что пользователь хочет включить светодиод. В результате он включит светодиод и отправит динамическую веб-страницу в браузер, показывающую статус светодиода как «включён». Довольно просто, не правда ли?

Настройка веб-сервера ESP8266 в режиме точки доступа (AP)

Давайте перейдём к самому интересному!

Этот пример, как следует из заголовка, демонстрирует, как настроить веб-сервер ESP8266 в режиме точки доступа (AP) и предоставлять веб-страницы любому подключённому клиенту. Для начала подключите ESP8266 к компьютеру и загрузите скетч. Затем мы рассмотрим его более подробно.

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

/* Put your SSID & Password */
const char* ssid = "NodeMCU";  // Enter SSID here
const char* password = "12345678";  //Enter Password here

/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);

ESP8266WebServer server(80);

uint8_t LED1pin = D7;
bool LED1status = LOW;

uint8_t LED2pin = D6;
bool LED2status = LOW;

void setup() {
  Serial.begin(115200);
  pinMode(LED1pin, OUTPUT);
  pinMode(LED2pin, OUTPUT);

  WiFi.softAP(ssid, password);
  WiFi.softAPConfig(local_ip, gateway, subnet);
  delay(100);

  server.on("/", handle_OnConnect);
  server.on("/led1on", handle_led1on);
  server.on("/led1off", handle_led1off);
  server.on("/led2on", handle_led2on);
  server.on("/led2off", handle_led2off);
  server.onNotFound(handle_NotFound);

  server.begin();
  Serial.println("HTTP server started");
}
void loop() {
  server.handleClient();
  if(LED1status)
  {digitalWrite(LED1pin, HIGH);}
  else
  {digitalWrite(LED1pin, LOW);}

  if(LED2status)
  {digitalWrite(LED2pin, HIGH);}
  else
  {digitalWrite(LED2pin, LOW);}
}

void handle_OnConnect() {
  LED1status = LOW;
  LED2status = LOW;
  Serial.println("GPIO7 Status: OFF | GPIO6 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status));
}

void handle_led1on() {
  LED1status = HIGH;
  Serial.println("GPIO7 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED2status));
}

void handle_led1off() {
  LED1status = LOW;
  Serial.println("GPIO7 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED2status));
}

void handle_led2on() {
  LED2status = HIGH;
  Serial.println("GPIO6 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,true));
}

void handle_led2off() {
  LED2status = LOW;
  Serial.println("GPIO6 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,false));
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

String SendHTML(uint8_t led1stat,uint8_t led2stat){
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<title>LED Control</title>\n";
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
  ptr +=".button {display: block;width: 80px;background-color: #1abc9c;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
  ptr +=".button-on {background-color: #1abc9c;}\n";
  ptr +=".button-on:active {background-color: #16a085;}\n";
  ptr +=".button-off {background-color: #34495e;}\n";
  ptr +=".button-off:active {background-color: #2c3e50;}\n";
  ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  ptr +="<h1>ESP8266 Web Server</h1>\n";
  ptr +="<h3>Using Access Point(AP) Mode</h3>\n";

   if(led1stat)
  {ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
  else
  {ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}

  if(led2stat)
  {ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
  else
  {ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}

  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}

Доступ к веб-серверу в режиме AP

После загрузки скетча откройте монитор порта на скорости 115200 бод и нажмите кнопку RESET на ESP8266. Если всё в порядке, появится сообщение «HTTP server started».

Вывод монитора порта веб-сервера ESP8266 NodeMCU в режиме точки доступа — сервер запущен

Теперь возьмите телефон, ноутбук или другое устройство, которое может подключаться к Wi-Fi сети, и найдите сеть под названием «NodeMCU». Подключитесь к сети, используя пароль 12345678.

Подключение к сети точки доступа веб-сервера ESP8266 NodeMCU

После подключения к сети NodeMCU AP откройте браузер и перейдите по адресу 192.168.1.1. ESP8266 должен вернуть веб-страницу с текущим статусом светодиодов и кнопками. В то же время вы можете проверить монитор порта, чтобы увидеть состояние GPIO-контактов ESP8266.

Веб-страница веб-сервера ESP8266 NodeMCU в режиме точки доступа

Вывод монитора порта веб-сервера ESP8266 NodeMCU в режиме точки доступа — доступ к веб-странице

Теперь, следя за URL-адресом, нажмите кнопку, чтобы включить LED1. Как только вы нажмёте кнопку, ESP8266 получит запрос на URL /led1on. Затем он включит LED1 и предоставит веб-страницу с обновлённым статусом светодиода. Он также выведет состояние GPIO-контакта в мониторе порта.

Управление светодиодами через веб-страницу ESP8266 NodeMCU в режиме точки доступа

Вывод монитора порта — управление светодиодами в режиме точки доступа

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

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

Подробное объяснение кода

Скетч начинается с подключения библиотеки ESP8266WiFi.h. Эта библиотека содержит специфичные для ESP8266 методы, которые мы используем для подключения к сети. Далее мы подключаем библиотеку ESP8266WebServer.h, которая содержит методы, помогающие настроить сервер и обрабатывать входящие HTTP-запросы без необходимости беспокоиться о низкоуровневых деталях реализации.

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

Поскольку мы настраиваем веб-сервер ESP8266 в режиме точки доступа (AP), он создаст собственную Wi-Fi сеть. Поэтому нам нужно задать SSID, пароль, IP-адрес, маску подсети и шлюз.

/* Put your SSID & Password */
const char* ssid = "NodeMCU";  // Enter SSID here
const char* password = "12345678";  //Enter Password here

/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);

Далее мы создаём объект библиотеки ESP8266WebServer, чтобы получить доступ к её функциям. Конструктор этого объекта принимает в качестве параметра порт, на котором сервер будет слушать. Поскольку HTTP по умолчанию использует порт 80, мы используем это значение. Это позволяет подключаться к серверу без указания порта в URL.

// declare an object of ESP8266WebServer library
ESP8266WebServer server(80);

Далее мы объявляем GPIO-контакты NodeMCU, к которым подключены светодиоды, а также их начальное состояние.

uint8_t LED1pin = D7;
bool LED1status = LOW;

uint8_t LED2pin = D6;
bool LED2status = LOW;

Внутри функции Setup()

В функции setup мы настраиваем наш HTTP-сервер. Сначала мы устанавливаем последовательное соединение для отладки и настраиваем GPIO-контакты как OUTPUT.

Serial.begin(115200);
pinMode(LED1pin, OUTPUT);
pinMode(LED2pin, OUTPUT);

Затем мы настраиваем программную точку доступа для создания Wi-Fi сети, указывая SSID, пароль, IP-адрес, маску подсети и шлюз.

WiFi.softAP(ssid, password);
WiFi.softAPConfig(local_ip, gateway, subnet);
delay(100);

Для обработки входящих HTTP-запросов нам нужно указать, какой код должен выполняться при доступе к определённому URL. Для этого мы используем метод .on(). Этот метод принимает два параметра: относительный URL-путь и имя функции, которая будет вызвана при посещении этого URL.

Первая строка приведённого ниже фрагмента кода, например, указывает, что когда сервер получает HTTP-запрос по корневому (/) пути, он вызовет функцию handle_OnConnect(). Важно отметить, что указанный URL является относительным путём.

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

server.on("/", handle_OnConnect);
server.on("/led1on", handle_led1on);
server.on("/led1off", handle_led1off);
server.on("/led2on", handle_led2on);
server.on("/led2off", handle_led2off);

Мы не указали, что сервер должен отдавать, если клиент запрашивает URL, не указанный в server.on(). В ответ должна быть ошибка 404 (Страница не найдена). Для этого мы используем метод server.onNotFound().

server.onNotFound(handle_NotFound);

Теперь, чтобы запустить сервер, мы вызываем метод begin() объекта server.

server.begin();
Serial.println("HTTP server started");

Внутри функции Loop()

Фактическая обработка входящих HTTP-запросов происходит в функции loop. Для этого мы используем метод handleClient() объекта server. Мы также изменяем состояние светодиодов в зависимости от запроса.

void loop() {
  server.handleClient();
  if(LED1status)
  {digitalWrite(LED1pin, HIGH);}
  else
  {digitalWrite(LED1pin, LOW);}

  if(LED2status)
  {digitalWrite(LED2pin, HIGH);}
  else
  {digitalWrite(LED2pin, LOW);}
}

Теперь нам нужно написать функцию handle_OnConnect(), которую мы ранее привязали к корневому (/) URL с помощью server.on. Мы начинаем эту функцию с установки состояния обоих светодиодов в LOW (начальное состояние светодиодов) и выводим это в монитор порта.

Мы используем метод send для ответа на HTTP-запрос. Хотя метод может быть вызван с различными аргументами, в простейшей форме ему требуется код HTTP-ответа, тип контента и сам контент.

Первый параметр, который мы передаём в метод send — это код 200 (один из кодов состояния HTTP), что соответствует ответу OK. Затем мы указываем тип контента как «text/html» и, наконец, передаём пользовательскую функцию SendHTML(), которая генерирует динамическую HTML-страницу со статусом светодиодов.

void handle_OnConnect()
{
  LED1status = LOW;
  LED2status = LOW;
  Serial.println("GPIO7 Status: OFF | GPIO6 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status));
}

Аналогично мы пишем ещё пять функций для обработки запросов включения/выключения светодиодов и страницы ошибки 404.

void handle_led1on() {
  LED1status = HIGH;
  Serial.println("GPIO7 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED2status));
}

void handle_led1off() {
  LED1status = LOW;
  Serial.println("GPIO7 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED2status));
}

void handle_led2on() {
  LED2status = HIGH;
  Serial.println("GPIO6 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,true));
}

void handle_led2off() {
  LED2status = LOW;
  Serial.println("GPIO6 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,false));
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

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

Каждый раз, когда веб-сервер ESP8266 получает запрос от веб-клиента, функция sendHTML() генерирует веб-страницу. Она просто объединяет HTML-код в длинную строку и возвращает её в функцию server.send(), которую мы обсуждали ранее. Функция использует статус светодиодов в качестве параметра для динамической генерации HTML-содержимого.

Первый текст, который вы всегда должны отправлять — это объявление <!DOCTYPE>, которое указывает, что мы отправляем HTML-код.

String SendHTML(uint8_t led1stat,uint8_t led2stat){
String ptr = "<!DOCTYPE html> <html>\n";

Элемент <meta> viewport делает веб-страницу адаптивной, обеспечивая её хороший вид на всех устройствах. Тег title определяет заголовок страницы.

ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<title>LED Control</title>\n";

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

Далее у нас есть CSS-стили для кнопок и общего внешнего вида веб-страницы. Мы выбираем шрифт Helvetica и определяем, что содержимое будет отображаться как inline-block с выравниванием по центру.

ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";

Следующий код устанавливает цвет, шрифт и отступы вокруг тегов body, H1, H3 и p.

ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";

Кнопки также стилизуются с такими свойствами, как цвет, размер, отступы и другие. Селектор :active изменяет внешний вид кнопок при нажатии.

ptr +=".button {display: block;width: 80px;background-color: #1abc9c;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
ptr +=".button-on {background-color: #1abc9c;}\n";
ptr +=".button-on:active {background-color: #16a085;}\n";
ptr +=".button-off {background-color: #34495e;}\n";
ptr +=".button-off:active {background-color: #2c3e50;}\n";

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

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

ptr +="<h1>ESP8266 Web Server</h1>\n";
ptr +="<h3>Using Access Point(AP) Mode</h3>\n";

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

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

if(led1stat)
  {ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
else
  {ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}

if(led2stat)
  {ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
else
  {ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}

Настройка веб-сервера ESP8266 в режиме станции (STA)

Перейдём к следующему примеру, который показывает, как настроить веб-сервер ESP8266 в режиме станции (STA) и предоставлять веб-страницы любому подключённому клиенту в существующей сети.

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

Изменение SSID и пароля перед загрузкой скетча веб-сервера в режиме STA

Как только вы это сделаете, загрузите скетч.

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

/*Put your SSID & Password*/
const char* ssid = "YourNetworkName";  // Enter SSID here
const char* password = "YourPassword";  //Enter Password here

ESP8266WebServer server(80);

uint8_t LED1pin = D7;
bool LED1status = LOW;

uint8_t LED2pin = D6;
bool LED2status = LOW;

void setup() {
  Serial.begin(115200);
  delay(100);
  pinMode(LED1pin, OUTPUT);
  pinMode(LED2pin, OUTPUT);

  Serial.println("Connecting to ");
  Serial.println(ssid);

  //connect to your local wi-fi network
  WiFi.begin(ssid, password);

  //check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

  server.on("/", handle_OnConnect);
  server.on("/led1on", handle_led1on);
  server.on("/led1off", handle_led1off);
  server.on("/led2on", handle_led2on);
  server.on("/led2off", handle_led2off);
  server.onNotFound(handle_NotFound);

  server.begin();
  Serial.println("HTTP server started");
}
void loop() {
  server.handleClient();
  if(LED1status)
  {digitalWrite(LED1pin, HIGH);}
  else
  {digitalWrite(LED1pin, LOW);}

  if(LED2status)
  {digitalWrite(LED2pin, HIGH);}
  else
  {digitalWrite(LED2pin, LOW);}
}

void handle_OnConnect() {
  LED1status = LOW;
  LED2status = LOW;
  Serial.println("GPIO7 Status: OFF | GPIO6 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status));
}

void handle_led1on() {
  LED1status = HIGH;
  Serial.println("GPIO7 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED2status));
}

void handle_led1off() {
  LED1status = LOW;
  Serial.println("GPIO7 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED2status));
}

void handle_led2on() {
  LED2status = HIGH;
  Serial.println("GPIO6 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,true));
}

void handle_led2off() {
  LED2status = LOW;
  Serial.println("GPIO6 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,false));
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

String SendHTML(uint8_t led1stat,uint8_t led2stat){
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<title>LED Control</title>\n";
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
  ptr +=".button {display: block;width: 80px;background-color: #1abc9c;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
  ptr +=".button-on {background-color: #1abc9c;}\n";
  ptr +=".button-on:active {background-color: #16a085;}\n";
  ptr +=".button-off {background-color: #34495e;}\n";
  ptr +=".button-off:active {background-color: #2c3e50;}\n";
  ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  ptr +="<h1>ESP8266 Web Server</h1>\n";
    ptr +="<h3>Using Station(STA) Mode</h3>\n";

   if(led1stat)
  {ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
  else
  {ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}

  if(led2stat)
  {ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
  else
  {ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}

  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}

Доступ к веб-серверу в режиме STA

После загрузки скетча откройте монитор порта на скорости 115200 бод и нажмите кнопку RESET на ESP8266. Если всё в порядке, он отобразит динамический IP-адрес, полученный от вашего маршрутизатора, а также сообщение «HTTP server started».

Вывод монитора порта веб-сервера ESP8266 NodeMCU в режиме станции — сервер запущен

Далее откройте браузер и перейдите по IP-адресу, отображённому в мониторе порта. NodeMCU должен предоставить веб-страницу с текущим состоянием светодиодов и двумя кнопками для управления ими. В то же время вы можете проверить монитор порта, чтобы увидеть состояние GPIO-контактов NodeMCU.

Веб-страница веб-сервера ESP8266 NodeMCU в режиме станции

Вывод монитора порта веб-сервера ESP8266 NodeMCU в режиме станции — доступ к веб-странице

Теперь, следя за URL-адресом, нажмите кнопку, чтобы включить LED1. Как только вы нажмёте кнопку, ESP8266 получит запрос на URL /led1on. Затем он включит LED1 и предоставит веб-страницу с обновлённым статусом светодиода. Он также выведет состояние GPIO-контакта в мониторе порта.

Управление светодиодами через веб-страницу ESP8266 NodeMCU в режиме станции

Вывод монитора порта — управление светодиодами в режиме станции

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

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

Объяснение кода

Единственное отличие этого кода от предыдущего заключается в том, что мы не создаём собственную Wi-Fi сеть, а подключаемся к существующей сети с помощью функции WiFi.begin().

//connect to your local wi-fi network
  WiFi.begin(ssid, password);

Пока ESP8266 пытается подключиться к сети, мы можем использовать функцию WiFi.status() для проверки состояния подключения.

//check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }

Для справки, эта функция возвращает следующие статусы:

WL_CONNECTED: когда подключение к Wi-Fi сети установлено
WL_NO_SHIELD: когда Wi-Fi модуль не обнаружен
WL_IDLE_STATUS: временный статус, назначаемый при вызове WiFi.begin(), который остаётся активным до тех пор, пока не истечёт количество попыток (что приведёт к WL_CONNECT_FAILED) или пока не будет установлено соединение (что приведёт к WL_CONNECTED)
WL_NO_SSID_AVAIL: когда нет доступных SSID
WL_SCAN_COMPLETED: когда сканирование сетей завершено
WL_CONNECT_FAILED: когда подключение не удалось после всех попыток
WL_CONNECTION_LOST: когда соединение потеряно
WL_DISCONNECTED: когда отключён от сети

После подключения к сети функция WiFi.localIP() используется для вывода IP-адреса ESP8266.

Serial.println("");
Serial.println("WiFi connected..!");
Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

Единственное различие между режимами AP и STA состоит в том, что один создаёт собственную сеть, а другой подключается к существующей. Поэтому остальной код для обработки HTTP-запросов и предоставления веб-страниц в режиме STA такой же, как описано выше для режима AP. Это включает в себя:

Объявление GPIO-контактов NodeMCU, к которым подключены светодиоды
Определение нескольких методов server.on() для обработки входящих HTTP-запросов
Определение метода server.onNotFound() для обработки ошибки HTTP 404
Создание пользовательских функций, которые вызываются при обращении к определённому URL
Создание HTML-страницы
Стилизация веб-страницы
Создание кнопок и отображение их состояния