پیشرفته⏱ 20 دقیقه مطالعه

حالا که ESP32 به شبکه متصل شد، می‌توانیم یک وب‌سرور ساده روی آن اجرا کنیم تا از طریق مرورگر، LED را روشن یا خاموش کنیم. کتابخانهٔ استاندارد WebServer.h در هستهٔ Arduino-ESP32 این کار را بسیار ساده می‌کند.

وب‌سرور با کتابخانهٔ WebServer

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

const int LED_PIN = 2;
WebServer server(80);

const char htmlPage[] =
  "<html><body>"
  "<h1>کنترل LED با ESP32</h1>"
  "<a href='/on'><button>روشن</button></a> "
  "<a href='/off'><button>خاموش</button></a>"
  "</body></html>";

void handleRoot() {
  server.send(200, "text/html", htmlPage);
}

void handleOn() {
  digitalWrite(LED_PIN, HIGH);
  server.send(200, "text/html", htmlPage);
}

void handleOff() {
  digitalWrite(LED_PIN, LOW);
  server.send(200, "text/html", htmlPage);
}

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

  WiFi.begin("NAME_OF_YOUR_WIFI", "YOUR_PASSWORD");
  while (WiFi.status() != WL_CONNECTED) delay(500);
  Serial.print("IP: ");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.on("/on", handleOn);
  server.on("/off", handleOff);
  server.begin();
}

void loop() {
  server.handleClient();   // باید در هر بار اجرای loop صدا زده شود
}
💡 نکته

پس از اجرای این کد، آدرس IP چاپ‌شده را در مرورگر گوشی یا کامپیوتری که در همان شبکه است باز کنید تا صفحهٔ کنترل را ببینید. تابع server.handleClient() باید مکرراً در loop() صدا زده شود تا سرور به درخواست‌های تازه پاسخ دهد.

چرا server.handleClient() به‌جای یک حلقهٔ سوکت خام؟

کتابخانهٔ WebServer مدیریت اتصال، خواندن هدر HTTP و مسیریابی (routing) را برای شما انجام می‌دهد — دقیقاً همان کاری که در نسخهٔ میکروپایتون با کد خام سوکت و بررسی رشتهٔ درخواست به‌صورت دستی انجام می‌شد؛ اینجا فقط کافی است برای هر مسیر (مثل /on) یک تابع Handler ثبت کنید.

شبیه‌سازی زندهٔ وب‌سرور — دقیقاً همین کد (مسیرهای /on و /off برای کنترل یک LED) که در بالا نوشتید باز کردن در Wokwi ↗
در حال بارگذاری شبیه‌ساز… (ممکن است چند ثانیه طول بکشد)

این یک شبیه‌سازی واقعی و قابل اجراست؛ روی دکمه پخش (▶) در Wokwi بزنید تا کد روی برد مجازی ESP32 اجرا شود. اگر جعبهٔ بالا بیش از حد سیاه/خالی ماند، صفحه را رفرش کنید یا از دکمهٔ «باز کردن در Wokwi» بالا استفاده کنید.

🛠️ کارگاه عملی

کارگاه عملی: یک مسیر جدید مثل /status اضافه کنید که وضعیت فعلی LED را به‌صورت متن ساده برگرداند.

❓ در این پروژه، کدام تابع باید مکرراً در loop() صدا زده شود تا سرور به درخواست‌ها پاسخ دهد؟
طراحی و توسعه: امین شیخ نجدیglcd.ir | نسخهٔ افزونه: 1.21.0