آموزش ساخت وب سرور با ماژول ESP8266 در آردوینو

در سال­‌های اخیر، ماژول ESP8266 در پروژه‌های مربوط به اینترنت اشیاء (IoT) یا وای فای (WiFi) روز به روز محبوب‌تر شده است. ESP8266، ماژول وای فایِ بسیار مقرون به صرفه‌ای است که شما با مقداری تلاش می‌توانید آن را طوری برنامه‌ریزی کنید که یک وب سرور مستقل بسازد. اگر شما هم از جمله کسانی هستید که می‌خواهید ساخت وب سرور با ماژول ESP8266 را در آردوینو یاد بگیرید، پس در این مقاله، همراه ما شوید.

در ابتدا وب سرور و نحوه عملکردش را به‌طور خلاصه برای شما توضیح خواهیم داد. پس از آن، با بررسی مدهای کاری ماژول وای فای ESP8266، یک وب سرور ساده توسط این ماژول ایجاد کرده و دو LED را با آن کنترل خواهیم کرد. پیش از خواندن این مقاله، اگر برد NodeMCU را به خوبی نمی‌شناسید، به شما پیشنهاد می‌کنیم مقاله آشنایی با برد توسعه NodeMCU و نحوه راه اندازی آن با آردوینو را مطالعه کنید.

وب سرور چیست و چگونه کار می‌کند؟

وب سرور جایی است که ذخیره، پردازش و تحویل صفحات وب به سرویس‌گیرنده‌ها (web clients) در آن صورت می‌گیرد. سرویس گیرنده در واقع یک مرورگر وب روی لپ تاپ و گوشی‌های هوشمند ما است. ارتباط بین سرویس‌گیرنده و سرور، تحت یک پروتکل مخصوص به نام Hypertext Transfer Protocol (HTTP) انجام می‌شود.

در این پروتکل، کاربر با ارسال درخواستی برای یک صفحه وب خاص، با استفاده از HTTP، ارتباط را شروع می‌کند و سرور با ارسال محتویات صفحه وب درخواست شده، پاسخ می‌دهد یا در صورتی که قادر به یافتن صفحه وب درخواست شده نباشد با یک پیغام خطا (مانند خطای 404 معروف) پاسخ می‌دهد. صفحاتی که سرور ارائه می‌کند، اکثرا اسناد HTML هستند.

در بخش بعدی به موضوع اصلی مقاله بر می‌گردیم.

مد‌های کاری ماژول ESP8266

یکی از بهترین قابلیت‌های ماژول وای فای ESP8266 این است که نه تنها می‌تواند به یک شبکه وای فای موجود متصل شود و یک وب سرور بسازد، بلکه خودش می‌تواند یک شبکه راه‌اندازی کند و به دستگاه‌های دیگر اجازه دهد مستقیماً به آن متصل شوند و به صفحات وب دسترسی پیدا کنند. این قابلیت به این خاطر امکان پذیر است که ESP8266 می‌تواند در سه مد مختلف کار کند:

• مد ایستگاه ( Station mode)،
• مد نقطه دسترسی نرم‌افزاری ( Soft Access Point mode)  
• هر دو مد هم‌زمان.

قابلیت کار در مدهای مختلف،امکان ساخت شبکه‌های مش را فراهم کرده است. اما شبکه‌ی مش چیست؟

شبکه‌های مش:

برای ساخت وب سرور با ماژول ESP8266 در محیط آردوینو، حتما باید با مدهای کاری این ماژول آشنا شوید.

مد ایستگاه (STA Mode)

وقتی ماژول ESP8266 به یک شبکه وای فای موجود (که توسط روتر وایرلس شما ایجاد شده) متصل شود، به آن مد ایستگاه گفته می‌شود.

در مد ایستگاه، ESP8266 از روتر وایرلسی که به آن متصل است، IP دریافت می‌کند. با این آدرس IP، ماژول می‌تواند یک وب سرور راه‌اندازی کرده و صفحات وب را به دستگاه‌های متصل به شبکه وای فای موجود تحویل دهد.

مد نقطه دسترسی نرم‌افزاری ( Soft Access Point Mode)

در مد نقطه دسترسی، ماژول ESP8266، شبکه وای فای خود را ساخته و به‌عنوان هاب (hub) (دقیقاً مانند روتر وای فای) عمل می‌کند. اما بر خلاف روتر وای فای، ارتباطی با یک شبکه سیمی ندارد. پس به این مد کاری نقطه دسترسی نرم‌افزاری (soft-AP) گفته می‌شود. به علاوه، حداکثر تعداد ایستگاه‌هایی که می‌توانند به آن متصل شوند، به 5 ایستگاه محدود شده است.

در مد نقطه دسترسی، ESP8266 یک شبکه وای فای جدید می‌سازد و SSID (نام شبکه) و آدرس IP آن را تعیین می‌کند. با این آدرس IP جدید، می‌تواند صفحات وب را به همه­­‌ی دستگاه‌های متصل شده به شبکه‌­ی خود تحویل دهد.

سیم‌کشی- کنترل LED با ESP8266

اکنون که اصول کار وب سرورها را یاد گرفتید و فهمیدید ساخت وب سرور با ماژول ESP8266 در چه مدهای کاری ممکن است، وقت آن رسیده که چند ال ای دی را به برد توسعه ESP8266 NodeMCU متصل کنیم. هدف ما کنترل LED با وای فای است.

با قرار دادن NodeMCU روی بردبورد خود شروع کنید و مطمئن شوید دو سمت NodeMCU بر روی یک قسمت بردبورد نباشند. سپس، دو ال ای دی را با مقاومت­‌های محدودکننده جریان 220 اهمی به پایه‌های ورودی خروجی D6 و D7 متصل کنید. پس از اینکه سیم‌کشی را به اتمام رساندید، باید چیزی شبیه به شکل زیر داشته باشید:

کنترل دستگاه‌ها و قطعات مختلف با وب سرور ESP8266 چگونه ممکن است؟

شاید با خود فکر کنید: “چگونه می‌توانم دستگاه‌ها و قطعات مختلفی مانند LED را با وب سروری کنترل کنم که تنها کار پردازش و نمایش صفحات وب را انجام می‌دهد؟”

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

وقتی شما یک URL را در یک مرورگر وارد می‌کنید و ENTER را فشار می‌دهید، مرورگر یک درخواست HTTP (که به درخواست GET هم مشهور است) به وب سرور ارسال می‌کند. کار وب سرور این است که این درخواست را مدیریت کرده و پاسخ دهد. احتمالاً تا الان متوجه شده‌اید که می‌خواهیم با دسترسی به یک URL خاص، دستگاه‌ها و قطعات مختلفی را کنترل کنیم.

برای مثال فرض کنید آدرسی مانند http://192.168.1.1/ledon را در مرورگر وارد کردیم. با این کار، مرورگر یک درخواست HTTP به ESP8266 ارسال می‌کند تا به آن رسیدگی شود. وقتی ESP8266 این درخواست را می‌خواند، متوجه می‌شود که کاربر قصد روشن کردن ال ای دی را دارد. بنابراین، ال ای دی را روشن کرده و صفحه وب داینامیک که وضعیت ” ال ای دی: روشن ” را نشان می‌دهد، به مرورگر می‌فرستد. دقیقا به همین راحتی می‌توانید LED را با ماژول ESP8266 کنترل کنید!

مثال اول – راه اندازی ماژول ESP8266 به عنوان سرور HTTP در مد نقطه دسترسی وای فای

اکنون می‌خواهیم در یک مثال، راه اندازی وب سرور با ماژول ESP8266 را انجام دهیم. همان‌طور که از عنوان این بخش فهمیدید، این مثال نحوه‌­ی قرار دادن ماژول ESP8266 در مد نقطه دسترسی و تحویل صفحات وب به دستگاه‌های متصل را نشان می‌دهد. برای شروع، ESP8266 NodeMCU خود را به کامپیوتر متصل کرده و برنامه زیر را امتحان کنید. در ادامه این کد را به‌طور دقیق توضیح خواهیم داد.

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

/* Put your SSID & Password */
const char* ssid = "NodeNCU";  // Enter SSID here
const char* password = "123456789";  //Enter Password here

/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,4,1);
IPAddress subnet(255,255,255,0);

ESP8266WebServer server(80);

uint8_t LED1pin = D7;
bool LED1status = LOW;

uint8_t LED2pin = D6;
bool LED2status = LOW;

void setup() {
  Serial.begin(115200);
  pinMode(LED1pin, OUTPUT);
  pinMode(LED2pin, OUTPUT);
  Serial.print("Setting soft-AP ... ");
  WiFi.mode(WIFI_AP);
  WiFi.softAPConfig(local_ip, gateway, subnet);
  WiFi.softAP(ssid, password);

  server.on("/", handle_OnConnect);
  server.on("/led1on", handle_led1on);
  server.on("/led1off", handle_led1off);
  server.on("/led2on", handle_led2on);
  server.on("/led2off", handle_led2off);
  server.onNotFound(handle_NotFound);
  
  server.begin();
  Serial.println("HTTP server started");
}
void loop() {

  server.handleClient();
  if(LED1status)
  {digitalWrite(LED1pin, HIGH);}
  else
  {digitalWrite(LED1pin, LOW);}
  
  if(LED2status)
  {digitalWrite(LED2pin, HIGH);}
  else
  {digitalWrite(LED2pin, LOW);}
}

