Создание веб-сервера на ESP8266 – код и схемы (NodeMCU)

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

Создание веб-сервера на ESP8266 - код и схемы (NodeMCU)

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

Это руководство охватывает два различных метода создания веб-сервера:

  • Часть 1: Создание веб-сервера с использованием Arduino IDE

  • Часть 2: Создание веб-сервера с использованием прошивки NodeMCU

ЧАСТЬ 1: СОЗДАНИЕ ВЕБ-СЕРВЕРА С ИСПОЛЬЗОВАНИЕМ ARDUINO IDE

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

Это руководство доступно в видеоформате (смотрите ниже) и в текстовом формате (продолжайте читать эту страницу).

Подготовка Arduino IDE

1. Скачайте и установите Arduino IDE на вашу операционную систему (некоторые старые версии не будут работать).

2. Затем вам нужно установить дополнение ESP8266 для Arduino IDE. Для этого перейдите в File > Preferences.

3. Введите http://arduino.esp8266.com/stable/package_esp8266com_index.json в поле «Additional Board Manager URLs», как показано на рисунке ниже. Затем нажмите кнопку «OK».

Установка плат ESP8266 в Arduino IDE - Additional Boards Manager URLs

4. Перейдите в Tools > Board > Boards Manager…

Установка плат ESP8266 в Arduino IDE - Boards Manager

5. Прокрутите вниз, выберите меню платы ESP8266 и установите «esp8266 by ESP8266 Community», как показано на рисунке ниже.

Установка плат ESP8266 в Arduino IDE

6. Перейдите в Tools > Board и выберите вашу плату ESP8266. Затем перезапустите Arduino IDE.

Код

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

/*********
  Rui Santos
  Complete project details at https://randomnerdtutorials.com
*********/

// Load Wi-Fi library
#include <ESP8266WiFi.h>

// Replace with your network credentials
const char* ssid     = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

// Set web server port number to 80
WiFiServer server(80);

// Variable to store the HTTP request
String header;

// Auxiliar variables to store the current output state
String output5State = "off";
String output4State = "off";

// Assign output variables to GPIO pins
const int output5 = 5;
const int output4 = 4;

// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0;
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;

void setup() {
  Serial.begin(115200);
  // Initialize the output variables as outputs
  pinMode(output5, OUTPUT);
  pinMode(output4, OUTPUT);
  // Set outputs to LOW
  digitalWrite(output5, LOW);
  digitalWrite(output4, LOW);

  // Connect to Wi-Fi network with SSID and password
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // Print local IP address and start web server
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop(){
  WiFiClient client = server.available();   // Listen for incoming clients

  if (client) {                             // If a new client connects,
    Serial.println("New Client.");          // print a message out in the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    currentTime = millis();
    previousTime = currentTime;
    while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client's connected
      currentTime = millis();
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        header += c;
        if (c == '\n') {                    // if the byte is a newline character
          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();

            // turns the GPIOs on and off
            if (header.indexOf("GET /5/on") >= 0) {
              Serial.println("GPIO 5 on");
              output5State = "on";
              digitalWrite(output5, HIGH);
            } else if (header.indexOf("GET /5/off") >= 0) {
              Serial.println("GPIO 5 off");
              output5State = "off";
              digitalWrite(output5, LOW);
            } else if (header.indexOf("GET /4/on") >= 0) {
              Serial.println("GPIO 4 on");
              output4State = "on";
              digitalWrite(output4, HIGH);
            } else if (header.indexOf("GET /4/off") >= 0) {
              Serial.println("GPIO 4 off");
              output4State = "off";
              digitalWrite(output4, LOW);
            }

            // Display the HTML web page
            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<link rel=\"icon\" href=\"data:,\">");
            // CSS to style the on/off buttons
            // Feel free to change the background-color and font-size attributes to fit your preferences
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            client.println(".button2 {background-color: #77878A;}</style></head>");

            // Web Page Heading
            client.println("<body><h1>ESP8266 Web Server</h1>");

            // Display current state, and ON/OFF buttons for GPIO 5
            client.println("<p>GPIO 5 - State " + output5State + "</p>");
            // If the output5State is off, it displays the ON button
            if (output5State=="off") {
              client.println("<p><a href=\"/5/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/5/off\"><button class=\"button button2\">OFF</button></a></p>");
            }

            // Display current state, and ON/OFF buttons for GPIO 4
            client.println("<p>GPIO 4 - State " + output4State + "</p>");
            // If the output4State is off, it displays the ON button
            if (output4State=="off") {
              client.println("<p><a href=\"/4/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/4/off\"><button class=\"button button2\">OFF</button></a></p>");
            }
            client.println("</body></html>");

            // The HTTP response ends with another blank line
            client.println();
            // Break out of the while loop
            break;
          } else { // if you got a newline, then clear currentLine
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }
      }
    }
    // Clear the header variable
    header = "";
    // Close the connection
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

