دراین آموزش قصد داریم چگونگی ایجاد یک وب سرور به کمک ESP8266 را بررسی کنیم که در این وب سرور صفحه HTML مورد نظر خود را به Client ها نشان خواهیم داد. ابتدا توسط ESP8266 به یک Access Point متصل شده و بعد از آن در تلفن همراه یا کامپیوتر هایی که با ESP8266 در شبکه یکسانی هستند صفحه HTML را مشاهده خواهیم کرد.

در دوره ورود به دنیای اینترنت اشیا با ESP8266 به طور کامل نحوه ایجاد Access Point و وب سرور را فراگرفتیم و اکنون قصد داریم آموخته های خود را با نحوه ایجاد یک صفحه HTML در وب سرور تکمیل کنیم.

مراحل ایجاد یک وب سرور با صفحه HTML دلخواه

          مرحله اول : درست کردن یک صفحه HTML

                        در این مرحله در ابتدا یک صفحه  HTML ساده را طراحی کرده که قصد داریم در وب سرور خود آن را نمایش دهیم. برای این امر به کمک یک نرم افزار ویرایش متن مانند Notepad یک فایل با نام Index.html درست کرده و محتویات زیر را در آن قرار می‎دهیم که یک صفحه بسیار ساده برای نمایش یک متن به کاربر ها است.

 

<HTML>

<HEAD>

<TITLE>WebServer Test page</TITLE>

</HEAD>

<BODY>

<CENTER>

<B>Hello From My WebServer.... </B>

</CENTER>

</BODY>

</HTML>

 

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

همانطور که در تصویر مشخص است ما قرار است تنها به کاربر هایی که به وب سرور ما وارد می‎شوند تنها یک پیام خوش آمد نشان دهیم که بسته به کار خود می‎توانید به کمک ایجاد یک صفحه HTML دلخواه قابلیت هایی بیشتر را به کاربران بدهید.

پیشنهاد فرانش به شما
چگونه برنامه نویسی اندروید را از ۰ تا ۱۰۰ بیاموزیم؟

            مرحله دوم : ایجاد وب سرور در ESP8266

            در این آموزش ما قصد داریم ESP8266 را به یک Access Point متصل کنیم و وب سرور را ایجاد کنیم که برای این امر مراحل زیر را باید سپری کنیم. مد نظر داشته باشید مراحل نوشته برنامه مرحله به مرحله توضیح داده شده است و در انتهای آموزش فایل کمال در اختیار شما قرار گرفته است.

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

#include <ESP8266WiFi.h>

#include <WiFiClient.h>

#include <ESP8266WebServer.h>

  • h برای فراخوانی توابع WiFi مربوط به ESP8266
  • h برای ارسال درخواست به مرورگر
  • h برای کنترل کردن پروتوکل HTTP در ESP8266

بعد از توابع سرآمد همانطور که گفتیم قرار است ESP8266 را به یک Access Point متصل کنیم که توسط دستور زیر می‎توانیم مشخصات این Access Point را وارد کنیم.

const char* ssid = "your_ssid";

const char* password = "password";

در کد های فوق به جای your_ssid نام Access Point خود و به جای password نیز کلمه عبور Access Point را وارد کنید. بعد از تعیین مشخصات Access Point باید یک وب سرور ایجاد کنیم که این عملیات توسط دستور زیر قابل پیاده سازی است.

ESP8266WebServer server(80);

در دستور فوق یک سرور با نام server ایجاد کرده ایم که روی پورت ۸۰ کار خواهد کرد که پورت معمول برای HTTP است. این نام می‎تواند هر مقدار دلخواه شما باشد. اگر به جای ۸۰ که در پرانتر قرار گرفته است عدد دیگری وارد کنید لازم است برای فراخوانی وب سرور این پورت را با : در انتهای آدرس وب سرور وارد کنید. فرض کنیم وب سرور ما روی آدرس ۱۹۲.۱۶۸.۱.۱۱۰ قرار گرفته است. اگر پورت را ۸۰ گذاشته باشیم با وارد کردن این آدرس به وب سرور منتقل خواهیم شد اما اگر پورت را ۸۰ قرار نداده اید و مثلا ۸۱ است برای رفتن به وب سرور باید آدرس را به صورت ۱۹۲.۱۶۸.۱.۱۱۰:۸۱ وارد گردد.

