ESP8266 NodeMCU WebSerial: веб-монитор последовательного порта

В этом руководстве вы узнаете, как создать и использовать веб-версию «Монитора последовательного порта» (Serial Monitor) для ваших проектов ESP8266 NodeMCU с помощью библиотеки WebSerial. Она создаёт веб-интерфейс для вывода отладочных сообщений, как вы это делаете с обычным монитором порта. Вы также можете отправлять сообщения из веб-монитора на ESP8266.

У нас есть аналогичное руководство для платы ESP32: ESP32 WebSerial — веб-монитор последовательного порта.

Веб-монитор последовательного порта

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

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

Обходное решение этой проблемы — использовать веб-монитор последовательного порта. ESP8266 поднимает веб-сервер, который обслуживает страницу для просмотра сообщений, как вы бы делали с «обычным» монитором порта. Веб-страница WebSerial также позволяет отправлять данные с веб-страницы на вашу плату.

Для этого руководства мы будем использовать библиотеку WebSerial.

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

Возможности WebSerial

Список возможностей WebSerial:

• Работает на WebSocket;

• Логирование в реальном времени;

• Можно открыть любое количество мониторов в браузере;

• Использует AsyncWebserver для лучшей производительности.

Функции WebSerial

Использование WebSerial аналогично использованию монитора последовательного порта. Его основные функции — print() и println():

• print(): выводит данные в веб-монитор последовательного порта без символа новой строки (в той же строке);

• println(): выводит данные в веб-монитор последовательного порта с символом новой строки (на следующей строке).

Установка библиотеки WebSerial

Для этого проекта мы будем использовать библиотеку WebSerial.h. Чтобы установить библиотеку:

1. В Arduino IDE перейдите в Sketch > Include Library > Manage Libraries…

2. Найдите webserial.

3. Установите библиотеку WebSerial от Ayush Sharma.

Вам также нужно установить библиотеки ESPAsyncWebServer и AsyncTCP. Нажмите на следующие ссылки, чтобы скачать файлы библиотек.

• ESPAsyncWebServer

• ESPAsyncTCP

Чтобы установить эти библиотеки, нажмите на предыдущие ссылки для загрузки файлов библиотек. Затем в Arduino IDE перейдите в Sketch > Include Library > Add .ZIP Library…

Если вы используете VS Code с расширением PlatformIO, скопируйте следующее в файл platformio.ini, чтобы подключить библиотеки.

lib_deps = ESP Async WebServer
  ayushsharma82/WebSerial @ ^1.1.0

Пример ESP8266 WebSerial

Библиотека предоставляет простой пример создания веб-монитора последовательного порта для вывода и приёма сообщений. Мы немного изменили пример, чтобы сделать его более интерактивным.

Этот пример выводит Hello! в веб-монитор каждые две секунды. Кроме того, вы можете отправлять сообщения из веб-монитора на плату. Вы можете отправить сообщение ON, чтобы включить встроенный светодиод платы, или сообщение OFF, чтобы его выключить.

/*
  Rui Santos
  Complete project details at https://RandomNerdTutorials.com/esp8266-nodemcu-webserial-library/

  This sketch is based on the WebSerial library example: ESP8266_Demo
  https://github.com/ayushsharma82/WebSerial
*/

#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <WebSerial.h>

#define LED 2

AsyncWebServer server(80);

const char* ssid = "REPLACE_WITH_YOUR_SSID";          // Your WiFi SSID
const char* password = "REPLACE_WITH_YOUR_PASSWORD";  // Your WiFi Password

void recvMsg(uint8_t *data, size_t len){
  WebSerial.println("Received Data...");
  String d = "";
  for(int i=0; i < len; i++){
    d += char(data[i]);
  }
  WebSerial.println(d);
  if (d == "ON"){
    digitalWrite(LED, LOW);
  }
  if (d=="OFF"){
    digitalWrite(LED, HIGH);
  }
}

void setup() {
  Serial.begin(115200);
  pinMode(LED, OUTPUT);
  digitalWrite(LED, HIGH);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  if (WiFi.waitForConnectResult() != WL_CONNECTED) {
    Serial.printf("WiFi Failed!\n");
    return;
  }
  Serial.println("IP Address: ");
  Serial.println(WiFi.localIP());
  // WebSerial is accessible at "<IP Address>/webserial" in browser
  WebSerial.begin(&server);
  WebSerial.msgCallback(recvMsg);
  server.begin();
}

void loop() {
  WebSerial.println("Hello!");
  delay(2000);
}

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

Перед загрузкой кода на плату не забудьте указать свои сетевые учётные данные.

