وب سرور چیست؟

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

ارتباط بین کاربر و سرور از طریق پروتکلی به نام Hypertext Transfer Protocol یا همان HTTP انجام می شود.

هرگاه درخواستی به این سرور ارسال می شود (مثلا آدرس آن در مرورگر سرچ می شود)، سرور کدی را به عنوان پاسخ بر می گرداند (مثلا کد 200 که به معنای ارتباط صحیح است و کد 404 که بیانگر این است که آدرس صحیح نمی باشد). لیست کامل این کد ها را می توانید در این لینک ببینید.

در این پروژه ESP یک صفحه وب برای ما ایجاد می کند که از این طریق می توانیم مقادیر را از ۰ تا ۲۵۵ تغییر دهیم که در نتیجه مقدار pwm نیز متناسب با آن تغییر خواهد کرد و نتیجه با تغییر شدت نور led در پایه GPIO2 و همچنین led نصب شده بر روی nodeMCU قابل مشاهده خواهد بود. در واقع زمانی که در صفحه وب مقدار را تغییر می دهیم یک درخواست HTTP از وب به ESP برای تغییر اعمال شده ارسال می شود، و سپس ESP مقادیر pwm را متناسب با عدد دریافت شده تنظیم میکند.

تنظیمات نرم افزار Arduino IDE

در این آموزش از برد ESP32 استفاده می کنیم، در ادامه مراحل را برای نصب این برد در نرم افزار آردوینو دنبال کنید.

• ابتدا در نرم افزار Arduino IDE به مسیر File> Preferences بروید.

• لینک زیر را در بخش مشخص شده قرار دهید.

https://dl.espressif.com/dl/package_esp32_index.json, http://arduino.esp8266.com/stable/package_esp8266com_index.json

• سپس به مسیر Tools > Board > Boards Manager بروید.

• در بخش board manager کلمه ESP32 را سرچ کنید و بر روی install کلیک کنید.

کتابخانه‌های مورد نیاز

در این آموزش از سه کتابخانه زیر استفاده می شود، در ادامه مراحل نصب را دنبال کنید.

#include 
#include 
#include 

• ابتدا به مسیر Sketch > Include Library > Add .zip Library بروید، و فایل .Zip که از لینک های زیر دانلود کرده اید را اضافه کنید.

از لینک های زیر اقدام به دانلود کتابخانه بکنید.

• ESPAsyncWebServer
• AsyncTCP

اتصالات برد ESP32

پایه آند LED را به GPIO2 و کاتد LED را به GND متصل کنید.

کد پروژه وب سرور برد ESP32

در ابتدا درباره بخش هایی از کد توضیحاتی خواهم داد.

• در این قسمت کتابخانه های مورد نیاز را اضافه می کنیم ESPAsyncWebServer و ESPAsyncTCP همچنین Wifi که برای ساخت وب سرور برد ESP32 مورد نیاز هستند.

#include 
#include 
#include 

• در این قسمت مشخصات اینترنت کاربر وارد می شود تا اتصال با شبکه برقرار شود.

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

• این خط از کد مقدار ابتدایی را برای ما صفر میکند.

String sliderValue = "0";

• این قسمت مربوط به تنظیمات pwm می باشد.

const int freq = 5000;
const int ledChannel = 0;
const int resolution = 8;

معرفی دستورات اولیه ی HTML و CSS

HTML دارای تگ هایی است که بین <> قرار می گیرند. تمامی دستورات HTML بین این تگ ها قرار می گیرند. برای تست کدهای خود به صورت آنلاین می توانید از این لینک استفاده کنید.

CSS مخفف (Cascading Style Sheets) است. دستورات CSS مشخص می کنند که کد ها و دستورات HTML چگونه به کاربر نمایش داده شوند.

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

Arduino

Copy

بلافاصله بعد از باید نوشته شود. تمام کد ها بین این تگ قرار می گیرند.

 codes… <\html>

Arduino

Copy

ایجاد تیتر

برای ایجاد تیتر در سایز های مختلف، می توانید از تگ های

تا

استفاده کنید.

Your first paragraph.
Your second paragraph.

Arduino

Copy

ایجاد پاراگراف

برای ایجاد یک پاراگراف جدید از تگ

استفاده کنید و متن خود را بین آن بنویسید.

برجسته (Bold) کردن نوشته ها

برای برجسته کردن نوشته ها می توانید از تگ HTML یا دستور CSS استفاده کنید.

This is bold text

Arduino

Copy

مورب (Italic) کردن نوشته ها

برای مورب کردن نوشته ها می توانید از تگ HTML یا دستور CSS استفاده کنید.

This is Italic text

Arduino

Copy

اضافه کردن لینک

با تگ می توانید آدرس URL را به صورت یک لینک در صفحه ی خود بگذارید.

Visit Electropeak

Arduino

Copy

اضافه کردن عکس

با تگ می توانید عکس اضافه کنید.

Arduino

Copy

اضافه کردن کلید

با تگ می توانید یک کلید به صفحه ی وب خود اضافه کنید.

Click Me!

Arduino

Copy

برای یادگیری کامل تر دستورات HTML و CSS، می توانید به سایت w3schools مراجعه کنید.

گسترش برنامه :

به عنوان مثال میخوایم این صفحه وب رو درست کنیم.

در صفحه وب پیاده سازی شده از طریق وب سرور ESP32 ، یک کلیدی داره و تغییر وضعیت پین GPIO2 (یا هر پین دیگه) رو که مربوط به یک LED روی ESP32 هست کنترل میشه. بعد از هر تغییر وضعیت اون پین تو این صفحه و تو هر مرورگر دیگه ای هم نمایش داده میشه.

خب بعد از زدن این کلید (کلید Toggle) چه اتفاقی میفته ؟ تو عکس زیر ببینیم.

• کلید “Toggle” زده میشه.
• کاربر (مرورگر شما) با پروتکل وب سوکت اطلاعات تغییر وضعیت رو ارسال می کنه .
• سرور (ESP32) اطلاعات رو دریافت می کنه و میفهمه باید حالت LED رو تغییر بده. روشن/خاموش
• از طریق پروتکل وب سوکت حالت جدید LED رو به همه کاربرها اطلاع میده.
• کاربرها هم از تغییر وضعیت جدی LED مطلع میشن و در صفحات وب حالت LED بروزرسانی میشه. (همه تغییرات بعدی هم در صفحات مرورگرها بروزرسانی میشه )

آپلود کردن کد

اول لازمه کتابخونه های ESPAsyncWebServer و AsyncTCP مربوط به این پروتکل رو به نرم افزار ARDUINO IDE اضافه کنید . بعد کد زیر رو آپلود کنید.

توضیحات مربوط به کد

بعد از خطوط اول که معرفی کتابخونه ها و تنظیمات شبکه نوشته شد، در خطوط ۱۷ و ۱۸ ledState برای نگهداری وضعیت LED و ledPin مربوط به پین GPIO تعریف شده.

AsyncWebServer در پورت ۸۰ برای کنترل وب سوکت مقداردهی و /ws برای کنترل وب سوکت در مسیر /ws تعریف میشه.

از خطوط ۲۴ تا ۱۴۷ با متغیر index_htmlاطلاعات HTML ، CSS و JavaScript برای تنظیمات مربوط به شکل صفحه وب و ارتباطات سرور و کاربر با پروتکل وب سوکت نگهداری میشه.

تنظیمات مربوط به CSS در خطوط ۳۰ تا ۹۰ بین و ، تنظیمات HTML در خطوط ۹۵ تا ۱۴۵ بین و و تنظیمات مربوط به JavaScript در خطوط ۱۰۶ تا ۱۴۴بین و قرار داره.

در بخش HTML در آدرس حافظه %STATE% وضعیت GPIO ذخیره میشه. (خط ۱۰۲)

در خط ۱۰۳ کد مربوط به کلید Toggle در صفحه وب قرار گرفته.

در بخش JavaScript در خط ۱۰۷ ، window.location.hostname آدرس آی پی وب سرور رو دریافت می کنه.

دستور ()notifyClients مربوط به اطلاع رسانی همه کاربرها توسط سرور در زمان ایجاد تغییر وضعیت پین هست. (خطوط ۱۴۹ تا ۱۵۱)

دستور ()handleWebSocketMessage زمانی که اطلاعات جدیدی از کاربرها با پروتکل وی سوکت دریافت میشه اجرا میشه. (خطوط ۱۵۳ تا ۱۶۲)

مراحل آسنکرون پروتکل وب سوکت با دستور ()onEvent پیکربندی میشه.(خطوط ۱۶۴ تا ۱۸۰) خب تو این قسمت ورودی عبارت type هست و اتفاقهای پروسه وب سوکت رو بیان میکنه.

• WS_EVT_CONNECT : زمانی که کاربری وارد شبکه میشه
• WS_EVT_DISCONNECT : زمانی که کاربر از شبکه خارج میشه
• WS_EVT_DATA : اطلاعات از کاربر دریافت میشه
• WS_EVT_PONG : در جواب یک درخواست دریافت شده
• WS_EVT_ERROR : زمانی که از یک کاربر پیام ارور دریافن میشه

با دستور ()initWebSocket پروتکل وب سوکت پیکربندی میشه.(در خطوط ۱۸۲ تا ۱۸۴)

دستور ()processor مربوط به آدرس دهیHTML تو حافظه است.(خطوط ۱۸۷ تا ۱۹۴)

در دستور ()setup پیکربندی مانیتور و GPIO ها ، WIFI و آدرس آی پی ESP32 انجام میشه. (خطوط ۲۱۴ تا ۱۹۹)

اطلاعات ذخیره شده تو متغیر index_html ، اگر نیاز باشه دستور ()processor اجرا بشه تنظیمات آدرس GPIO ها تو حافظه تو خطوط ۲۱۹ تا ۲۲۴ نوشته میشه.

در دستور ()loop با وجود تمام کدهای دستوری مربوط به اتمام ارتباط وب سوکت اما گاهی اوقات مرورگرها به صورت درستی این ارتباط رو قطع نمیکنن. این باعث اختلال تو عملکرد سرور و مصرف توان بیشتری میشه. با فراخوانی دستور ()cleanupClients اگر تعداد کاربرهایی که به سرور متصل هستن از یک مقدار مشخصی بیشتر شده باشه، اتصال کابرهای قدیمی تر از سرور قطع میشه.(خطوط ۲۲۷ تا ۲۲۹)

پیاده سازی

بعد از آپلود کردن کد روی برد و زدن کلید EN//RST روی برد آدرس آی پی ESP32 روی صفحه مانیتور نمایش داده میشه. این آی پی رو تو مرورگر وارد کنید. صفحه مرورگر به شکل زیر شده و با زدن کلید Toggle ، LED رو میشه روشن و خاموش کرد.

دانلود کد آردینو

دانلود کد متنی