Просмотреть исходный код

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

// Replace with your network credentials
const char* ssid = "";
const char* password = "";

Загрузка скетча

Загрузка скетча на ESP-12E

Если вы используете комплект ESP-12E NodeMCU Kit, загрузка скетча очень проста, так как он имеет встроенный программатор. Подключите плату к компьютеру. Убедитесь, что выбрана правильная плата и COM-порт.

Затем нажмите кнопку Upload в Arduino IDE и подождите несколько секунд, пока не увидите сообщение «Done uploading.» в нижнем левом углу.

Загрузка кода веб-сервера в Arduino IDE ESP8266 NodeMCU

Загрузка скетча на ESP-01

Загрузка кода на ESP-01 требует установления последовательного соединения между вашим ESP8266 и программатором FTDI, как показано на схеме ниже.

Схема подключения ESP8266 ESP-01 к программатору FTDI для прошивки

Примечание: в качестве альтернативы вы можете использовать последовательный адаптер ESP8266-01, который проще в использовании и менее подвержен ошибкам.

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

ESP8266

Программатор FTDI

RX

TX

TX

RX

CH_PD

3.3V

GPIO 0

GND

VCC

3.3V

GND

GND

Если у вас новый программатор FTDI, вам, вероятно, потребуется установить драйверы FTDI на ваш компьютер с Windows. Посетите этот сайт для получения официальных драйверов. (Если COM-порт неактивен в вашей Arduino IDE, вероятно, у вас не установлены драйверы).

Затем вам просто нужно подключить программатор FTDI к компьютеру и загрузить код на ESP8266.

Схемы

Для сборки схемы этого руководства вам понадобятся следующие компоненты:

Необходимые компоненты:

Если вы используете ESP-01, вам также понадобится программатор FTDI или последовательный адаптер.

Вы можете использовать ссылки выше или перейти непосредственно на MakerAdvisor.com/tools, чтобы найти все компоненты для ваших проектов по лучшей цене!

Подключите два светодиода к ESP8266, как показано на следующей принципиальной схеме – один светодиод подключен к GPIO 4 (D2), а другой к GPIO 5 (D1).

Принципиальная схема ESP8266 NodeMCU - управление светодиодами через веб-сервер

Если вы используете ESP-01…

Если вы используете ESP8266-01, используйте следующую принципиальную схему в качестве справки, но вам нужно изменить назначение GPIO в коде (на GPIO 2 и GPIO 0).

Схема ESP-01 - управление светодиодами через веб-сервер

Тестирование веб-сервера

Теперь вы можете загрузить код, и он будет работать сразу. Не забудьте проверить, что выбрана правильная плата и COM-порт, иначе вы получите ошибку при попытке загрузки. Откройте Serial Monitor на скорости 115200 бод.

Определение IP-адреса ESP

Нажмите кнопку RESET на ESP8266, и он выведет IP-адрес ESP в Serial Monitor.

Веб-сервер ESP8266 NodeMCU - IP-адрес в Serial Monitor Arduino IDE

Скопируйте этот IP-адрес, так как он понадобится вам для доступа к веб-серверу.

Доступ к веб-серверу

Откройте браузер, введите IP-адрес ESP, и вы увидите следующую страницу. Эта страница отправляется ESP8266, когда вы делаете запрос на IP-адрес ESP.

Веб-сервер ESP8266 NodeMCU - управление GPIO светодиодами Arduino IDE

Если вы посмотрите на Serial Monitor, то увидите, что происходит в фоновом режиме. ESP получает HTTP-запрос от нового клиента – в данном случае вашего браузера.

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

Веб-сервер ESP8266 NodeMCU - HTTP-ответ в Serial Monitor Arduino IDE

Тестирование веб-сервера

