ESP8266 NodeMCU OTA (Over-the-Air) обновления – AsyncElegantOTA в Arduino IDE

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

Примечание

Это руководство УСТАРЕЛО. Пожалуйста, следуйте этому вместо него: ESP8266 NodeMCU OTA (Over-the-Air) обновления – библиотека ElegantOTA в Arduino IDE.

Кроме того, вы также можете загружать новые файлы в файловую систему ESP8266 (LittleFS). Библиотека очень проста в использовании и совместима с библиотекой ESPAsyncWebServer, которую мы часто используем для создания проектов веб-серверов.

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

У нас есть аналогичное руководство для платы ESP32: ESP32 OTA (Over-the-Air) обновления – AsyncElegantOTA в Arduino IDE

Смотрите видеоурок

Этот проект доступен в видеоформате и в текстовом формате. Вы можете посмотреть видео ниже или прокрутить вниз для получения текстовых инструкций.

Обзор

Это руководство охватывает:

• Добавление функции ElegantOTA в ваш веб-сервер

• Загрузка новой прошивки через OTA на плату ESP8266

• Загрузка файлов в LittleFS через OTA на плату ESP8266

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

OTA (Over-the-Air) программирование

OTA (Over-the-Air) обновление – это процесс загрузки новой прошивки на плату ESP8266 NodeMCU с использованием Wi-Fi-соединения вместо последовательной связи. Эта функциональность чрезвычайно полезна в случае отсутствия физического доступа к плате ESP8266.

Существуют различные способы выполнения OTA-обновлений. В этом руководстве мы рассмотрим, как это сделать с помощью библиотеки AsyncElegantOTA. По нашему мнению, это один из лучших и простейших способов выполнения OTA-обновлений.

Библиотека AsyncElegantOTA создает веб-сервер, к которому вы можете получить доступ в вашей локальной сети для загрузки новой прошивки или файлов в файловую систему (LittleFS). Файлы, которые вы загружаете, должны быть в формате .bin. Позже в руководстве мы покажем, как преобразовать ваши файлы в формат .bin.

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

Библиотека AsyncElegantOTA

Как упоминалось ранее, существует множество альтернатив для OTA-программирования с платами ESP8266. Например, в Arduino IDE в папке Examples есть пример BasicOTA (который у нас никогда не работал хорошо); и множество других примеров из различных библиотек.

Большинство наших проектов веб-серверов с ESP8266 используют библиотеку ESPAsyncWebServer. Поэтому нам нужно было решение, совместимое с этой библиотекой. Библиотека AsyncElegantOTA идеально подходит для того, что нам нужно:

• Она совместима с библиотекой ESPAsyncWebServer;

• Вам нужно добавить всего три строки кода, чтобы добавить возможности OTA к вашему «обычному» Async Web Server;

• Она позволяет загружать не только новую прошивку на плату, но и файлы в файловую систему ESP8266 (LittleFS);

• Она предоставляет красивый и современный интерфейс веб-сервера;

• Она работает чрезвычайно хорошо.

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

OTA-обновления с библиотекой AsyncElegantOTA – Краткое резюме

Чтобы добавить возможности OTA в ваши проекты с помощью библиотеки AsyncElegantOTA, выполните следующие шаги:

1. Установите библиотеки AsyncElegantOTA, ESPAsyncTCP и ESPAsyncWebServer;

2. Подключите библиотеку AsyncElegantOTA в начале скетча Arduino: #include <AsyncElegantOTA.h>;

3. Добавьте эту строку AsyncElegantOTA.begin(&server); перед server.begin();

4. Откройте браузер и перейдите по адресу http://<IPAddress>/update, где <IPAddress> – это IP-адрес вашего ESP8266.

Продолжайте читать руководство для получения более подробных шагов.

Как работает OTA Web Updater?

• Первый скетч должен быть загружен через последовательный порт. Этот скетч должен содержать код для создания OTA Web Updater, чтобы вы могли загружать код позже с помощью браузера.

• Скетч OTA Web Updater создает веб-сервер, к которому вы можете получить доступ для загрузки нового скетча через веб-браузер.

• Затем вам нужно реализовать подпрограммы OTA в каждом загружаемом скетче, чтобы иметь возможность выполнять следующие обновления/загрузки по воздуху.

• Если вы загрузите код без подпрограммы OTA, вы больше не сможете получить доступ к веб-серверу и загрузить новый скетч по воздуху.

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

