🌐 وب‌سرور ESP32: روشن و خاموش کردن LED از مرورگر

✍️ تیم ووکوی فارسی · ۲۷ مهر ۱۴۰۵

تصور کن گوشی‌ات را برداری، یک آدرس را باز کنی و با زدن یک دکمه، چراغ روی میز روشن شود. این همان وب‌سرور ESP32 است: خود برد یک سایت کوچک می‌سازد و به مرورگر جواب می‌دهد. در این آموزش با کتابخانه‌ی WebServer.h این کار را انجام می‌دهیم و همه‌چیز را در شبیه‌ساز ESP32 فارسی، مثل کاری که در ووکوی انجام می‌دهی، امتحان می‌کنیم.

وب‌سرور چطور کار می‌کند؟

وقتی آدرسی را در مرورگر می‌زنی، مرورگر یک «درخواست» می‌فرستد و سرور یک صفحه برمی‌گرداند. ما به برد می‌گوییم برای هر مسیر چه کند:

• / صفحه‌ی اصلی با دو دکمه را نشان بده.
• /on چراغ را روشن کن و صفحه را دوباره نشان بده.
• /off چراغ را خاموش کن.

قطعه‌ها و سیم‌کشی

کد کامل

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

const int LED = 4;
bool ledOn = false;
WebServer server(80);                // port 80 = normal web pages

void handleRoot() {
  String html = "<!doctype html><html><head><meta charset='utf-8'>";
  html += "<meta name='viewport' content='width=device-width, initial-scale=1'></head>";
  html += "<body style='font-family:sans-serif;text-align:center'>";
  html += "<h2>My ESP32 lamp</h2>";
  html += "<p>LED is <b>" + String(ledOn ? "ON" : "OFF") + "</b></p>";
  html += "<a href='/on'><button>ON</button></a> ";
  html += "<a href='/off'><button>OFF</button></a>";
  html += "</body></html>";
  server.send(200, "text/html", html);
}

void setLed(bool on) {
  ledOn = on;
  digitalWrite(LED, on ? HIGH : LOW);
  handleRoot();                      // show the page again
}

void setup() {
  Serial.begin(115200);
  pinMode(LED, OUTPUT);
  WiFi.begin("Wokwi-GUEST", "");     // simulator network, no password
  while (WiFi.status() != WL_CONNECTED) delay(200);
  Serial.print("Open http://");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.on("/on", []() { setLed(true); });
  server.on("/off", []() { setLed(false); });
  server.onNotFound([]() { server.send(404, "text/plain", "Not found"); });
  server.begin();
}

void loop() {
  server.handleClient();             // answer whoever is asking
}

توضیح بخش‌های مهم

• WebServer server(80); یک سرور روی درگاه ۸۰ می‌سازد. مرورگرها صفحه‌های معمولی را از همین درگاه می‌خواهند، برای همین لازم نیست عددی کنار آدرس بنویسی.
• در handleRoot صفحه‌ی HTML را تکه‌تکه با += می‌سازیم. داخل رشته‌ها از کوتیشن تکی ' استفاده کرده‌ایم تا با کوتیشن دوتایی C++ قاطی نشود.
• server.send(200, "text/html", html); عدد ۲۰۰ یعنی «همه‌چیز خوب است» و text/html به مرورگر می‌گوید این یک صفحه‌ی وب است.
• متغیر ledOn وضعیت چراغ را نگه می‌دارد تا صفحه همیشه وضعیت درست را نشان دهد.
• server.on("/on", ...) به هر مسیر یک کار وصل می‌کند. آن []() { ... } یک تابع بی‌نام کوتاه است.
• server.handleClient(); مهم‌ترین خط loop. بدون آن، برد هیچ‌وقت به مرورگر جواب نمی‌دهد.

یک قدم جلوتر

وقتی این نسخه کار کرد، چند تغییر کوچک امتحان کن تا مطمئن شوی واقعاً فهمیده‌ای. یک دکمه‌ی سوم به اسم «چشمک» بساز که با مسیر /blink چراغ را سه بار روشن و خاموش کند. یا یک LED دوم روی GPIO5 بگذار و برای هرکدام دو دکمه‌ی جدا بساز. می‌توانی متن صفحه را هم فارسی کنی؛ چون meta charset='utf-8' را گذاشته‌ایم، حروف فارسی درست نمایش داده می‌شوند. اگر صفحه را روی گوشی باز کنی، تگ viewport نمی‌گذارد دکمه‌ها ریز شوند.

امتحانش کن

این پروژه آماده است: روشن کردن LED از صفحه‌ی وب (ESP32)، و نسخه‌ی درسی‌اش LED از مرورگر. خواندن کد رایگان است و اجرای ESP32 به اشتراک Plus نیاز دارد. اگر کنجکاوی همین کار را سطح پایین‌تر و با WiFiServer ببینی، وب‌سرور ESP32 به روش WiFiServer را باز کن. توضیح مفصل‌تری هم در درس «وب‌سرور: LED از مرورگر» هست.

اشکال‌های رایج

• صفحه همیشه در حال بارگذاری می‌ماند: server.handleClient() در loop نیست، یا یک delay طولانی آنجا گذاشته‌ای.
• خطای کامپایل در خط HTML: داخل رشته کوتیشن دوتایی گذاشته‌ای و رشته زودتر بسته شده است. از ' استفاده کن.
• دکمه کار می‌کند ولی LED روشن نمی‌شود: pinMode(LED, OUTPUT) را فراموش کرده‌ای یا LED برعکس است.
• آدرس باز نمی‌شود: قبل از وصل شدن وای‌فای server.begin() را صدا زده‌ای.

اگر هنوز وصل شدن به شبکه برایت تازه است، اول اتصال ESP32 به وای‌فای را بخوان. قدم بعدی هم صفحه‌ای است که بدون رفرش زنده می‌ماند: داده‌ی زنده با WebSocket. پروژه‌های بیشتر در وای‌فای و اینترنت اشیا.

مقاله‌های مرتبط

همه‌ی آموزش‌های ESP32 و اینترنت اشیا ← · همه‌ی مقاله‌ها