Давайте протестируем веб-сервер. Нажмите кнопку, чтобы включить GPIO 5. ESP получает запрос на URL /5/on и включает LED 5.

Веб-сервер ESP8266 NodeMCU - GPIO включение в Serial Monitor Arduino IDE

Состояние светодиода также обновляется на веб-странице.

Веб-сервер ESP8266 NodeMCU - состояние GPIO на веб-странице

Протестируйте кнопку GPIO 4 и убедитесь, что она работает аналогичным образом.

Как работает код

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

Первое, что вам нужно сделать – это подключить библиотеку ESP8266WiFi.

// Load Wi-Fi library
#include <ESP8266WiFi.h>

Как упоминалось ранее, вам нужно вставить ваши ssid и password в следующие строки внутри двойных кавычек.

const char* ssid = "";
const char* password = "";

Затем вы устанавливаете веб-сервер на порт 80.

// Set web server port number to 80
WiFiServer server(80);

Следующая строка создает переменную для хранения заголовка HTTP-запроса:

String header;

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

// Auxiliar variables to store the current output state
String output5State = "off";
String output4State = "off";

Вам также нужно назначить GPIO для каждого из ваших выходов. Здесь мы используем GPIO 4 и GPIO 5. Вы можете использовать любые другие подходящие GPIO.

// Assign output variables to GPIO pins
const int output5 = 5;
const int output4 = 4;

setup()

Теперь перейдем к функции setup(). Функция setup() выполняется только один раз при первой загрузке ESP. Сначала мы запускаем последовательную связь на скорости 115200 бод для отладки.

Serial.begin(115200);

Вы также определяете GPIO как выходы (OUTPUT) и устанавливаете их в LOW.

// Initialize the output variables as outputs
pinMode(output5, OUTPUT);
pinMode(output4, OUTPUT);
// Set outputs to LOW
digitalWrite(output5, LOW);
digitalWrite(output4, LOW);

Следующие строки начинают Wi-Fi соединение с WiFi.begin(ssid, password), ожидают успешного подключения и выводят IP-адрес ESP в Serial Monitor.

// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
 delay(500);
 Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();

loop()

В функции loop() мы программируем, что происходит, когда новый клиент устанавливает соединение с веб-сервером.

ESP постоянно прослушивает входящих клиентов с помощью этой строки:

WiFiClient client = server.available(); // Listen for incoming clients

Когда запрос получен от клиента, мы сохраняем входящие данные. Цикл while, который следует далее, будет выполняться, пока клиент остается подключенным. Мы не рекомендуем изменять следующую часть кода, если вы точно не знаете, что делаете.