В этом руководстве ESP8266 будет программироваться с помощью Arduino IDE. Если вы хотите узнать, как сделать то же самое с помощью VS Code + PlatformIO, следуйте следующему руководству: ESP8266 NodeMCU OTA (Over-the-Air) обновления – AsyncElegantOTA (VS Code + PlatformIO)

Вы можете установить библиотеку AsyncElegantOTA с помощью Arduino Library Manager. В Arduino IDE перейдите в Sketch > Include Library > Manage Libraries… Найдите «AsyncElegantOTA» и установите её.

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

Вам также нужно установить библиотеки ESPAsyncTCP и ESPAsyncWebServer. Нажмите на ссылки ниже, чтобы скачать библиотеки.

• ESPAsyncWebServer

• ESPAsyncTCP

Эти библиотеки недоступны для установки через Arduino Library Manager, поэтому вам нужно скопировать файлы библиотек в папку библиотек Arduino. Кроме того, в Arduino IDE вы можете перейти в Sketch > Include Library > Add .zip Library и выбрать только что скачанные библиотеки.

AsyncElegantOTA ESP8266 базовый пример

Давайте начнем с базового примера, предоставленного библиотекой. Этот пример создает простой веб-сервер с ESP8266. Корневой URL отображает некоторый текст, а URL /update отображает интерфейс для обновления прошивки и файловой системы.

Скопируйте следующий код в вашу Arduino IDE.

/*
  Rui Santos
  Complete project details
   - Arduino IDE: https://RandomNerdTutorials.com/esp8266-nodemcu-ota-over-the-air-arduino/
   - VS Code: https://RandomNerdTutorials.com/esp8266-nodemcu-ota-over-the-air-vs-code/

  This sketch shows a Basic example from the AsyncElegantOTA library: ESP8266_Async_Demo
  https://github.com/ayushsharma82/AsyncElegantOTA
*/

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

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

AsyncWebServer server(80);

void setup(void) {
  Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
    request->send(200, "text/plain", "Hi! I am ESP8266.");
  });

  AsyncElegantOTA.begin(&server);    // Start ElegantOTA
  server.begin();
  Serial.println("HTTP server started");
}

void loop(void) {

}

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

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

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

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

Сначала подключите необходимые библиотеки:

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

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

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

Создайте объект AsyncWebServer на порту 80:

AsyncWebServer server(80);

В setup() инициализируйте Serial Monitor:

Serial.begin(115200);

Инициализируйте Wi-Fi:

WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.println("");

// Wait for connection
while (WiFi.status() != WL_CONNECTED) {
  delay(500);
  Serial.print(".");
}
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());

Затем обработайте запросы клиентов. Следующие строки отправляют текст Hi! I am ESP8266. при обращении к корневому (/) URL:

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
  request->send(200, "text/plain", "Hi! I am ESP8266.");
});

Если вашему веб-серверу нужно обрабатывать больше запросов, вы можете их добавить (мы покажем это в следующем примере).

Затем добавьте следующую строку для запуска ElegantOTA:

AsyncElegantOTA.begin(&server);    // Start ElegantOTA

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

server.begin();

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

После загрузки кода на плату откройте Serial Monitor на скорости 115200 бод. Нажмите кнопку RST на плате ESP8266. Должен отобразиться IP-адрес ESP следующим образом (ваш может отличаться):

В вашей локальной сети откройте браузер и введите IP-адрес ESP8266. Вы должны получить доступ к корневой (/) веб-странице с отображаемым текстом.

Теперь представьте, что вы хотите изменить код своего веб-сервера. Чтобы сделать это через OTA, перейдите по IP-адресу ESP, добавив /update. Должна загрузиться следующая веб-страница.

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

Загрузка новой прошивки OTA (Over-the-Air) обновления – ESP8266

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

С открытым скетчем перейдите в Sketch > Export Compiled Binary. Из вашего скетча будет сгенерирован файл .bin. Сгенерированный файл будет сохранен в папке вашего проекта.

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

Загрузка нового скетча веб-сервера – Пример

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

1. Скопируйте следующий код в Arduino IDE. Не забудьте вставить свои сетевые учетные данные.