В этом примере ESP8266 работает в режиме станции (station mode). Этот пример также работает в режиме точки доступа. Чтобы узнать, как настроить ESP8266 в режиме точки доступа, прочитайте:

• ESP8266 NodeMCU — точка доступа (AP) для веб-сервера

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

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

Сначала нужно подключить необходимые библиотеки для WebSerial. Библиотека ESP8266WiFi.h необходима для подключения ESP8266 к сети Wi-Fi.

#include <ESP8266WiFi.h>

Библиотека WebSerial использует библиотеки ESPAsyncTCP и ESPAsyncWebServer для создания веб-монитора последовательного порта.

#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>

Наконец, библиотека WebSerial предоставляет удобные методы для создания веб-монитора последовательного порта.

#include <WebSerial.h>

Создайте переменную LED для встроенного светодиода на GPIO 2.

#define LED 2

Инициализируйте объект AsyncWebServer на порту 80 для настройки веб-сервера.

AsyncWebServer server(80);

Укажите свои сетевые учётные данные в следующих переменных:

const char* ssid = "REPLACE_WITH_YOUR_SSID"; // Your WiFi SSID
const char* password = "REPLACE_WITH_YOUR_PASSWORD"; // Your WiFi Password

Обработка принятых сообщений

Следующая функция принимает входящие сообщения, отправленные из веб-монитора последовательного порта. Сообщение сохраняется в переменной d. Затем оно выводится в веб-мониторе с помощью WebSerial.println(d).

void recvMsg(uint8_t *data, size_t len){
  WebSerial.println("Received Data...");
  String d = "";
  for(int i=0; i < len; i++){
    d += char(data[i]);
  }
  WebSerial.println(d);

Далее мы проверяем, содержит ли переменная d значение ON или OFF, и включаем или выключаем светодиод соответственно.

if (d == "ON"){
  digitalWrite(LED, LOW);
}
if (d=="OFF"){
  digitalWrite(LED, HIGH);
}

Встроенный светодиод работает с инвертированной логикой: отправьте сигнал HIGH, чтобы выключить его, и сигнал LOW, чтобы включить.

setup()

В setup() установите светодиод как OUTPUT и выключите его по умолчанию.

pinMode(LED, OUTPUT);
digitalWrite(LED, HIGH);

Подключите плату к локальной сети:

WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
if (WiFi.waitForConnectResult() != WL_CONNECTED) {
  Serial.printf("WiFi Failed!\n");
  return;
}
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());

Инициализируйте веб-монитор последовательного порта с помощью метода begin() объекта WebSerial. Эта функция принимает в качестве аргумента объект AsyncWebServer.

WebSerial.begin(&server);

Зарегистрируйте функцию recvMsg() как функцию обратного вызова с помощью метода msgCallback() объекта WebSerial. Функция recvMsg() будет выполняться каждый раз, когда вы отправляете сообщение из монитора на плату.

WebSerial.msgCallback(recvMsg);

Наконец, инициализируйте сервер.

server.begin();

Именно после вызова этой строки веб-монитор последовательного порта начнёт работать.

loop()

В loop() выводите сообщение Hello! каждые 2000 миллисекунд (2 секунды) с помощью функции println() объекта WebSerial.

void loop() {
  WebSerial.println("Hello!");
  delay(2000);
}

Демонстрация

После указания сетевых учётных данных вы можете загрузить код на плату.

После загрузки откройте «обычный» монитор последовательного порта на скорости 115200 бод. На экране появится IP-адрес платы.

Теперь откройте браузер в вашей локальной сети и введите IP-адрес ESP, а затем /webserial. Например, в моём случае:

192.168.1.100/webserial

Страница WebSerial должна загрузиться.

Как видите, каждые две секунды выводится Hello!. Кроме того, вы можете отправлять команды на ESP8266. Все отправленные команды отображаются обратно в веб-мониторе. Вы можете отправлять команды ON и OFF для управления встроенным светодиодом.

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

Теперь вы можете легко добавить веб-монитор последовательного порта в любой из ваших проектов с помощью библиотеки WebSerial.

Заключение

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

Надеемся, это руководство будет вам полезно. У нас есть другие руководства по веб-серверам, которые могут вас заинтересовать:

• ESP8266 — веб-сервер с использованием Server-Sent Events (автоматическое обновление показаний датчиков)

• ESP8266 WebSocket сервер: управление выходами (Arduino IDE)

• ESP8266 OTA (обновление по воздуху) — AsyncElegantOTA с использованием Arduino IDE

Узнайте больше о плате ESP8266 с нашими ресурсами:

• Build Web Servers with ESP32 and ESP8266 eBook

• Home Automation using ESP8266

• Другие руководства и проекты ESP8266…