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

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

Categories Arduino 2 комментария

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

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

 

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

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

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

ESP8266 — режимы работы

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

Работа ESP8266может осуществляться в трех разных режимах:

  1. Станция (STA)
  2. Точка доступа (AP)
  3. Комбинированный

Режим станции

Модуль ESP8266, который подключается к существующей WiFi сети (созданной беспроводным маршрутизатором), называется Станция (STA).

Режим станции ESP8266

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

Режим точка доступа

Модуль ESP8266, который создает свою собственную WiFi сеть и действует как концентратор (точно так же как маршрутизатор WiFi) для одной или нескольких станций, называется Точкой доступа (AP).

Блок питания 0...30В/3A
Набор для сборки регулируемого блока питания...
Подробнее

В отличие от WiFi-роутера, он не имеет подключения к проводной сети. Максимальное количество станций, которые могут подключиться к нему, ограничено пятью.

Режим точка доступа

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

Выводы ESP8266 NodeMCU

Ниже представлена распиновка чипа ESP8266 NodeMCU:

распиновка чипа ESP8266 NodeMCU

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

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

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

Концепция управления вещами с веб-сервера ESP8266

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

Когда вы вводите URL-адрес в веб-браузере и нажимаете клавишу ВВОД, браузер отправляет HTTP-запрос (он же GET-запрос) на веб-сервер. Задача веб-сервера — обработать этот запрос и выполнить определенное действие. Вы, возможно, уже поняли, что мы собираемся управлять вещами, обращаясь к определенному URL.

Например, предположим, что мы ввели в браузере URL-адрес  http://192.168.1.1/ledon. Браузер отправляет HTTP-запрос ESP8266 для обработки. Когда ESP8266 получает этот запрос он понимает, что пользователь хочет включить светодиод. Таким образом, он включает светодиод и посылает динамическую веб-страницу в браузер, сообщая о включении светодиода.

Модуль ESP8266 в качестве HTTP-сервера с использованием режима точки доступа (AP)

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

Как следует из заголовка, этот пример демонстрирует, как превратить ESP8266 в точку доступа (AP) и обслуживать веб-страницы для любого подключенного клиента. Для начала подключите ESP8266 NodeMCU к компьютеру и загрузите следующий код:

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

/ * Установить свой SSID и пароль * /
const char* ssid = "NodeMCU";
const char* password = "12345678";

/ * Настройка IP-адрес * /
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-сервера.

запуск HTTP-сервера

Затем найдите любое устройство, которое вы можете подключить к WiFi сети — телефон, ноутбук и т. д. Найдите сеть под названием NodeMCU. Подключитесь к сети с паролем 123456789.

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

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

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

Теперь давайте внимательнее посмотрим на код, чтобы понять, как он работает.

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

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

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

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

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

IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);

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

ESP8266WebServer server(80);

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

uint8_t LED1pin = D7;
bool LED1status = LOW;

uint8_t LED2pin = D6;
bool LED2status = LOW;

Функция Setup()

Здесь мы настраиваем наш HTTP-сервер перед его запуском. Прежде всего, мы открываем последовательное соединение для целей отладки и устанавливаем порты GPIO в OUTPUT.

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

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

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

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

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

Аналогично, нам нужно указать еще 4 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(). Он должен ответить HTTP-статусом 404 (Not Found) и сообщением для пользователя. Мы также помещаем это в функцию и используем, server.onNotFound() чтобы указать, что необходимо выполнить когда будет получен запрос на URI, который не был указан в server.on

server.onNotFound(handle_NotFound);

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

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

Функция Loop()

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

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

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

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

В нашем случае мы отправляем код 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 веб-страницы

Функция SendHTML() отвечает за создание веб-страницы всякий раз, когда веб-сервер ESP8266 получает запрос от веб-клиента. Он просто объединяет 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, определили содержимое, которое будет отображаться в виде встроенного блока, выровненного по центру.

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. Таким образом, в зависимости от состояния выводов GPIO, отображается кнопка ON / OFF.

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 в качестве HTTP-сервера в режиме WiFi Station (STA)

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

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

После того как вы внесете изменения, загрузите следующий код:

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

/ * Установить свой SSID и пароль * /
const char* ssid = "YourNetworkName";  // SSID 
const char* password = "YourPassword";  //пароль
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);

    // подключаемся к локальной Wi-Fi сети
  WiFi.begin(ssid, password);

  // проверка подключения Wi-Fi к сети
  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-сервер запущен.

Затем откройте браузер и укажите IP-адрес, указанный на последовательном мониторе. NodeMCU должен обработать веб-страницу, показывающую текущее состояние светодиодов и две кнопки для управления ими. Если взглянуть на последовательный монитор, вы можете увидеть состояние выводов GPIO NodeMCU.

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

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

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

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

WiFi.begin(ssid, password);

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

while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}

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

  • WL_CONNECTED : назначается при подключении к сети Wi-Fi
  • WL_NO_SHIELD : назначается, когда нет 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 : назначается при отключении от сети

Как только ESP8266 подключится к сети, в последовательном мониторе будет напечатан 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() для обработки 404 ошибки HTTP
  • Создание пользовательских функций, которые выполняются при нажатии на определенный URL
  • Создание HTML-страницы
  • Стилизация веб-страницы
  • Создание кнопок и отображение их статуса


Инвертор 12 В/ 220 В
Инвертор с чистой синусоидой, может обеспечивать питание переменно...
Подробнее


Похожие записи:


редактор
Отправить сообщение об ошибке.

2 комментария

  1. А как получать ответ от клиента в вашем примере ???

    Ответить

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