/*
  Rui Santos & Sara Santos - Random Nerd Tutorials
  Complete project details
   - Arduino IDE: https://RandomNerdTutorials.com/esp8266-nodemcu-ota-over-the-air-arduino/
   - VS Code: https://RandomNerdTutorials.com/esp8266-nodemcu-ota-over-the-air-vs-code/

  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/

// Import required libraries
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <AsyncElegantOTA.h>

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

bool ledState = 0;
const int ledPin = 2;

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
AsyncWebSocket ws("/ws");

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <title>ESP Web Server</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="data:,">
  <style>
  html {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
  }
  h1 {
    font-size: 1.8rem;
    color: white;
  }
  h2{
    font-size: 1.5rem;
    font-weight: bold;
    color: #143642;
  }
  .topnav {
    overflow: hidden;
    background-color: #143642;
  }
  body {
    margin: 0;
  }
  .content {
    padding: 30px;
    max-width: 600px;
    margin: 0 auto;
  }
  .card {
    background-color: #F8F7F9;;
    box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);
    padding-top:10px;
    padding-bottom:20px;
  }
  .button {
    padding: 15px 50px;
    font-size: 24px;
    text-align: center;
    outline: none;
    color: #fff;
    background-color: #0f8b8d;
    border: none;
    border-radius: 5px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
   }
   /*.button:hover {background-color: #0f8b8d}*/
   .button:active {
     background-color: #0f8b8d;
     box-shadow: 2 2px #CDCDCD;
     transform: translateY(2px);
   }
   .state {
     font-size: 1.5rem;
     color:#8c8c8c;
     font-weight: bold;
   }
  </style>
<title>ESP Web Server</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
</head>
<body>
  <div class="topnav">
    <h1>ESP WebSocket Server</h1>
  </div>
  <div class="content">
    <div class="card">
      <h2>Output - GPIO 2</h2>
      <p class="state">state: <span id="state">%STATE%</span></p>
      <p><button id="button" class="button">Toggle</button></p>
    </div>
  </div>
<script>
  var gateway = `ws://${window.location.hostname}/ws`;
  var websocket;
  window.addEventListener('load', onLoad);
  function initWebSocket() {
    console.log('Trying to open a WebSocket connection...');
    websocket = new WebSocket(gateway);
    websocket.onopen    = onOpen;
    websocket.onclose   = onClose;
    websocket.onmessage = onMessage; // <-- add this line
  }
  function onOpen(event) {
    console.log('Connection opened');
  }
  function onClose(event) {
    console.log('Connection closed');
    setTimeout(initWebSocket, 2000);
  }
  function onMessage(event) {
    var state;
    if (event.data == "1"){
      state = "ON";
    }
    else{
      state = "OFF";
    }
    document.getElementById('state').innerHTML = state;
  }
  function onLoad(event) {
    initWebSocket();
    initButton();
  }
  function initButton() {
    document.getElementById('button').addEventListener('click', toggle);
  }
  function toggle(){
    websocket.send('toggle');
  }
</script>
</body>
</html>)rawliteral";

void notifyClients() {
  ws.textAll(String(ledState));
}

void handleWebSocketMessage(void *arg, uint8_t *data, size_t len) {
  AwsFrameInfo *info = (AwsFrameInfo*)arg;
  if (info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT) {
    data[len] = 0;
    if (strcmp((char*)data, "toggle") == 0) {
      ledState = !ledState;
      notifyClients();
    }
  }
}

void onEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type,
             void *arg, uint8_t *data, size_t len) {
  switch (type) {
    case WS_EVT_CONNECT:
      Serial.printf("WebSocket client #%u connected from %s\n", client->id(), client->remoteIP().toString().c_str());
      break;
    case WS_EVT_DISCONNECT:
      Serial.printf("WebSocket client #%u disconnected\n", client->id());
      break;
    case WS_EVT_DATA:
      handleWebSocketMessage(arg, data, len);
      break;
    case WS_EVT_PONG:
    case WS_EVT_ERROR:
      break;
  }
}

void initWebSocket() {
  ws.onEvent(onEvent);
  server.addHandler(&ws);
}

String processor(const String& var){
  Serial.println(var);
  if(var == "STATE"){
    if (ledState){
      return "ON";
    }
    else{
      return "OFF";
    }
  }
  return String();
}

void setup(){
  // Serial port for debugging purposes
  Serial.begin(115200);

  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW);

  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }

  // Print ESP Local IP Address
  Serial.println(WiFi.localIP());

  initWebSocket();

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/html", index_html, processor);
  });

  // Start ElegantOTA
  AsyncElegantOTA.begin(&server);
  // Start server
  server.begin();
}

void loop() {
  ws.cleanupClients();
  digitalWrite(ledPin, ledState);
}

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

Это тот же код, что используется в этом проекте, но он содержит необходимые строки кода для работы с ElegantOTA:

#include <AsyncElegantOTA.h>

AsyncElegantOTA.begin(&server);

2. Сохраните скетч: File > Save и дайте ему имя. Например: Web_Server_LED_OTA_ESP8266.