نکته : مد نظر داشته باشید نامی که در این مرحله برای سرور خود انتخاب کرده اید (در اینجا server) در تمامی مراحل بعد مورد استفاده قرار خواهد گرفت پس هر نامی در این مرحله انتخاب کردید در مراحل بعد نیز باید مورد استفاده قرار بگیرد.

پیشنهاد فرانش به شما
15 فناوری که شیوهٔ کار برنامه‌نویس‌ها رو تغییر می‌ده

مرحله بعد اتصال ESP8266 به شبکه WiFi است که این کار به کمک دستور زیر انجام می‎گیرد. مد نظر داشته باشید اگر شبکه شما به صورت Open است و کلمه عبور ندارد می‎توانید ورودی دوم این دستور را خالی گذاشته و فقط نام را وارد کنید. توجه داشته باشید این دستور به Access Point متصل می‎شود که در مراحل قبل مشخصات آن را وارد کرده ایم.

WiFi.begin(ssid, password);

 

بعد از این مرحله باید منتظر ماند تا ESP8266 به Access Point متصل گردد. برای این منظور از دستور WiFi.status() استفاده می‎کنیم که یکی از خروجی های جدول زیر را دارد.

ValueLibrary statuses – Constants
۲۵۵WL_NO_SHIELD
۰WL_IDLE_STATUS
۱WL_NO_SSID_AVAIL
۲WL_SCAN_COMPLETED
۳WL_CONNECTED
۴WL_CONNECT_FAILED
۵WL_CONNECTION_LOST
۶WL_DISCONNECTED

 

از اسم هر کدام از متغییر ها کارایی آن مشخص است و همانطور که گفته شد ما نیاز دارم تا از اتصال به شبکه WiFi اطمینان حاصل کنیم پس خروجی این دستور برای کار ما باید WL_CONNECTED باشد که به کمک دستورات زیر این شرط را بررسی خواهیم کرد.

while (WiFi.status() != WL_CONNECTED) {

delay(500);

Serial.print(".");

}

همانطور که در دستورات فوق مشخص است تا زمانی که اتصال به شبکه انجام نشده است ما در این خط منتظر خواهیم ماند و هر ۵۰۰ میلی ثانیه (نیم ثانیه) این شرط را بررسی کرده و یک کاراکتر “.”را نیز در ارتباط سریال چاپ می‎کنیم که یک دید بصری نیز از تلاش برای اتصال به شبکه داشته باشم.

بعد از اتصال به شبکه نیاز داریم تا IP وب سرور خود را داشته باشیم که به کمک دستور زیر می‎توان این IP را استخراج نمود.

WiFi.localIP();

در مرحله بعد Client ها با وارد کردن آدرس IP که مرحله قبل به دست آمده است قصد اتصال به وب سرور را دارند که چگونگی نمایش اطلاعات به هر Client توسط دستور زیر شکل می‎گیرد.

server.on("/", handleRoot);

 همانطور که مشخص است برای هر صفحه موجود در وب سرور می‎توانید دستوری به این شکل داشته باشید. به عنوان مثال دستور فوق برای آدرس روت می‎باشد. مثلا اگر IP در مرحله قبل برابر ۱۹۲.۱۶۸.۱.۱۱۰ باشد و کاربر همین آدرس را وارد کند دستور فوق دستورات موجود در تابع handleRoot را اجرا کرده و به عنوان خروجی به Client نمایش خواهد داد. حال اگر بخواهیم صفحات دیگری نیز در وب سرور خود داشته باشیم می‎توانیم این کار را با چند بار فراخوانی این دستور انجام دهیم. مثلا اگر بخواهیم علاوه بر صفحه روت یک صفحه با نام Faranesh داشته باشیم به کمک دستور زیر می‎توانیم این عملیات را انجام دهیم.

پیشنهاد فرانش به شما
آموزش نرم افزار سالیدورک در 1 ساعت!

server.on("/Faranesh ", handleFaranesh);

در دستور فوق اگر کاربر به آدرس ۱۹۲.۱۶۸.۱.۱۱۰/Faranesh برود تابع handleFaranesh اجرا شده و دستوراتی که ما در این تابع قرار داده ایم برای کاربر به نمایش در خواهد آمد.

حال باید وب سرور را آغاز کنیم که به کمک دستور زیر این کار انجام خواهد شد.

server.begin();

حال که سرور ما ایجاد شده است باید به کمک دستور زیر ورود Client ها و اتصال آن ها به وب سرور را کنترل می‎کنیم.

server.handleClient();

 

            مرحله سوم: آپلود و نمایش صفحه HTML

حال که تمامی مقدمات انجام شده است نوبت به آخرین مرحله یعنی نوشتن تابع handleRoot می‎رسد. همانطور که گفتیم ما قصد داریم یک صفحه HTML در در مرحله اول نوشتیم را به کاربرهایی که به وب سرور ما متصل می‎شوند نمایش دهیم. برای این کار در ابتدا باید اطمینان حاصل کنید فایل HTML شما دارای Comments نیست. بدین معنی که فایل HTML فاقد هر گونه متنی است که با کاراکتر های “//” غیر فعال گشته اند. بعد از اطمینان از این مورد محتوی صفحه HTML خود را به صورت زیر داخل یک هدر فایل (فایل با پسوند .h) با نام دلخواه ذخیره می‎کنیم. این نام می‎تواند مقداری مانند Index.h باشد.

const char MAIN_page[] PROGMEM = R"=====(

<HTML>

            <HEAD>

                                    <TITLE>WebServer Test page</TITLE>

            </HEAD>

<BODY>

            <CENTER>

                                    <B>Hello From My WebServer....</B>

            </CENTER>     

</BODY>

</HTML>

)=====";

 

همانطور که مشخص می‎باشد در این قایل ما اطلاعات صفحه HTML را در داخل یک متغییر با نام MAIN_page ذخیره کرده ایم. حال این فایل را در مسیری قرار می‎دهیم که فایل اصلی برنامه ما قرار دارد. که در نهایت دو فایل به صورت زیر در کنار هم قرار می‎گیرند. فایل Index.h فایل هدر ما شامل صفحه HTML است و فایل Main.ino فایل اصلی برنامه است که بر روی ESP8266 آپلود خواهیم کرد.

پیشنهاد فرانش به شما
آموزش نصب Angular 8 در ویندوز 10

بعد از آن که هدر فایل ما ساخته شد این هدر فایل را به کمک دستور include مانند توابع سرآمد دیگر به ابتدای برنامه اضافه می‎کنیم. حال تابع handleRoot را به صورت زیر در انتهای برنامه نوشته و بدین صورت صفحه HTML که در ابتدا نوشتیم برای کاربر هایی که به وب سرور ما متصل می‎شوند نمایش داده می‎شود.

void handleRoot() {

String s = MAIN_page;

server.send(200, "text/html", s);

}

همانطور که در دستورات فوق مشخص است در این تابع مقادیر MAIN_page که صفحه HTML ما است را در یک رشته با نام “s” ذخیره کرده ایم و سپس با دستور server.send این رشته را برای کاربرانی که به وب سرور متصل می‎شوند ارسال کرده ایم. پس به کمک این روش می‎توانیم صفحات HTML دلخواه خود را در وب سرور ESP8266 نمایش دهیم.

 

          نتایج کار

          بعد از آپلود برنامه بر روی NodeMCU که در دوره ورود به دنیای اینترنت اشیا با ESP8266 در مورد آن توضیح داده شده است نوبت به تست نتایج کار می‎رسد. در ابتدا ماژول تلاش می‎کند به شبکه WiFi متصل شود. بعد از انجام اتصال آدرس IP وب سرور را در اختیار ما قرار می‎دهد که در تصویر زیر می‎بینید.

همانطور که در تصویر مشخص است ماژول ابتدا به Access Point ما که در اینجا Masoud Phone است متصل شده است و بعد از آن نیز IP را در اختیار ما قرار داده است. حال اگر این آدرس IP را در سیستمی وارد کنیم که با ESP8266 در یک شبکه قرار گرفته باشد با صفحه HTML مورد نظر رو به رو خواهیم شد که در تصویر زیر مشاهده می‎کنید.

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

پیشنهاد فرانش برای یادگیری ورود به دنیای اینترنت اشیا با ESP8266

دوره‌های آموزشی آقای مسعود بیرجندی که از مدرس‌های قدیمی و برجسته فرانش هستند، پیشنهاد می‌شود.

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

مسعود بیرجندی

مسعود بیرجندی، کارشناسی ارشد مهندسی برق گرایش مخابرات سیستم.