void handle_OnConnect() {
  LED1status = LOW;
  LED2status = LOW;
  Serial.println("GPIO7 Status: OFF | GPIO6 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 
}

void handle_led1on() {
  LED1status = HIGH;
  Serial.println("GPIO7 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED2status)); 
}

void handle_led1off() {
  LED1status = LOW;
  Serial.println("GPIO7 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED2status)); 
}

void handle_led2on() {
  LED2status = HIGH;
  Serial.println("GPIO6 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,true)); 
}

void handle_led2off() {
  LED2status = LOW;
  Serial.println("GPIO6 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,false)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

String SendHTML(uint8_t led1stat,uint8_t led2stat){
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<title>LED Control</title>\n";
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
  ptr +=".button {display: block;width: 80px;background-color: #1abc9c;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
  ptr +=".button-on {background-color: #1abc9c;}\n";
  ptr +=".button-on:active {background-color: #16a085;}\n";
  ptr +=".button-off {background-color: #34495e;}\n";
  ptr +=".button-off:active {background-color: #2c3e50;}\n";
  ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  ptr +="<h1>ESP8266 Web Server</h1>\n";
  ptr +="<h3>Using Access Point(AP) Mode</h3>\n";
  
   if(led1stat)
  {ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
  else
  {ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}

  if(led2stat)
  {ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
  else
  {ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}

  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}

دسترسی به وب سرور در مد نقطه دسترسی ماژول ESP8266

پس از آپلود برنامه، سریال مانیتور را باز کنید و باودریت (Baud Rate) را روی 115200 قرار دهید. کلید ریست روی برد NodeMCU را نیز فشار دهید. اگر همه چیز درست باشد، پیغام HTTP server started نمایش داده می‌شود.

سپس هر دستگاهی که می‌­تواند به یک شبکه‌­ی وای فای متصل شود، مانند موبایل، لپتاپ و.. را پیدا کنید و دنبال شبکه‌ای به نام NodeMCU بگردید. پس از پیدا کردن شبکه، با پسورد 123456789 به آن متصل شوید.

پس از اتصال به شبکه نقطه دسترسی NodeMCU، یک مرورگر باز کنید و آدرس 192.168.1.1 را وارد کنید. NodeMCU باید یک صفحه وب را برگرداند که وضعیت ال ای دی‌­ها را نشان می‌دهد و دو دکمه برای کنترل آن‌ها دارد. اگر در این لحظه به سریال مانیتور نگاهی بیندازید، وضعیت پایه­‌های ورودی خروجی برد NodeMCU را خواهید دید.

حال روی کلید بالایی کلیک کنید تا LED1 روشن شود. در همین حین به URL نیز توجه کنید. وقتی روی دکمه بالایی کلیک کنید، ESP8266 درخواستی برای آدرس /led1on دریافت می‌کند. سپس، LED1 را روشن کرده و صفحه وبی با وضعیت به روز شده‌­ی LED ارائه می‌کند. به‌علاوه، وضعیت پایه‌­های GPIO را بر روی سریال مانیتور نمایش می‌دهد.

شما می‌توانید کلید LED2 را نیز تست کنید و مطمئن شوید که به‌صورت مشابه کار می‌کند.

اکنون بیایید نگاه دقیق‌­تری به کد داشته باشیم و ببینیم چگونه کار می‌کند تا شما بتوانید آن را برحسب نیاز خود تغییر دهید.

توضیح دقیق کد

برنامه‌ای که آپلود کردیم، با اضافه کردن کتابخانه ESP8266WiFi.h شروع می‌شود. این کتابخانه توابع وای فای مخصوص ESP8266 را ارائه می‌کند که ما برای اتصال به شبکه، آن‌ها را فراخوانی می‌کنیم. در ادامه، کتابخانه ESP8266WebServer.h را اضافه کرده‌ایم. این کتابخانه دارای توابعی است که به ما کمک می‌کند، یک سرور را راه‌اندازی کنیم و درخواست‌های HTTP را بدون نگرانی در مورد جزئیات پیاده‌سازی سطح پایین (نزدیک به زبان ماشین) پاسخ دهیم.

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

از آنجایی که در حال راه اندازی ماژول ESP8266 در مد نقطه دسترسی هستیم، یک شبکه وای فای ایجاد خواهد شد. به همین دلیل، باید SSID، پسورد، آدرس IP، IP subnet mask و IP gateway را مشخص کنیم.

/* Put your SSID & Password */
const char* ssid = "NodeMCU";  // Enter SSID here
const char* password = "12345678";  //Enter Password here

/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);

Subnet mask:

Gateway:

در مرحله بعد، یک شیء از کتابخانه ESP8266WebServer ایجاد می‌کنیم تا به توابع آن دسترسی پیدا کنیم. سازنده­‌ی این شیء، پورت (جایی که سرور به آن گوش خواهد کرد) را به عنوان یک پارامتر درنظر می‌گیرد. از آنجا که پورت پیش فرض HTTP، هشتاد است، از این عدد استفاده می‌کنیم. حال می‌توانید بدون نیاز به مشخص کردن پورت در URL، به سرور دسترسی پیدا کنید.

// declare an object of ESP8266WebServer library
ESP8266WebServer server(80);

Port:

در خط بعدی، پایه‌های ورودی خروجی برد NodeMCU را برحسب اینکه به کدام LED متصل هستند، تعریف کرده و وضعیت اولیه‌­ی آن‌ها را مشخص می‌کنیم.

uint8_t LED1pin = D7;
bool LED1status = LOW;

uint8_t LED2pin = D6;
bool LED2status = LOW;

درون تابع ()Setup

قبل از اجرا کردن سرور HTTP خود، باید تنظیمات آن را انجام دهیم. ابتدا، یک اتصال سریال برای دیباگ کردن باز کرده و پورت‌های GPIO موردنظر را به عنوان خروجی تعریف می‌کنیم.

Serial.begin(115200);
pinMode(LED1pin, OUTPUT);
pinMode(LED2pin, OUTPUT);

سپس، با وارد کردن SSID، پسورد، آدرس IP،IP subnet mask  و IP gateway یک نقطه دسترسی نرم‌افزاری اجرا می‌کنیم تا یک شبکه وای فای ایجاد شود.

WiFi.softAP(ssid, password);
WiFi.softAPConfig(local_ip, gateway, subnet);
delay(100);

برای رسیدگی به درخواست‌های HTTP دریافتی، باید مشخص کنیم که هنگام وارد کردن هر URL خاص، کدام کد اجرا شود. برای این کار، از تابع on استفاده می‌کنیم. این تابع دو پارامتر می‌گیرد که پارامتر اول مسیر URL است و پارامتر دوم نام تابعی است که می‌خواهیم هنگام وارد کردن آن URL، اجرا شود.

برای مثال، خط اول کد زیر، زمانی‌که سرور یک درخواست HTTP روی مسیر ریشه (/) دریافت کند، تابع ()handle_OnConnect را اجرا می‌کند. به این نکته توجه کنید که URL مشخص شده، یک مسیر نسبی (Relative Path) است.

Relative Path:

به همین ترتیب، باید چهار URL دیگر برای پاسخگویی به دو وضعیت ال ای دی‌ها تخصیص دهیم.

server.on("/", handle_OnConnect);
server.on("/led1on", handle_led1on);
server.on("/led1off", handle_led1off);
server.on("/led2on", handle_led2on);
server.on("/led2off", handle_led2off);

اما ما هنوز مشخص نکرده‌ایم که اگر سرویس گیرنده درخواست یک URL غیر از موارد مشخص شده با تابع ()server.on را بدهد، سرور چه کاری باید انجام دهد. در این حالت، سرور باید با وضعیت HTTP 404 (Not Found) پاسخ دهد و یک پیغام به کاربر نمایش دهد. این موارد را هم در یک تابع قرار می‌دهیم و از server.onNotFound (handle_NotFound) استفاده می‌کنیم تا اگر سرور درخواستی برای یک URL که با ()server.on مشخص نشده دریافت کرد، این تابع اجرا شود.

server.onNotFound(handle_NotFound);

حال برای راه‌اندازی سرور، تابع begin را روی شیء server فراخوانی می‌کنیم.

server.begin();
Serial.println("HTTP server started");

درون تابع ()Loop

برای پاسخگویی به درخواست‌های HTTP ورودی، باید تابع ()handleClient را روی شیء server فراخوانی کنیم. به علاوه، وضعیت LED را برحسب درخواست نیز تغییر می‌دهیم.

void loop() {
  server.handleClient();
  if(LED1status)
  {digitalWrite(LED1pin, HIGH);}
  else
  {digitalWrite(LED1pin, LOW);}
  
  if(LED2status)
  {digitalWrite(LED2pin, HIGH);}
  else
  {digitalWrite(LED2pin, LOW);}
}

سپس، باید تابعی را که با دستور server.on به آدرس ریشه (/) متصل کردیم، بسازیم. اگر یادتان باشد در ابتدای این تابع وضعیت هر دو LED را LOW قرار دادیم (وضعیت اولیه) و روی سریال مانیتور چاپ کردیم. برای پاسخ دادن به درخواست HTTP، از تابع send استفاده می‌کنیم. با اینکه این تابع می‌تواند با ترکیب دیگری از پارامترها هم فراخوانی شود، ساده‌ترین فرم آن شامل کد پاسخ به HTTP، نوع محتوای صفحه و خود محتوا است.

در اینجا، ما کد 200 (یکی از کدهای وضعیت HTTP) را ارسال می‌کنیم که به معنای OK است. سپس، نوع محتوا را به عنوان “text/html” مشخص می‌کنیم و در نهایت تابع ()SendHTML را فراخوانی می‌کنیم. این تابع یک صفحه HTML داینامیک تولید می‌کند که شامل وضعیت ال ای دی‌ها است.

void handle_OnConnect() 
{
  LED1status = LOW;
  LED2status = LOW;
  Serial.println("GPIO7 Status: OFF | GPIO6 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 
}

نکته:

به همین ترتیب باید چهار تابع دیگر برای پاسخ به درخواست‌های LED ON/OFF و صفحه­‌ی خطای 404 بسازیم.

void handle_led1on() {
  LED1status = HIGH;
  Serial.println("GPIO7 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED2status)); 
}

void handle_led1off() {
  LED1status = LOW;
  Serial.println("GPIO7 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED2status)); 
}

void handle_led2on() {
  LED2status = HIGH;
  Serial.println("GPIO6 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,true)); 
}

void handle_led2off() {
  LED2status = LOW;
  Serial.println("GPIO6 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,false)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

نمایش صفحه وب HTML

تابع ()SendHTML، هنگامی‌که وب سرور ESP8266 درخواستی از سمت سرویس‌گیرنده دریافت می‌کند، مسئولیت ساخت یک صفحه‌­­ی وب را برعهده دارد. این تابع فقط کد HTML را در یک رشته­‌ی بزرگ ذخیره می‌کند و برای تابع ()server.send که در مورد آن صحبت کردیم، برمی‌گرداند. این تابع وضعیت ال ای دی­‌ها را به عنوان پارامتر می‌گیرد تا محتوای داینامیکی صفحه‌­ی HTML را تولید کند.

اولین متنی که شما باید همیشه ارسال کنید، اعلان <!DOCTYPE> است که مشخص می‌کند در حال ارسال کد HTML هستیم.

String SendHTML(uint8_t led1stat,uint8_t led2stat){
String ptr = "<!DOCTYPE html> <html>\n";

DOCTYPE declaration:

سپس، المان viewport <meta> ، صفحه­‌ی وب را در هر مرورگری واکنش‌گرا می­سازد. همچنین تگ title، عنوان صفحه را مشخص می‌کند.

ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<title>LED Control</title>\n";

Meta tag:

Viewport:

طراحی صفحه وب

در ادامه، چند خط کد CSS برای طراحی کلیدها و ظاهر صفحه­ی وب داریم. در اینجا فونت Helvetica را انتخاب کردیم، نمایش محتویات صفحه را به‌صورت inline-block قرار داده‌ایم و محل قرارگیری آن را در وسط صفحه تنظیم کرده‌ایم.

ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";

inline-block:

کد زیر رنگ، فونت و حاشیه دور بدنه و تگ‌های H1، H3 و p را مشخص می‌کند.

ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";

برخی تغییرات ظاهری هم روی کلید‌ها انجام دادیم، مانند رنگ، سایز، حاشیه و.. . کلید‌های روشن و خاموش، رنگ پس زمینه­‌ی متفاوتی دارند و سلکتور active، افکت کلیک کردن را می‌سازد.

ptr +=".button {display: block;width: 80px;background-color: #1abc9c;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
ptr +=".button-on {background-color: #1abc9c;}\n";
ptr +=".button-on:active {background-color: #16a085;}\n";
ptr +=".button-off {background-color: #34495e;}\n";
ptr +=".button-off:active {background-color: #2c3e50;}\n";

نکته:

قرار دادن عنوان صفحه وب

در مرحله‌ی بعد، عنوان صفحه­‌ی وب مشخص می‌شود. شما می‌توانید این متن را متناسب با کاربرد خود تغییر دهید.

ptr +="<h1>ESP8266 Web Server</h1>\n";
ptr +="<h3>Using Access Point(AP) Mode</h3>\n";

نمایش کلیدها و وضعیت آن‌ها

برای تولید داینامیک وضعیت کلیدها و ال ای دی، از if استفاده می‌کنیم. بنابراین، با توجه به وضعیت پایه‌های GPIO، کلید ON یا OFF نمایش داده می‌شود.

if(led1stat)
  {ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
else
  {ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}

if(led2stat)
  {ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
else
  {ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}

مثال دوم – راه اندازی ماژول ESP8266 به عنوان سرور HTTP در مد ایستگاه وای فای (WiFi Station)

اکنون بیایید به مثال بعدی برای ساخت وب سرور با ماژول ESP8266 بپردازیم.

این مثال، نشان می‌دهد که چگونه ESP8266 را به مد STA ببریم و صفحات وب را به سرویس‌گیرنده‌های متصل به شبکه‌­ی موجود تحویل دهیم.

پیش از آپلود برنامه، لازم است تغییراتی در آن ایجاد کنید. شما باید دو متغیر زیر را برحسب مشخصات شبکه­‌ی خود تغییر دهید تا ESP8266 بتواند با شبکه‌­ی موجود اتصال برقرار کند.

پس از انجام تغییرات، برنامه‌­ی زیر را امتحان کنید.

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

/*Put your SSID & Password*/
const char* ssid = "YourNetworkName";  // Enter SSID here
const char* password = "YourPassword";  //Enter Password here

ESP8266WebServer server(80);

uint8_t LED1pin = D7;
bool LED1status = LOW;

uint8_t LED2pin = D6;
bool LED2status = LOW;

void setup() {
  Serial.begin(115200);
  delay(100);
  pinMode(LED1pin, OUTPUT);
  pinMode(LED2pin, OUTPUT);

  Serial.println("Connecting to ");
  Serial.println(ssid);

  //connect to your local wi-fi network
  WiFi.begin(ssid, password);

  //check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

  server.on("/", handle_OnConnect);
  server.on("/led1on", handle_led1on);
  server.on("/led1off", handle_led1off);
  server.on("/led2on", handle_led2on);
  server.on("/led2off", handle_led2off);
  server.onNotFound(handle_NotFound);

  server.begin();
  Serial.println("HTTP server started");
}
void loop() {
  server.handleClient();
  if(LED1status)
  {digitalWrite(LED1pin, HIGH);}
  else
  {digitalWrite(LED1pin, LOW);}
  
  if(LED2status)
  {digitalWrite(LED2pin, HIGH);}
  else
  {digitalWrite(LED2pin, LOW);}
}

void handle_OnConnect() {
  LED1status = LOW;
  LED2status = LOW;
  Serial.println("GPIO7 Status: OFF | GPIO6 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 
}

void handle_led1on() {
  LED1status = HIGH;
  Serial.println("GPIO7 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED2status)); 
}

void handle_led1off() {
  LED1status = LOW;
  Serial.println("GPIO7 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED2status)); 
}

void handle_led2on() {
  LED2status = HIGH;
  Serial.println("GPIO6 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,true)); 
}

void handle_led2off() {
  LED2status = LOW;
  Serial.println("GPIO6 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,false)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

String SendHTML(uint8_t led1stat,uint8_t led2stat){
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<title>LED Control</title>\n";
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
  ptr +=".button {display: block;width: 80px;background-color: #1abc9c;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
  ptr +=".button-on {background-color: #1abc9c;}\n";
  ptr +=".button-on:active {background-color: #16a085;}\n";
  ptr +=".button-off {background-color: #34495e;}\n";
  ptr +=".button-off:active {background-color: #2c3e50;}\n";
  ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  ptr +="<h1>ESP8266 Web Server</h1>\n";
    ptr +="<h3>Using Station(STA) Mode</h3>\n";
  
   if(led1stat)
  {ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
  else
  {ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}

  if(led2stat)
  {ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
  else
  {ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}

  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}

دسترسی به وب سرور در مد STA ماژول ESP8266

پس از آپلود برنامه، سریال مانیتور را باز کنید، باودریت را 115200 قرار دهید و کلید ریست NodeMCU را فشار دهید. اگر همه چیز درست باشد، پیغام HTTP server started و آدرس IP داینامیکی که از روتر شما گرفته شده، نمایش داده می‌شود.

سپس، یک مرورگر باز کنید و آدرس IP نمایش داده شده در سریال مانیتور را وارد کنید. NodeMCU باید یک صفحه‌­ی وبی را برگرداند که وضعیت فعلی ال ای دی‌­ها و کلیدهای کنترل آن‌ها را نمایش می‌دهد. اگر هم‌زمان به سریال مانیتور هم نگاهی بیندازید، وضعیت پایه‌های GPIO را مشاهده خواهید کرد.

حال روی کلید کلیک کنید تا LED1 روشن شود. در این حین حواستان به آدرس صفحه هم باشد. وقتی روی دکمه کلیک کردید، ESP8266 یک درخواست برای آدرس /led1on دریافت می‌کند. سپس، LED1 را روشن می‌کند و صفحه وبی را تحویل خواهد داد که وضعیت به روز شده­‌ی ال ای دی را نمایش می‌دهد. به علاوه، وضعیت پایه­‌ی GPIO را روی سریال مانیتور چاپ می­‌کند.

شما می‌توانید کلید LED2 را هم تست کرده و مطمئن شوید که به شکل یکسانی کار می‌کند.

توضیح کد

اگر این کد و کد قبلی را مقایسه کنید، متوجه می‌شوید که تنها تفاوت آن‌ها این است که ما به جای تنظیم نقطه دسترسی نرم‌افزاری، با استفاده از تابع ()WiFi.begin به شبکه­‌ی موجود متصل می‌شویم.

//connect to your local wi-fi network
  WiFi.begin(ssid, password);

زمانی‌که ESP8266 تلاش می‌کند به شبکه متصل شود، می‌توانیم وضعیت اتصال را با تابع ()WiFi.status بررسی کنیم.

//check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }

اطلاعات بیشتر در مورد تابع ()WiFi.status

تابع  ()WiFi.status، در حالت‌­های مختلف وضعیت­‌های زیر را برمی‌گرداند:

• WL_CONNECTED: وقتی به یک شبکه­‌ی وای فای متصل شده است.
• WL_NO_SHIELD: وقتی شیلد وای فای موجود نیست.
• WL_IDLE_STATUS: یک وضعیت موقت که هنگام فراخوانی تابع ()WiFi.begin برگردانده می­شود و تا وقتی تعداد تلاش‌ها به عدد خاصی برسد (نتیجه WL_CONNECT_FAILED به دست آید) یا اتصال برقرار شود (نتیجه WL_CONNECTED به دست آید)، فعال می‌ماند.
• WL_NO_SSID_AVAIL: وقتی هیچ SSID در دسترس نیست.
• WL_SCAN_COMPLETED: وقتی اسکن شبکه‌ها به اتمام برسد.
• WL_CONNECT_FAILED: وقتی پس از همه­‌ی تلاش‌ها، اتصال ناموفق باشد.
• WL_CONNECTION_LOST: وقتی اتصال از دست برود.
• WL_DISCONNECTED: وقتی از یک شبکه قطع شود.

زمانی‌که ESP8266 به شبکه متصل شده باشد، برنامه آدرس IP تخصیص یافته به ESP8266 را به‌وسیله­‌ی نمایش مقدار تابع ()WiFi.localIP، بر روی سریال مانیتور چاپ می‌کند.

Serial.println("");
Serial.println("WiFi connected..!");
Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

خلاصه

همان‌طور که در این مقاله مطالعه کردید، مدهای متفاوت ماژول ESP8266 باعث شده است که این ماژول بتواند به یک شبکه Wifi متصل شود و مانند یک وب سرور عمل کند و هم اینکه بتواند با فراهم آوردن امکان اتصال دستگاه‌های دیگر به خود، به صفحات وب دسترسی داشته باشد. در این مقاله ما به عنوان نمونه، وضعیت دو LED را با ESP8266 کنترل کردیم. هدف ما این بود که بتوانید ساخت وب سرور با ماژول ESP8266 را در آردوینو به ساده‌ترین شکل ممکن انجام دهید. اگر این پروژه را انجام دادید، حتما سوالات و تجربیات خود را برای ما بنویسید.