3. Сгенерируйте файл .bin из вашего скетча. Перейдите в Sketch > Export Compiled Binary. Новый файл .bin должен быть создан в папке проекта.

4. Теперь вам просто нужно загрузить этот файл через страницу ElegantOTA. Перейдите по IP-адресу ESP, добавив /update. Убедитесь, что выбрана опция firmware. Нажмите Choose File и выберите только что сгенерированный файл .bin.

5. Когда загрузка завершится, нажмите кнопку Back.

6. Затем вы можете перейти на корневой (/) URL для доступа к новому веб-серверу. Это страница, которую вы должны увидеть при доступе к IP-адресу ESP на корневом (/) URL.

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

Поскольку мы также добавили возможности OTA в этот новый веб-сервер, мы можем загрузить новый скетч в будущем при необходимости. Вам просто нужно перейти по IP-адресу ESP8266, добавив /update.

Поздравляем, вы загрузили новый код на ESP8266 через Wi-Fi с помощью ElegantOTA.

Продолжайте читать, если хотите узнать, как загружать файлы в файловую систему ESP8266 (LittleFS) с помощью AsyncElegantOTA.

Загрузка файлов в файловую систему OTA (Over-the-Air) обновления – ESP8266

В этом разделе вы узнаете, как загружать файлы в файловую систему ESP8266 (LittleFS) с помощью AsyncElegantOTA.

Плагин загрузки файловой системы ESP8266 LittleFS

Прежде чем продолжить, вам нужно установить плагин ESP8266 LittleFS Uploader в Arduino IDE. Следуйте следующему руководству перед тем, как продолжить:

• Установка Arduino ESP8266 LittleFS Filesystem Uploader

Веб-сервер с файлами из LittleFS

Представьте сценарий, когда вам нужно загрузить файлы в файловую систему ESP8266, например, файлы конфигурации, HTML, CSS и JavaScript файлы для обновления страницы веб-сервера или любые другие файлы, которые вы хотите сохранить в LittleFS через OTA.

Чтобы показать вам, как это сделать, мы создадим новый веб-сервер, который обслуживает файлы из файловой системы (LittleFS): HTML, CSS и JavaScript файлы для создания веб-страницы, которая удаленно управляет GPIO ESP8266.

Перед тем как продолжить, убедитесь, что у вас установлена библиотека Arduino_JSON от Arduino версии 0.1.0. Вы можете установить эту библиотеку в Arduino IDE Library Manager. Просто перейдите в Sketch > Include Library > Manage Libraries и найдите библиотеку по имени: Arduino_JSON.

Скопируйте следующий код в вашу Arduino IDE.

/*
  Rui Santos
  Complete project details
   - Arduino IDE: https://RandomNerdTutorials.com/esp8266-nodemcu-ota-over-the-air-arduino/
   - VS Code: https://RandomNerdTutorials.com/esp8266-nodemcu-ota-over-the-air-vs-code/

  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files.

  The above copyright notice and this permission notice shall be included in all
  copies or substantial portions of the Software.
*/

// Import required libraries
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include "LittleFS.h"
#include <Arduino_JSON.h>
#include <AsyncElegantOTA.h>

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

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

// Create a WebSocket object
AsyncWebSocket ws("/ws");

// Set number of outputs
#define NUM_OUTPUTS  4

// Assign each GPIO to an output
int outputGPIOs[NUM_OUTPUTS] = {2, 4, 12, 14};

// Initialize LittleFS
void initLittleFS() {
  if (!LittleFS.begin()) {
    Serial.println("An error has occurred while mounting LittleFS");
  }
  Serial.println("LittleFS mounted successfully");
}

// Initialize WiFi
void initWiFi() {
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.print("Connecting to WiFi ..");
  while (WiFi.status() != WL_CONNECTED) {
    Serial.print('.');
    delay(1000);
  }
  Serial.println(WiFi.localIP());
}

String getOutputStates(){
  JSONVar myArray;
  for (int i =0; i<NUM_OUTPUTS; i++){
    myArray["gpios"][i]["output"] = String(outputGPIOs[i]);
    myArray["gpios"][i]["state"] = String(digitalRead(outputGPIOs[i]));
  }
  String jsonString = JSON.stringify(myArray);
  return jsonString;
}

void notifyClients(String state) {
  ws.textAll(state);
}

void handleWebSocketMessage(void *arg, uint8_t *data, size_t len) {
    AwsFrameInfo *info = (AwsFrameInfo*)arg;
  if (info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT) {
    data[len] = 0;
    if (strcmp((char*)data, "states") == 0) {
      notifyClients(getOutputStates());
    }
    else{
      int gpio = atoi((char*)data);
      digitalWrite(gpio, !digitalRead(gpio));
      notifyClients(getOutputStates());
    }
  }
}

void onEvent(AsyncWebSocket *server, AsyncWebSocketClient *client,AwsEventType type,
             void *arg, uint8_t *data, size_t len) {
  switch (type) {
    case WS_EVT_CONNECT:
      Serial.printf("WebSocket client #%u connected from %s\n", client->id(), client->remoteIP().toString().c_str());
      break;
    case WS_EVT_DISCONNECT:
      Serial.printf("WebSocket client #%u disconnected\n", client->id());
      break;
    case WS_EVT_DATA:
      handleWebSocketMessage(arg, data, len);
      break;
    case WS_EVT_PONG:
    case WS_EVT_ERROR:
      break;
  }
}

void initWebSocket() {
  ws.onEvent(onEvent);
  server.addHandler(&ws);
}

void setup(){
  // Serial port for debugging purposes
  Serial.begin(115200);

  // Set GPIOs as outputs
  for (int i =0; i<NUM_OUTPUTS; i++){
    pinMode(outputGPIOs[i], OUTPUT);
  }
  initLittleFS();
  initWiFi();
  initWebSocket();

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(LittleFS, "/index.html", "text/html",false);
  });

  server.serveStatic("/", LittleFS, "/");

  // Start ElegantOTA
  AsyncElegantOTA.begin(&server);

  // Start server
  server.begin();
}

void loop() {
  ws.cleanupClients();
}

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

Вставьте свои сетевые учетные данные в следующие переменные и сохраните код.

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

Обновление прошивки

Создайте файл .bin из этого скетча, как показано ранее (этот скетч включает необходимые строки кода для обеспечения возможностей OTA).

Перейдите по IP-адресу ESP8266, добавив /update, и загрузите новую прошивку.

Далее мы рассмотрим, как загрузить файлы.

Обновление файловой системы

В папке проекта создайте папку data и вставьте следующие HTML, CSS и JavaScript файлы (нажмите на ссылки, чтобы скачать файлы):

• HTML файл: index.html

• CSS файл: style.css

• JavaScript файл: script.js

• Скачать все файлы

Чтобы найти папку проекта, перейдите в Sketch > Show Sketch Folder.

Вот где должна находиться ваша папка data и как она выглядит:

После этого, при отключенном от компьютера ESP8266 (в этом и заключается весь смысл OTA), нажмите ESP8266 LittleFS Data Upload.

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

Прокрутите вверх в окне отладки, пока не найдете расположение файла .mklittlefs.bin. Это тот файл, который вы должны загрузить (в нашем случае файл называется Web_Server_OTA_ESP8266_Example_2.mklittlefs.bin).

А вот путь, где находится наш файл:

C:\Users\sarin\AppData\Local\Temp\arduino_build_375940\Web_server_OTA_ESP8266_Example_2.mklittlefs.bin

Чтобы получить доступ к этому файлу на компьютере, нужно сделать видимыми скрытые файлы (папка AppData не была видна). Проверьте, не ваш ли это случай.

Когда вы доберетесь до пути к папке, вам нужен файл с расширением .mklittlefs.bin.

Для удобства вы можете скопировать этот файл в папку проекта.

Теперь, когда у нас есть файл .bin из папки data, мы можем загрузить этот файл. Перейдите по IP-адресу ESP8266, добавив /update. Убедитесь, что выбрана опция Filesystem.

Затем выберите файл с расширением .mklittlefs.bin.

После успешной загрузки нажмите кнопку Back. И снова перейдите на корневой (/) URL. Вы должны получить доступ к следующей веб-странице, которая управляет выходами ESP8266 с помощью протокола WebSocket.

Чтобы увидеть работу веб-сервера, вы можете подключить 4 светодиода к ESP8266 на GPIO: 2, 4, 12 и 14. Вы должны иметь возможность управлять этими выходами с веб-сервера.

Если вам нужно обновить что-то в проекте, просто перейдите по IP-адресу ESP8266, добавив /update.

Поздравляем! Вы успешно загрузили файлы в файловую систему ESP8266 с помощью ElegantOTA.

Заключение

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

Мы надеемся, что это руководство было для вас полезным.

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

• Создание веб-серверов ESP8266 с Arduino IDE (eBook)

• Домашняя автоматизация с ESP8266

• Больше проектов и руководств ESP8266…

Спасибо за чтение.