Уроки / Урок 10

Веб-сервер: светодиод с телефона

Плата показывает свою страницу в браузере, с неё включаем светодиод.

Подключим плату к домашнему Wi-Fi и сделаем на ней маленький сайт с двумя кнопками. Впишите в скетч имя и пароль своей сети.

#include <WiFi.h>
#include <WebServer.h>

const char *SSID = "ИмяСети";
const char *PASS = "пароль";
const int LED = 2;

WebServer server(80);
bool ledOn = false;

void handleRoot() {
  String html = "<!doctype html><meta charset='utf-8'>"
    "<meta name='viewport' content='width=device-width'>"
    "<style>body{font-family:sans-serif;text-align:center;padding:30px}"
    "a{display:inline-block;padding:20px 36px;margin:8px;font-size:22px;"
    "border-radius:12px;color:#fff;text-decoration:none}</style>"
    "<h1>ESP32</h1><p>Светодиод: <b>" + String(ledOn ? "горит" : "не горит") + "</b></p>"
    "<a href='/on' style='background:#1a9d55'>Включить</a>"
    "<a href='/off' style='background:#c62828'>Выключить</a>";
  server.send(200, "text/html", html);
}

void setLed(bool on) {
  ledOn = on;
  digitalWrite(LED, on);
  server.sendHeader("Location", "/");  // возвращаем на главную страницу
  server.send(303);
}

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

  WiFi.begin(SSID, PASS);
  Serial.print("Подключаюсь");
  while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); }
  Serial.print("\nОткройте в браузере: http://");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.on("/on",  [] { setLed(true); });
  server.on("/off", [] { setLed(false); });
  server.begin();
}

void loop() {
  server.handleClient();  // обрабатываем запросы браузера
}

Откройте монитор порта: после подключения плата напишет свой адрес, например http://192.168.1.57. Откройте его в браузере телефона, подключённого к той же сети.

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

  • server.on("/on", …) связывает адрес страницы с функцией, которая выполнится при её открытии.
  • server.send(200, "text/html", html) отдаёт браузеру страницу.
  • server.handleClient() нужно вызывать постоянно, поэтому в loop() не должно быть долгих delay().

Бесконечные точки в мониторе порта? Проверьте имя и пароль сети (регистр букв важен) и что сеть работает на 2,4 ГГц.

Без роутера плата может сама раздать Wi-Fi: замените WiFi.begin(SSID, PASS) и цикл ожидания на WiFi.softAP("ESP32-duino", "12345678");, подключитесь телефоном к этой сети и откройте http://192.168.4.1.