if (client) { // If a new client connects,
 Serial.println("New Client."); // print a message out in the serial port
 String currentLine = ""; // make a String to hold incoming data from the client
 while (client.connected()) { // loop while the client's connected
 if (client.available()) { // if there's bytes to read from the client,
  char c = client.read(); // read a byte, then
  Serial.write(c); // print it out the serial monitor
  header += c;
  if (c == '\n') { // if the byte is a newline character
   // if the current line is blank, you got two newline characters in a row.
   // that's the end of the client HTTP request, so send a response:
   if (currentLine.length() == 0) {
    // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
    // and a content-type so the client knows what's coming, then a blank line:
    client.println("HTTP/1.1 200 OK");
    client.println("Content-type:text/html");
    client.println("Connection: close");
    client.println();

Следующий раздел операторов if и else проверяет, какая кнопка была нажата на вашей веб-странице, и соответственно управляет выходами. Как мы видели ранее, мы делаем запрос на разные URL в зависимости от нажатой кнопки.

// turns the GPIOs on and off
if (header.indexOf("GET /5/on") >= 0) {
  Serial.println("GPIO 5 on");
  output5State = "on";
  digitalWrite(output5, HIGH);
} else if (header.indexOf("GET /5/off") >= 0) {
  Serial.println("GPIO 5 off");
  output5State = "off";
  digitalWrite(output5, LOW);
} else if (header.indexOf("GET /4/on") >= 0) {
  Serial.println("GPIO 4 on");
  output4State = "on";
  digitalWrite(output4, HIGH);
} else if (header.indexOf("GET /4/off") >= 0) {
  Serial.println("GPIO 4 off");
  output4State = "off";
  digitalWrite(output4, LOW);
}

Например, если вы нажали кнопку GPIO 5 ON, URL изменяется на IP-адрес ESP, за которым следует /5/ON, и мы получаем эту информацию в HTTP-заголовке. Таким образом, мы можем проверить, содержит ли заголовок выражение GET /5/on.

Если содержит, код выводит сообщение в Serial Monitor, изменяет переменную output5State на on и включает светодиод.

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

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

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

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

Первый текст, который вы всегда должны отправлять – это следующая строка, которая указывает, что мы отправляем HTML.

<!DOCTYPE html><html>

Затем следующая строка делает веб-страницу адаптивной в любом браузере.

client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");

Следующая строка используется для предотвращения запросов, связанных с favicon – вам не нужно беспокоиться об этой строке.

client.println("<link rel=\"icon\" href=\"data:,\">");

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

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

client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");

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

client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");

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

client.println(".button2 {background-color: #77878A;}</style></head>");

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

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

// Web Page Title
client.println("<h1>ESP8266 Web Server</h1>");

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

Затем вы пишете параграф для отображения текущего состояния GPIO 5. Как видите, мы используем переменную output5State, чтобы состояние мгновенно обновлялось при изменении этой переменной.

client.println("<p>GPIO 5 - State " + output5State + "</p>");

Затем мы отображаем кнопку включения или выключения в зависимости от текущего состояния GPIO.

if (output5State=="off") {
 client.println("<p><a href=\"/5/on\"><button class=\"button\">ON</button></a></p>");
} else {
 client.println("<p><a href=\"/5/off\"><button class=\"button button2\">OFF</button></a></p>");
}

Мы используем ту же процедуру для GPIO 4.

Закрытие соединения

Наконец, когда ответ завершен, мы очищаем переменную header и прекращаем соединение с клиентом с помощью client.stop().

// Clear the header variable
header = "";
// Close the connection
client.stop();

Дальнейшее развитие

Теперь, когда вы знаете, как работает код, вы можете модифицировать его, чтобы добавить больше выходов или изменить веб-страницу. Для изменения веб-страницы вам может понадобиться знание HTML и CSS.

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

Для создания веб-сервера, отображающего показания датчиков, вы можете прочитать следующие руководства:

В качестве альтернативы, если вы хотите программировать ESP8266 с использованием MicroPython, вы можете прочитать это руководство: Веб-сервер ESP32/ESP8266 MicroPython – управление выходами

Если вам нравится ESP8266, обязательно ознакомьтесь с нашим курсом Домашняя автоматизация с ESP8266.

ЧАСТЬ 2: СОЗДАНИЕ ВЕБ-СЕРВЕРА С ИСПОЛЬЗОВАНИЕМ ПРОШИВКИ NODEMCU

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

ESP8266 - создание веб-сервера с использованием прошивки NodeMCU

Сначала посмотрите видео-демонстрацию ниже

Зачем прошивать ESP8266 модуль прошивкой NodeMCU?

NodeMCU – это прошивка, которая позволяет программировать модули ESP8266 с помощью скрипта LUA. Программирование ESP8266 на LUA с использованием прошивки NodeMCU очень похоже на то, как вы программируете Arduino. С помощью всего нескольких строк кода вы можете установить Wi-Fi соединение, управлять GPIO ESP8266, превращая ваш ESP8266 в веб-сервер и многое другое.

Скачивание NodeMCU Flasher для Windows

После подключения вашей схемы вам нужно скачать NodeMCU flasher. Это файл .exe, который вы можете скачать по одной из следующих ссылок:

Вы можете нажать здесь, чтобы найти всю информацию о NodeMCU flasher.

Прошивка ESP8266

Если вы используете ESP8266-12, вам достаточно подключить ESP к компьютеру. Если вы используете ESP-01, вам нужен программатор FTDI для подключения к компьютеру. Для установления последовательного соединения между ESP8266 и программатором FTDI используйте схему, показанную ниже.

Схема подключения ESP8266 ESP-01 к программатору FTDI для прошивки

Откройте загруженный flasher, и должно появиться окно (как показано на следующем рисунке).

Программа NodeMCU Flasher для ESP8266

Нажмите кнопку «Flash», и процесс прошивки должен начаться немедленно (возможно, вам придется изменить некоторые настройки на вкладке Advanced). После завершения процесса должен появиться зеленый кружок с галочкой.

Схемы

Для сборки схемы вам понадобятся следующие компоненты:

Необходимые компоненты:

Если вы используете ESP-01, вам также понадобится программатор FTDI.

Вы можете использовать ссылки выше или перейти непосредственно на MakerAdvisor.com/tools, чтобы найти все компоненты для ваших проектов по лучшей цене!

Если вы используете ESP-01…

Если вы используете ESP8266-01, используйте следующую принципиальную схему в качестве справки.

Схема ESP-01 - управление светодиодами через веб-сервер

Загрузка кода

Мы рекомендуем использовать программу ESPlorer, созданную 4refr0nt, для создания и сохранения LUA-файлов на ESP8266. Следуйте этим инструкциям для загрузки и установки ESPlorer:

  1. Нажмите здесь, чтобы скачать ESPlorer

  2. Распакуйте эту папку

  3. Перейдите в папку dist (путь: ESPlorer-master\ESPlorer\dist)

  4. Запустите ESPlorer.jar. Это программа на JAVA, поэтому на вашем компьютере должна быть установлена JAVA.

  5. Откройте ESPlorer

Начало работы с ESPlorer ESP8266 NodeMCU

Вы должны увидеть окно, похожее на предыдущий рисунок. Следуйте этим инструкциям для загрузки LUA-файла:

  1. Подключите программатор FTDI к компьютеру

  2. Выберите порт вашего программатора FTDI

  3. Нажмите Open/Close

  4. Выберите вкладку NodeMCU+MicroPython

  5. Создайте новый файл с именем init.lua

  6. Нажмите Save to ESP

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

Загрузка кода на ESP8266 NodeMCU через ESPlorer

Код

Загрузите следующий код на ESP8266 с помощью вышеуказанного программного обеспечения. Ваш файл должен называться «init.lua». Вы можете нажать здесь, чтобы скачать файл.

wifi.setmode(wifi.STATION)
wifi.sta.config("YOUR_NETWORK_NAME","YOUR_NETWORK_PASSWORD")
print(wifi.sta.getip())
led1 = 3
led2 = 4
gpio.mode(led1, gpio.OUTPUT)
gpio.mode(led2, gpio.OUTPUT)
srv=net.createServer(net.TCP)
srv:listen(80,function(conn)
    conn:on("receive", function(client,request)
        local buf = "";
        local _, _, method, path, vars = string.find(request, "([A-Z]+) (.+)?(.+) HTTP");
        if(method == nil)then
            _, _, method, path = string.find(request, "([A-Z]+) (.+) HTTP");
        end
        local _GET = {}
        if (vars ~= nil)then
            for k, v in string.gmatch(vars, "(%w+)=(%w+)&*") do
                _GET[k] = v
            end
        end
        buf = buf.."<h1> ESP8266 Web Server</h1>";
        buf = buf.."<p>GPIO0 <a href=\"?pin=ON1\"><button>ON</button></a>&nbsp;<a href=\"?pin=OFF1\"><button>OFF</button></a></p>";
        buf = buf.."<p>GPIO2 <a href=\"?pin=ON2\"><button>ON</button></a>&nbsp;<a href=\"?pin=OFF2\"><button>OFF</button></a></p>";
        local _on,_off = "",""
        if(_GET.pin == "ON1")then
              gpio.write(led1, gpio.HIGH);
        elseif(_GET.pin == "OFF1")then
              gpio.write(led1, gpio.LOW);
        elseif(_GET.pin == "ON2")then
              gpio.write(led2, gpio.HIGH);
        elseif(_GET.pin == "OFF2")then
              gpio.write(led2, gpio.LOW);
        end
        client:send(buf);
        client:close();
        collectgarbage();
    end)
end)

Просмотреть исходный код

Не забудьте заменить данные вашей Wi-Fi сети в приведенном выше коде (имя сети и пароль).

Доступ к веб-серверу

Когда ESP8266 перезагрузится, он выведет IP-адрес вашего ESP8266 в Serial Monitor. Если вы введете IP-адрес ESP8266 в веб-браузере, вы сможете получить доступ к веб-серверу.

Веб-сервер ESP8266 NodeMCU - управление выходами светодиодами

Наши самые популярные проекты на ESP8266

Если вам нравится ESP8266, вам также могут понравиться: