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

راهنمای کامل ساخت وب سرور با ESP8266 به همراه کد و شماتیک

در این آموزش دو روش مختلف برای ساخت وب سرور را پوشش می دهیم:

  • بخش 1: ایجاد یک وب سرور با استفاده از Arduino IDE
  • بخش 2: ایجاد یک وب سرور با استفاده از نرم افزار NodeMCU

بخش 1:ساخت وب سرور با ESP8266 با استفاده از ARDUINO IDE

در بخش اول به چگونگی نحوه ساخت یک وب سرور با ESP8266 برای کنترل دو خروجی با استفاده از Arduino IDE میپردازیم. شما میتوانید با استفاده از این آموزش به نسبت نیاز های خود این مثال را تغییر دهید.

آماده سازی Arduino IDE

برای استفاده از این مثال در Arduino IDE باید بردهای ESP8266 را نصب نمایید در آموزش زیر این موضوع آموزش داده شده است.

نصب بردهای ESP8266 در آردوینو IDE (ویندوز – مک – لینوکس)

کد

کد زیر را در آردوینو IDE خود کپی کنید، اما هنوز آن را آپلود نکنید. باید تغییراتی ایجاد کنید تا برای شما با توجه به پارامترهای مورد نیاز تکمیل شود.

/*********
  Rui Santos
  Complete project details at http://randomnerdtutorials.com  
*********/

// Load Wi-Fi library
#include 

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

// Set web server port number to 80
WiFiServer server(80);

// Variable to store the HTTP request
String header;

// Auxiliar variables to store the current output state
String output5State = "off";
String output4State = "off";

// Assign output variables to GPIO pins
const int output5 = 5;
const int output4 = 4;

// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0; 
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;

void setup() {
  Serial.begin(115200);
  // Initialize the output variables as outputs
  pinMode(output5, OUTPUT);
  pinMode(output4, OUTPUT);
  // Set outputs to LOW
  digitalWrite(output5, LOW);
  digitalWrite(output4, LOW);

  // Connect to Wi-Fi network with SSID and password
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // Print local IP address and start web server
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop(){
  WiFiClient client = server.available();   // Listen for incoming clients

  if (client) {                             // If a new client connects,
    Serial.println("New Client.");          // print a message out in the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    currentTime = millis();
    previousTime = currentTime;
    while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client's connected currentTime = millis(); if (client.available()) { // if there's bytes to read from the client, char c = client.read(); // read a byte, then Serial.write(c); // print it out the serial monitor header += c; if (c == '\n') { // if the byte is a newline character // if the current line is blank, you got two newline characters in a row. // that's the end of the client HTTP request, so send a response: if (currentLine.length() == 0) { // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK) // and a content-type so the client knows what's coming, then a blank line: client.println("HTTP/1.1 200 OK"); client.println("Content-type:text/html"); client.println("Connection: close"); client.println(); // turns the GPIOs on and off if (header.indexOf("GET /5/on") >= 0) {
              Serial.println("GPIO 5 on");
              output5State = "on";
              digitalWrite(output5, HIGH);
            } else if (header.indexOf("GET /5/off") >= 0) {
              Serial.println("GPIO 5 off");
              output5State = "off";
              digitalWrite(output5, LOW);
            } else if (header.indexOf("GET /4/on") >= 0) {
              Serial.println("GPIO 4 on");
              output4State = "on";
              digitalWrite(output4, HIGH);
            } else if (header.indexOf("GET /4/off") >= 0) {
              Serial.println("GPIO 4 off");
              output4State = "off";
              digitalWrite(output4, LOW);
            }
            
            // Display the HTML web page
            client.println("");
            client.println("");
            client.println("");
            // CSS to style the on/off buttons 
            // Feel free to change the background-color and font-size attributes to fit your preferences
            client.println("


 

 

");
            
            // Web Page Heading
            client.println("

ESP8266 Web Server

“);

// Display current state, and ON/OFF buttons for GPIO 5
client.println(“

GPIO 5 – State ” + output5State + “

“);
// If the output5State is off, it displays the ON button
if (output5State==”off”) {
client.println(“

“);
} else {
client.println(“

“);
}

// Display current state, and ON/OFF buttons for GPIO 4
client.println(“

GPIO 4 – State ” + output4State + “

“);
// If the output4State is off, it displays the ON button
if (output4State==”off”) {
client.println(“

“);
} else {
client.println(“

“);
}
client.println(“

");
            
            // The HTTP response ends with another blank line
            client.println();
            // Break out of the while loop
            break;
          } else { // if you got a newline, then clear currentLine
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }
      }
    }
    // Clear the header variable
    header = "";
    // Close the connection
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

شما باید دو متغیر زیر را با مقادیر شبکه خود تغییر دهید تا پروژه وب سرور با ESP8266 شما بتواند با روتر شما ارتباط برقرار کند. در متغیر ssid نام وایفای و در متغیر password رمز عبور وایفای خود را وارد کنید.

// Replace with your network credentials
const char* ssid = “”;
const char* password = “”;

آپلود برنامه

اکنون باید برنامه را روی ماژول esp8266 خود آپلود نمایید.

اگر از کیت ESP-12E NodeMCU استفاده می کنید، آپلود برنامه بسیار ساده است، زیرا دارای پروگرامر داخلی است. برد خود را به رایانه وصل کنید. حتما مطمئن شوید که برد و پورت COM مناسب را انتخاب کرده اید.

سپس، روی دکمه آپلود در آردوینو IDE کلیک کنید و چند ثانیه صبر کنید تا پیام «done uploading» را در گوشه سمت چپ پایین مشاهده کنید.

راهنمای کامل ساخت وب سرور با ESP8266 به همراه کد و شماتیک

آپلود برنامه روی ESP-01

آپلود کد در ESP-01 مستلزم برقراری ارتباط سریال بین ESP8266 و پروگرامر FTDI است که در شماتیک زیر نشان داده شده است. همچین از یک مبدل سریال به USB معمولی نیز برای این کار میتوانید استفاده نمایید.

راهنمای کامل ساخت وب سرور با ESP8266 به همراه کد و شماتیک

جدول زیر اتصالاتی را که باید بین ESP8266 و پروگرامر FTDI ایجاد کنید را نشان می دهد.

ESP8266FTDI programmer
RXTX
TXRX
CH_PD3.3V
GPIO 0GND
VCC3.3V
GNDGND

اگر پروگرامر FTDI را برای اولین بار به سیستم خود متصل میکنید، احتمالاً باید درایورهای FTDI را روی ویندوز خود نصب کنید. جهت دریافت درایورهای رسمی از این وبسایت میتوانید دانلود نمایید. (اگر قسمت PORT در Arduino IDE شما خاکستری شده است، احتمالاً به این دلیل است که درایورها را نصب نکرده اید).

در نهایت، فقط باید پروگرمر FTDI را به رایانه خود متصل کرده و کد را در ESP8266 آپلود کنید.

شماتیک

برای ساخت مدار این آموزش به قطعات زیر نیاز دارید:

  • برد ESP8266-12E
  • 2 عدد LED
  • 2 عدد مقاومت 220 یا 330 اهم
  • بردبورد
  • سیم جامپر

اگر از ESP-01 استفاده می کنید، به یک پروگرمر FTDI یا یک آداپتور سریال نیز نیاز دارید.

 

همانطور که در شماتیک زیر نشان داده شده است، دو LED را به ESP8266 خود وصل کنید – یک LED به GPIO 4 (D2) و دیگری به GPIO 5 (D1) متصل نمایید.

راهنمای کامل ساخت وب سرور با ESP8266 به همراه کد و شماتیک

اگر از ESP8266-01 استفاده می کنید، از شماتیک زیر به عنوان مرجع استفاده کنید، اما باید تخصیص GPIO ها را در کد تغییر دهید (به GPIO 2 و GPIO 0).

راهنمای کامل ساخت وب سرور با ESP8266 به همراه کد و شماتیک

تست وب سرور

اکنون، می توانید کد را آپلود کنید و پروژه وب سرور با ESP8266 خود را تست کنید. فراموش نکنید که بررسی کنید آیا برد و پورت COM مناسب را انتخاب کرده اید، در غیر این صورت هنگام تلاش برای آپلود با خطا مواجه خواهید شد.

مانیتور سریال را با نرخ باود 115200 باز کنید.

پیدا کردن آدرس IP ESP

دکمه ESP8266 RESET را فشار دهید و آدرس IP ESP را در مانیتور سریال نمایش داده میشود.

راهنمای کامل ساخت وب سرور با ESP8266 به همراه کد و شماتیک

آدرس IP را کپی کنید، زیرا برای دسترسی به وب سرور به آن نیاز دارید.

دسترسی به وب سرور

مرورگر خود را باز کنید، آدرس IP ESP را تایپ کنید و صفحه زیر را مشاهده خواهید کرد. این صفحه که توسط مرورگر و ای پی آدرس درخواست داده میشود توسط ESP8266 به مرورگر شما ارسال می شود.

راهنمای کامل ساخت وب سرور با ESP8266 به همراه کد و شماتیک

اگر به مانیتور سریال نگاهی بیندازید، می توانید ببینید در پس زمینه چه اتفاقی می افتد. ESP یک درخواست HTTP از یک کلاینت جدید دریافت می کند که در این مورد، مرورگر شما میباشد.

همچنین می توانید اطلاعات دیگری در مورد درخواست HTTP مشاهده کنید این فیلدها فیلدهای هدر HTTP نامیده می شوند و پارامترهای عملیاتی تراکنش HTTP را تعریف می کنند.

راهنمای کامل ساخت وب سرور با ESP8266 به همراه کد و شماتیک

تست پروژه وب سرور با ESP8266

حال بیایید وب سرور را آزمایش کنیم. برای روشن کردن GPIO 5 روی دکمه on کلیک کنید. ESP درخواستی را روی /5/on URL دریافت می کند و LED 5 را روشن می کند.

راهنمای کامل ساخت وب سرور با ESP8266 به همراه کد و شماتیک

وضعیت LED نیز در صفحه وب به روز می شود.

راهنمای کامل ساخت وب سرور با ESP8266 به همراه کد و شماتیک

دکمه GPIO 4 نیز به همین صورت کار می کند.

نحوه کار کد

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

اولین کاری که باید انجام دهید این است که کتابخانه ESP8266WiFi را اضافه کنید.

// Load Wi-Fi library
#include <ESP8266WiFi.h>

همانطور که قبلا ذکر شد، شما باید ssid و رمز عبور خود را در خطوط زیر در داخل دو گیومه وارد کنید.

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

سپس، وب سرور خود را روی پورت 80 تنظیم می کنید.

// Set web server port number to 80
WiFiServer server(80);

خط زیر یک متغیر برای ذخیره هدر درخواست HTTP ایجاد می کند:

String header;

در مرحله بعد، متغیرهای کمکی را برای ذخیره وضعیت فعلی خروجی های خود ایجاد می کنید. اگر می خواهید خروجی های بیشتری اضافه کنید و وضعیت آن را ذخیره کنید، باید متغیرهای بیشتری ایجاد کنید.

// Auxiliar variables to store the current output state
String output5State = "off";
String output4State = "off";

همچنین باید به هر یک از خروجی های خود یک GPIO اختصاص دهید. در اینجا ما از GPIO 4 و GPIO 5 استفاده می کنیم. شما می توانید از هر GPIO مناسب دیگری استفاده کنید.

// Assign output variables to GPIO pins
const int output5 = 5;
const int output4 = 4;

setup()

حالا بیایید وارد setup() شویم. تابع setup() فقط یک بار زمانی که ESP شما برای اولین بار راه اندازی می شود اجرا می شود. ابتدا یک ارتباط سریال را با نرخ باود 115200 برای اهداف اشکال زدایی یا دیباگینگ استارت می کنیم.

Serial.begin(115200);

همچنین GPIO های خود را به عنوان OUTPUT تعریف کرده و آنها را روی LOW قرار می دهیم.

// Initialize the output variables as outputs
pinMode(output5, OUTPUT);
pinMode(output4, OUTPUT);
// Set outputs to LOW
digitalWrite(output5, LOW);
digitalWrite(output4, LOW);

خطوط زیر اتصال Wi-Fi را با WiFi.begin(ssid, password) شروع می کنند، منتظر باشید تا ماژول شما به شبکه متصل شود و آدرس IP ESP را در مانیتور سریال چاپ می کند.

// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();

loop()

در loop() ما برنامه ریزی می کنیم که چه اتفاقی می افتد زمانی که یک کلاینت جدید با وب سرور ارتباط برقرار می کند.

ESP همیشه با این خط برنامه به کلاینت های ورودی گوش می دهد:

WiFiClient client = server.available(); // Listen for incoming clients

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

if (client) { // If a new client connects,
Serial.println("New Client."); // print a message out in the serial port
String currentLine = ""; // make a String to hold incoming data from the client
while (client.connected()) { // loop while the client's connected
if (client.available()) { // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
header += c;
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();

بخش بعدی دستورات if و else بررسی می کند که کدام دکمه در صفحه وب شما فشار داده شده است و خروجی ها را بر این اساس کنترل می کند. همانطور که قبلاً دیدیم، بسته به هر دکمه ای که فشار می دهیم، از URL های مختلف ارسال درخواست می کنیم.

// turns the GPIOs on and off
if (header.indexOf("GET /5/on") >= 0) {
Serial.println("GPIO 5 on");
output5State = "on";
digitalWrite(output5, HIGH);
} else if (header.indexOf("GET /5/off") >= 0) {
Serial.println("GPIO 5 off");
output5State = "off";
digitalWrite(output5, LOW);
} else if (header.indexOf("GET /4/on") >= 0) {
Serial.println("GPIO 4 on");
output4State = "on";
digitalWrite(output4, HIGH);
} else if (header.indexOf("GET /4/off") >= 0) {
Serial.println("GPIO 4 off");
output4State = "off";
digitalWrite(output4, LOW);
}

به عنوان مثال، اگر دکمه GPIO 5 ON را فشار داده باشید، URL به آدرس IP ESP و سپس /5/ON تغییر می کند و ما آن اطلاعات را در هدر HTTP دریافت می کنیم. بنابراین، می‌توانیم بررسی کنیم که آیا هدر عبارت GET /5/on را دارد یا خیر.

اگر حاوی این اطلاعات مورد نظر ما باشد، پیامی را روی نمایشگر سریال چاپ می کند، متغیر output5State را به on تغییر می دهد و LED را روشن می کند.

این موضوع برای سایر دکمه ها به طور مشابه عمل می کند. بنابراین، اگر می‌خواهید خروجی‌های بیشتری اضافه کنید، باید این قسمت از کد را تغییر دهید تا خروجی های جدید را شامل شود.

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

کار بعدی که باید انجام دهید، ایجاد صفحه وب است. ESP8266 پاسخی با متن HTML برای نمایش صفحه وب به مرورگر شما ارسال می کند.

صفحه وب با استفاده از تابع client.println() برای کلاینت ارسال می شود. شما باید آنچه را که می خواهید برای کلاینت ارسال کنید به عنوان آرگومان این تابع وارد کنید.

اولین متنی که همیشه باید بفرستید خط زیر است که نشان می دهد ما در حال ارسال با فرمت HTML هستیم.

<!DOCTYPE html><html>

سپس، خط زیر صفحه وب را در هر مرورگر وب ریسپانسیو می کند.

client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");

مورد بعدی برای جلوگیری از درخواست های مربوط به فاویکون استفاده می شود.

client.println("<link rel=\"icon\" href=\"data:,\">");

استایلینگ صفحه وب

در مرحله بعد، ما مقداری CSS برای استایل دادن به دکمه ها و ظاهر صفحه وب داریم. فونت Helvetica را انتخاب می کنیم، محتوایی را که به صورت بلوک نمایش داده می شود و در مرکز تراز می شود، تعریف می کنیم.

client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");

دکمه های خود را با برخی ویژگی ها مانند رنگ، اندازه، حاشیه و غیره استایل می کنیم.

client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");

سپس، استایل را برای دکمه دوم تعریف می کنیم، با تمام ویژگی های دکمه ای که قبلاً تعریف کرده ایم، اما با رنگ متفاوت. این سبک برای دکمه خاموش خواهد بود.

client.println(".button2 {background-color: #77878A;}</style></head>");

تنظیم عنوان اول صفحه وب

در خط بعدی عنوان اول صفحه وب خود را تعیین کنید، می توانید این متن را به هر چیزی که دوست دارید تغییر دهید.

// Web Page Title 
client.println("<h1>ESP8266 Web Server</h1>");

نمایش دکمه ها و وضعیت مربوطه

سپس، یک پاراگراف برای نمایش وضعیت فعلی GPIO 5 می نویسید. همانطور که می بینید، ما از متغیر output5State استفاده می کنیم، به طوری که با تغییر این متغیر، وضعیت فوراً به روز می شود.

client.println("<p>GPIO 5 - State " + output5State + "</p>");

سپس، بسته به وضعیت فعلی GPIO، دکمه روشن یا خاموش را نمایش می دهیم.

if (output5State=="off") {
client.println("<p><a href=\"/5/on\"><button class=\"button\">ON</button></a></p>");
} else{
client.println("<p><a href=\"/5/off\"><button class=\"button button2\">OFF</button></a></p>");
}

ما از همین رویه برای GPIO 4 استفاده می کنیم.

بستن اتصال

در نهایت، زمانی که پاسخ به پایان می رسد، متغیر هدر را پاک می کنیم و ارتباط با کلاینت را با () client.stop متوقف می کنیم.

// Clear the header variable
header = "";
// Close the connection
client.stop();

پیشرفت بیشتر

اکنون که می دانید کد ساخت وب سرور Esp8266 چگونه کار می کند، می توانید کد را تغییر دهید تا خروجی های بیشتری اضافه کنید یا صفحه وب خود را تغییر دهید. برای تغییر صفحه وب خود ممکن است نیاز به دانستن مقداری HTML و CSS داشته باشید.

به جای کنترل دو LED، می توانید یک رله را برای کنترل عملاً هر وسیله الکترونیکی کنترل کنید.

برای ساخت یک وب سرور برای نمایش قرائت حسگرها، می توانید آموزش های زیر را بخوانید:

راه اندازی سنسور DS18B20 با ESP8266 در حالت تکی ، چندتایی و وب سرور (اینترنت اشیا)

راه اندازی سنسور BME680 با استفاده از ESP8266 اندازه گیری گاز، فشار، رطوبت و دما به صورت ساده و وب سرور

برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]
بازگشت به لیست

نوشته های مشابه

دیدگاهتان را بنویسید