موقتا برای پشتیبانی (دوره ها) از طریق پیام رسان آیگپ یا تلگرام با آیدی @irenxdotir در ارتباط باشید.

آموزش Espآموزش ESP32آموزش اینترنت اشیا

آموزش ساخت 4 وب سرور با برد ESP32

ESP32 یکی از محبوب‌ترین میکروکنترلرها در دنیای اینترنت اشیا شده است و دلیل خوبی هم دارد. این برد قدرتمند، مقرون‌به‌صرفه و مجهز به Wi-Fi و بلوتوث داخلی است، که آن را برای ساخت دستگاه‌های هوشمند و متصل ایده‌آل می‌کند. یکی از هیجان‌انگیزترین ویژگی‌های ESP32 توانایی آن در عملکرد به‌عنوان یک وب سرور مستقل است بدون نیاز به کامپیوتر یا سرور خارجی!

در این آموزش، همه چیزهایی که برای شروع کار با وب سرورهای ESP32 با استفاده از Arduino IDE نیاز دارید را به شما نشان خواهیم داد. شما خواهید آموخت وب سرور چیست، چگونه ESP32 می‌تواند در حالت Station، حالت Access Point یا هر دو کار کند، و چگونه از این حالت‌ها برای ساخت برنامه‌های واقعی استفاده کنید.

برای جذاب‌تر کردن آموزش و عملی بودن آن، سه پروژه کاربردی خواهیم ساخت:

  • ابتدا یک شمارنده بازدیدکننده ساده با ESP32 می‌سازیم. ایده این است که ESP32 یک صفحه وب میزبانی کند و هر بار که کسی آن صفحه را بازدید می‌کند، شمارنده یک واحد افزایش یابد—راهی عالی برای درک نحوه مدیریت اولیه سرور.
  • سپس به یک پروژه پیشرفته‌تر می‌رویم. یک سنسور دمای DS18B20 به ESP32 متصل می‌کنیم و دمای زنده را روی یک صفحه وب نمایش می‌دهیم. همچنین یاد می‌گیرید چگونه با استفاده از تکنیک‌هایی مانند HTTP polling و AJAX، داده‌ها را به‌صورت زنده به‌روزرسانی کنید.
  • در نهایت، هیجان‌انگیزترین پروژه را خواهیم ساخت: کنترل دو LED از طریق Wi-Fi. یاد می‌گیرید چگونه یک رابط وب پاسخگو ایجاد کنید که به شما امکان روشن و خاموش کردن LEDها از مرورگر را بدهد، و وضعیت LED فوراً روی صفحه نمایش داده شود.

جالب به نظر می‌رسد؟ بیایید شروع کنیم و ESP32 خود را به وب متصل کنیم!

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

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

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

وب سرور اساساً یک کامپیوتر قدرتمند با یک وظیفه اصلی است: ذخیره وب‌سایت‌ها و ارائه آن‌ها به افرادی که درخواست می‌دهند. وقتی یک آدرس وب را در مرورگر خود تایپ می‌کنید یا روی یک لینک کلیک می‌کنید، در واقع یک سفارش به وب سرور می‌دهید. درست مثل گارسون رستوران، وب سرور درخواست شما را می‌گیرد، دقیقاً چیزی که به دنبال آن هستید را پیدا می‌کند و به صفحه نمایش کامپیوتر شما می‌فرستد.

در پشت صحنه چه اتفاقی می‌افتد؟ وقتی تصمیم می‌گیرید از یک وب‌سایت بازدید کنید (مثلاً www.google.com) کامپیوتر شما ابتدا باید وب سرور مناسب که آن وب‌سایت روی آن قرار دارد را پیدا کند. برای این کار از چیزی به نام آدرس IP استفاده می‌کند.

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

یک آدرس IP شبیه یک سری اعداد جدا شده با نقطه است، مانند 74.125.130.139. اگرچه در ابتدا ممکن است گیج‌کننده به نظر برسد، اما در واقع یک سیستم بسیار سازمان‌یافته است. هر عدد در این دنباله اطلاعات خاصی درباره مکان کامپیوتر در اینترنت ارائه می‌دهد، مشابه نحوه‌ای که آدرس شما شامل شماره خانه، نام خیابان، شهر و کد پستی است.

وقتی کامپیوتر شما آدرس IP وب سرور را می‌داند، پیامی به آن سرور ارسال می‌کند. اما کامپیوترها از زبان معمولی استفاده نمی‌کنند—آن‌ها از مجموعه قوانین خاصی به نام HTTP پیروی می‌کنند، که مخفف HyperText Transfer Protocol است. نگران نام فنی نباشید؛ HTTP در واقع مجموعه قوانینی است که کامپیوترها هنگام به اشتراک گذاشتن وب‌سایت‌ها با یکدیگر دنبال می‌کنند.

وقتی مرورگر شما یک درخواست HTTP به وب سرور می‌فرستد، در واقع می‌گوید: «سلام، من یک مرورگر وب هستم و می‌خواهم صفحه اصلی این وب‌سایت را ببینم.»

نحوه کار یک وب سرور

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

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

اگر در مورد این مطلب سوالی دارید در قسمت نظرات بپرسید

اگر وب سرور نتواند چیزی که می‌خواهید پیدا کند، یک پیام خطای HTTP ارسال می‌کند، مانند خطای معروف «404 Not Found» که احتمالاً قبلاً دیده‌اید.

شگفت‌انگیزترین قسمت؟ این فرایند معمولاً در کمتر از یک ثانیه اتفاق می‌افتد.

حالت‌های عملکرد ESP32

یکی از مفیدترین ویژگی‌های ESP32 توانایی آن در اتصال به یک شبکه Wi-Fi موجود و همچنین ایجاد شبکه خود است، به طوری که دیگر دستگاه‌ها می‌توانند مستقیماً به آن متصل شوند. این امکان به دلیل پشتیبانی ESP32 از سه حالت عملکرد وجود دارد: حالت Station (STA)، حالت Access Point (AP) و ترکیبی از هر دو که به آن حالت Dual گفته می‌شود.

حالت Station (STA)

تصور کنید یک گوشی هوشمند دارید. بیشتر اوقات، گوشی شما به شبکه Wi-Fi خانگی که توسط روتر فراهم شده است متصل می‌شود. در این وضعیت، گوشی شما مانند یک «ایستگاه» عمل می‌کند زیرا به یک شبکه موجود متصل است. این دقیقاً همان چیزی است که حالت STA یا Station برای ESP32 به معنی آن است.

حالت Station (STA)

زمانی که ESP32 شما در حالت STA قرار دارد، مانند هر دستگاه دیگری مانند لپ‌تاپ یا گوشی هوشمند عمل می‌کند که می‌خواهد به یک شبکه Wi-Fi موجود متصل شود. این دستگاه به دنبال شبکه Wi-Fi می‌گردد، با استفاده از نام شبکه (SSID) و رمز عبور به آن متصل می‌شود و سپس بخشی از آن شبکه می‌شود.

پس از اتصال، روتر یک آدرس IP به ESP32 اختصاص می‌دهد. این آدرس IP اهمیت زیادی دارد زیرا با آن، ESP32 شما می‌تواند یک وب سرور راه‌اندازی کند. این به این معناست که ESP32 می‌تواند صفحات وب را به همه دستگاه‌های متصل به همان شبکه Wi-Fi ارائه دهد. بنابراین می‌توانید پروژه ESP32 خود را با باز کردن مرورگر وب روی گوشی یا کامپیوتر کنترل کنید. علاوه بر این، اگر آن شبکه Wi-Fi به اینترنت دسترسی داشته باشد، ESP32 شما نیز می‌تواند اطلاعات را از اینترنت دریافت کند، مانند گرفتن داده‌های هواشناسی یا ارسال اطلاعات به یک سرویس ابری.

حالت Access Point (AP)

حال، سناریوی دیگری را با گوشی خود در نظر بگیرید. گاهی اوقات، ممکن است ویژگی «هات‌اسپات» گوشی خود را روشن کنید. وقتی این کار را انجام می‌دهید، گوشی شما یک شبکه Wi-Fi کوچک ایجاد می‌کند که دوستانتان می‌توانند به آن متصل شوند. گوشی شما مانند یک روتر کوچک عمل می‌کند. این مشابه کاری است که حالت AP یا Access Point برای ESP32 انجام می‌دهد.

حالت Access Point (AP)

زمانی که ESP32 در حالت AP قرار دارد، شبکه Wi-Fi خود را ایجاد می‌کند، یک SSID (نام شبکه)، رمز عبور و آدرس IP به آن اختصاص می‌دهد. سایر دستگاه‌ها مانند گوشی یا کامپیوتر می‌توانند این شبکه را جستجو کرده و با رمز عبور تعیین‌شده شما به آن متصل شوند. با آدرس IP که به خود اختصاص داده، ESP32 می‌تواند صفحات وب را مستقیماً به تمام دستگاه‌هایی که به شبکه تازه ایجاد شده متصل شده‌اند ارائه دهد.

حالت AP بسیار مفید است وقتی که شبکه Wi-Fi موجودی در دسترس ندارید، یا می‌خواهید یک شبکه خصوصی فقط برای پروژه خود ایجاد کنید. به عنوان مثال، اگر در گاراژ خود رباتی می‌سازید که در آنجا Wi-Fi وجود ندارد، می‌توانید ESP32 را در حالت AP قرار دهید و گوشی خود را مستقیماً به آن متصل کنید تا ربات را کنترل کنید.

حالت Dual

ویژگی که ESP32 را به‌ویژه انعطاف‌پذیر می‌کند، این است که می‌تواند همزمان در هر دو حالت عمل کند، که به آن حالت AP+STA یا حالت دوگانه گفته می‌شود. در این پیکربندی، ESP32 شما می‌تواند به عنوان یک ایستگاه به شبکه Wi-Fi موجود متصل شود و همزمان نقطه دسترسی خود را برای پیوستن سایر دستگاه‌ها ایجاد کند. این امکان، قابلیت‌های جالبی ایجاد می‌کند، مانند ساخت دستگاهی که می‌تواند پوشش Wi-Fi را گسترش دهد یا پلی بین شبکه‌های مختلف ایجاد کند.

مثال 1: وب سرور ESP32 Station (STA)

حال که اصول وب سرورها و نحوه عملکرد ESP32 در حالت‌های مختلف Wi-Fi را فهمیدیم، بیایید این دانش را در یک پروژه عملی و جذاب به کار ببریم.

در این پروژه اول، یک شمارنده بازدیدکننده ساده با ESP32 می‌سازیم. ایده این است که ESP32 یک صفحه وب میزبانی کند و هر بار که کسی آن صفحه را بازدید می‌کند، شمارنده یک واحد افزایش یابد. این روش سرگرم‌کننده‌ای است برای دیدن تعداد «بازدیدها» از صفحه وب ESP32 شما!

مثال 1: وب سرور ESP32 Station (STA)

برای انجام این کار، ESP32 به عنوان وب سرور در حالت Station (STA) عمل می‌کند، به این معنی که به شبکه Wi-Fi موجود شما متصل می‌شود. ESP32 شمارنده بازدیدکنندگان را به صورت داخلی نگه می‌دارد. وقتی مرورگر وب را روی گوشی یا کامپیوتر خود باز می‌کنید و یک آدرس مشخص وارد می‌کنید (مانند http://192.168.1.1/)، مرورگر شما یک درخواست به ESP32 ارسال می‌کند. وقتی ESP32 این درخواست را دریافت می‌کند، شمارنده بازدیدکننده یک واحد افزایش می‌یابد و سپس یک صفحه وب به‌روزشده به مرورگر شما ارسال می‌شود که مقدار جدید شمارنده را نشان می‌دهد. ساده و واضح است، نه؟ هر بار که صفحه را تازه می‌کنید یا شخص دیگری به آن مراجعه می‌کند، شمارنده افزایش می‌یابد!

کد نمایش بازدید کننده وب سرور ESP32

توضیح کد

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

اما قبل از اینکه آن را روی ESP32 خود آپلود کنید، مطمئن شوید دو خط را ویرایش کرده‌اید. نام شبکه Wi-Fi شما (SSID) و رمز عبور Wi-Fi شما. این اطلاعات به ESP32 شما می‌گوید به کدام شبکه متصل شود.

پس از انجام این تغییرات، کد را روی ESP32 خود آپلود کنید.

دسترسی به وب سرور در حالت STA

پس از آپلود کد، Serial Monitor را باز کرده و مطمئن شوید نرخ Baud روی 115200 تنظیم شده است. سپس دکمه EN (ریست) روی ESP32 خود را فشار دهید. اگر همه چیز درست باشد، ESP32 به شبکه Wi-Fi شما متصل می‌شود و پیامی با متن “WiFi connected..!” همراه با آدرس IP که روتر به ESP32 اختصاص داده است، در Serial Monitor نمایش داده می‌شود. همچنین “HTTP server started” نیز چاپ خواهد شد.

دسترسی به وب سرور در حالت STA

اکنون یک دستگاه مانند گوشی یا لپ‌تاپ که به همان شبکه Wi-Fi متصل است را بردارید. مرورگری مانند Chrome یا Firefox را باز کرده و آدرس IP نمایش داده شده در Serial Monitor را وارد کنید. سپس Enter را بزنید و باید یک صفحه وب ظاهر شود!

مثال 1: وب سرور ESP32 Station (STA)

این صفحه شمارنده بازدیدکننده فعلی را نمایش می‌دهد. صفحه را چند بار رفرش کنید، خواهید دید که شمارنده هر بار افزایش می‌یابد.

مثال 2: راه‌اندازی وب سرور ESP32 Access Point (AP)

در پروژه دوم، می‌خواهیم همان وب سرور شمارنده بازدیدکننده را روی ESP32 بسازیم، اما این بار در حالت Access Point (AP).

تصور کنید در مکانی بدون Wi-Fi روی پروژه ESP32 خود کار می‌کنید—مثل گاراژ یا فضای باز. در اینجا حالت AP بسیار کاربردی است. به جای اتصال به شبکه Wi-Fi موجود، ESP32 شبکه Wi-Fi خود را ایجاد می‌کند. سپس گوشی، لپ‌تاپ یا تبلت شما می‌تواند مستقیماً به آن متصل شود. درست مثل این است که ESP32 شما به یک هات‌اسپات Wi-Fi تبدیل می‌شود.

قبل از آپلود کد روی ESP32، ممکن است بخواهید دو مورد را تغییر دهید: یک نام شبکه (SSID) و یک رمز عبور برای شبکه Wi-Fi که ESP32 ایجاد می‌کند انتخاب کنید. از این اطلاعات برای اتصال سایر دستگاه‌ها به شبکه ESP32 استفاده خواهید کرد.

کد مثال دوم نیز در فایل دانلودی انتهای صفحه قرار داده شده است.

پس از تنظیم این مقادیر، کد را روی ESP32 آپلود کنید.

دسترسی به وب سرور در حالت AP

پس از آپلود کد، Serial Monitor را باز کرده و نرخ Baud را روی 115200 تنظیم کنید. سپس دکمه EN روی ESP32 را فشار دهید. اگر همه چیز درست باشد، پیغام “HTTP server started” در Serial Monitor ظاهر می‌شود. این یعنی ESP32 شما با موفقیت شبکه Wi-Fi خود را ایجاد کرده و آماده ارائه صفحه وب است.

دسترسی به وب سرور در حالت AP

اکنون یک دستگاه مانند گوشی یا لپ‌تاپ که می‌تواند به شبکه Wi-Fi متصل شود را بردارید. به دنبال یک شبکه Wi-Fi جدید با نام “ESP32” (یا هر SSID که در کد انتخاب کردید) بگردید. به این شبکه با رمز عبوری که در کد تعیین کرده‌اید متصل شوید (در این مثال پیش‌فرض “12345678” است).

اتصال به وای فای برد ESP32

پس از اتصال دستگاه به شبکه Wi-Fi ESP32، یک مرورگر باز کنید و آدرس 192.168.1.1 را در نوار آدرس وارد کنید. این همان آدرس IP است که هنگام پیکربندی ESP32 در حالت AP به صورت دستی تعیین کرده‌ایم. اگر آدرس IP را در کد تغییر دادید، مطمئن شوید آن آدرس جدید را وارد می‌کنید. Enter را بزنید و صفحه وب شمارنده بازدیدکننده شما مانند مثال قبلی ظاهر می‌شود.

تنظیم ESP32 در حالت Access Point

مثال 3: نمایش داده‌ سنسور در وب سرور ESP32

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

در این پروژه، ESP32 را مانند مثال اول به عنوان وب سرور در حالت Station (STA) راه‌اندازی می‌کنیم. هر بار که کسی به صفحه اصلی وب سرور شما مراجعه می‌کند، ESP32 دمای فعلی را از سنسور DS18B20 می‌خواند و یک صفحه وب کامل ارسال می‌کند که دما را هم به درجه سانتی‌گراد و هم فارنهایت نشان می‌دهد.

مثال 3: نمایش داده‌ سنسور در وب سرور ESP32

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

دیاگرام پروژه وب سرور نمایش دما ESP32

اگر این سنسور DS18B20 دقیقاً در اختیار شما نیست، نگران نباشید؛ همان ایده را می‌توان برای نمایش داده از تقریباً هر سنسور دیگری نیز استفاده کرد.

اتصالات مدار

وصل کردن سنسور DS18B20 به ESP32 ساده است.

پین‌های DS18B20

ابتدا پین VDD سنسور را به پین 3.3 ولت ESP32 متصل کنید. سپس پین GND سنسور را به هر پین GND روی ESP32 وصل کنید.

برای اتصال داده، پین DQ سنسور را به GPIO 15 روی ESP32 وصل کنید. برای اطمینان از پایداری سیگنال داده، نیاز است یک مقاومت Pull-up با مقدار 4.7 کیلو اهم بین پین DQ و پین 3.3 ولت قرار دهید.

اتصالات مدار برد ESP32 و سنسور ِDS18B20

جدول مرجع اتصالات پین‌ها:

DS18B20 ESP32 توضیحات
VDD 3.3V
GND GND
DQ D15 با مقاومت 4.7kΩ Pull-up

نصب کتابخانه‌ها

پروتکل ارتباطی 1-Wire که توسط سنسور DS18B20 استفاده می‌شود کمی پیچیده است و نوشتن همه کدها از ابتدا زمان زیادی می‌برد. خوشبختانه، کتابخانه‌ای به نام DallasTemperature این کار را بسیار ساده می‌کند.

برای نصب این کتابخانه:

  1. ابتدا برنامه Arduino IDE را باز کنید. سپس روی آیکون Library Manager در نوار کناری کلیک کنید.
  2. در جعبه جستجو، عبارت “ds18b20” را تایپ کنید.
  3. کتابخانه DallasTemperature نوشته Miles Burton را پیدا کنید.
  4. روی دکمه Install کلیک کنید تا به Arduino IDE شما اضافه شود.

کتابخانه DallasTemperature برای کار صحیح نیاز دارد با کتابخانه دیگری به نام OneWire جفت شود.

برای نصب کتابخانه OneWire:

  1. دوباره Library Manager را باز کنید.
  2. در جعبه جستجو عبارت “onewire” را تایپ کنید.
  3. کتابخانه OneWire را پیدا کرده و روی Install کلیک کنید.

کد کامل مثال سوم هم در فایل دانلودی انتهای صفحه قرار داده شده است.

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

پس از آپلود اسکچ روی ESP32، Serial Monitor را باز کرده و نرخ Baud را روی 115200 تنظیم کنید. سپس دکمه EN (ریست) روی ESP32 را فشار دهید. اگر همه چیز درست باشد، ESP32 به شبکه Wi-Fi شما متصل شده و آدرس IP دریافت شده از روتر را در Serial Monitor نمایش می‌دهد.

دسترسی به وب سرور در حالت STA

اکنون یک دستگاه مانند گوشی، تبلت یا کامپیوتر یا هر چیزی که به همان شبکه Wi-Fi متصل است بردارید و یک مرورگر وب باز کنید. در نوار آدرس، آدرس IP که در Serial Monitor نمایش داده شد را وارد کنید. باید یک صفحه وب مرتب و زیبا ببینید که دمای فعلی سنسور DS18B20 را نمایش می‌دهد.

مثال 3: نمایش داده‌ سنسور در وب سرور ESP32

HTTP Polling

در مثال قبلی یاد گرفتیم که چگونه دمای سنسور را روی صفحه وب نمایش دهیم. اما برای دریافت مقادیر به‌روز، باید مرورگر را به‌صورت دستی تازه می‌کردید. این روش برای بررسی گاه‌به‌گاه دما مناسب است، اما اگر بخواهید دما به‌طور خودکار و مرتب به‌روز شود، فشار دادن مداوم دکمه Refresh عملی نیست. اینجاست که HTTP Polling وارد می‌شود.

HTTP Polling روشی است که در آن مرورگر به‌طور خودکار درخواست‌های HTTP مکرر را با فواصل زمانی مشخص به وب سرور ارسال می‌کند. در این پروژه، مرورگر بدون نیاز به تازه‌سازی صفحه، مدام از ESP32 آخرین دمای اندازه‌گیری شده را می‌پرسد.

HTTP Polling

دو روش برای پیاده‌سازی HTTP Polling وجود دارد:

تازه‌سازی خودکار کل صفحه

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

<meta http-equiv="refresh" content="1">

این تگ را در بخش صفحه وب خود قرار دهید.

تازه‌سازی خودکار کل صفحه

بارگذاری دینامیک داده‌های سنسور با AJAX

در حالی که تازه‌سازی کل صفحه کار می‌کند، روش بهینه‌ای نیست. به‌ویژه وقتی فقط یک قسمت کوچک مثل دما تغییر می‌کند. زیرا هر بار که صفحه تازه می‌شود، مرورگر تمام منابع را دوباره درخواست می‌کند: HTML، CSS، هر کد JavaScript و حتی تصاویر. این باعث ایجاد بار اضافی روی سرور شده و سرعت بارگذاری صفحه را کاهش می‌دهد.

روش هوشمندتر استفاده از AJAX است. AJAX (Asynchronous JavaScript and XML) اجازه می‌دهد مرورگر تنها اطلاعات مورد نیاز خود مثل مقدار دما را درخواست کند بدون اینکه کل صفحه دوباره بارگذاری شود. بقیه صفحه ثابت می‌ماند و فقط بخشی که دما را نمایش می‌دهد به‌روز می‌شود. این روش سریع‌تر است، بار سرور را کاهش می‌دهد و تجربه کاربری روان‌تری ارائه می‌کند.

کد AJAX مورد استفاده ما:

<script>
setInterval(loadDoc, 1000);
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("temperature-container").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/", true);
  xhttp.send();
}
</script>

این اسکریپت را درست قبل از تگ <head> بسته قرار دهید.

بارگذاری دینامیک داده‌های سنسور با AJAX

کد AJAX هر ثانیه به سرور ESP32 شما درخواست می‌فرستد تا مقدار فعلی دما را دریافت کند. وقتی سرور داده‌ها را ارسال می‌کند، کد آن را در مخصوصی با شناسه temperature-container در صفحه وب شما قرار می‌دهد. این عملیات به‌طور پیوسته در پس‌زمینه انجام می‌شود و بدون تازه‌سازی کل صفحه، نمایش دما همیشه به‌روز می‌ماند.

مثال 4: کنترل تجهیزات فیزیکی با وب سرور

بیایید به هیجان‌انگیزترین مثال برسیم! این بار فقط نمایش اطلاعات نیست؛ ما می‌خواهیم از ESP32 برای کنترل مستقیم وسایل فیزیکی از طریق یک صفحه وب استفاده کنیم.

هدف اصلی این پروژه این است که ESP32 بتواند دو LED را از طریق Wi-Fi کنترل کند. ابتدا ESP32 را مانند مثال‌های قبل به‌عنوان وب سرور در حالت Station (STA) راه‌اندازی می‌کنیم. این سرور یک صفحه وب ارائه می‌دهد که می‌توانید روی گوشی یا کامپیوتر خود باز کنید. در این صفحه وب، وضعیت فعلی LEDها (روشن یا خاموش) نمایش داده می‌شود و مهم‌تر از همه، دکمه‌هایی برای تغییر وضعیت آن‌ها وجود دارد! وقتی روی یک دکمه کلیک می‌کنید، ESP32 بر اساس دستور شما LEDها را روشن یا خاموش می‌کند و سپس صفحه جدیدی را با وضعیت به‌روز شده ارسال می‌کند.

مثال 4: کنترل تجهیزات فیزیکی با وب سرور

ایده استفاده از وب سرور ESP32 برای کنترل وسایل

ممکن است بپرسید: «یک وب سرور که فقط صفحات وب ارائه می‌دهد، چگونه می‌تواند وسایل فیزیکی مثل LED را کنترل کند؟»

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

نحوه کار به این شکل است: وقتی URL را در مرورگر وارد می‌کنید، مرورگر یک پیام به نام درخواست HTTP به وب سرور می‌فرستد. سپس وب سرور متوجه می‌شود این درخواست چه معنایی دارد و بر اساس آن پاسخ می‌دهد.

برای مثال، فرض کنید آدرسی مانند http://192.168.1.1/led1on را وارد مرورگر می‌کنید و Enter می‌زنید. مرورگر یک درخواست HTTP به ESP32 ارسال می‌کند. وقتی ESP32 این درخواست را دریافت می‌کند، با توجه به قسمت /led1on در URL، متوجه می‌شود که باید LED اول را روشن کند. سپس LED روشن شده و یک صفحه وب جدید با وضعیت به‌روز شده ارسال می‌شود. بسیار ساده است؛ انگار با یک کد مخفی در URL به ESP32 می‌گویید چه کاری انجام دهد.

کنترل رله با وب سرور ESP32 این روش تنها برای LED نیست، می‌توانید با همان ایده موتور، رله، سنسور یا حتی لوازم هوشمند خانه را از طریق یک رابط وب ساده کنترل کنید.

اتصال LEDها به ESP32

برای شروع پروژه، ابتدا باید دو LED را به ESP32 متصل کنیم.

ESP32 را با دقت روی یک برد بورد قرار دهید، به‌طوری که هر طرف ESP32 روی نیمه متفاوت برد بورد قرار گیرد.

سپس دو LED بردارید و پایه‌های بلند آن‌ها (آند) را به GPIO 4 و GPIO 5 ESP32 متصل کنید. پایه‌های کوتاه (کاتد) را به یکی از پین‌های GND ESP32 وصل کنید.

بسیار مهم است که یک مقاومت 220 اهمی به صورت سری با هر LED قرار دهید. این مقاومت‌ها جریان عبوری از LEDها را محدود کرده و از سوختن آن‌ها جلوگیری می‌کنند.

نمودار زیر نحوه اتصال همه اجزا را نشان می‌دهد:

اتصال LEDها به ESP32

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

پس از آپلود اسکچ، Serial Monitor را باز کنید و مطمئن شوید نرخ Baud روی 115200 تنظیم شده است. سپس دکمه EN (ریست) روی ESP32 را فشار دهید. اگر همه چیز درست باشد، ESP32 به شبکه Wi-Fi شما متصل شده و پیامی با عنوان «WiFi connected..!»، به همراه آدرس IP دریافت شده از روتر، در Serial Monitor نمایش داده می‌شود. همچنین پیام «HTTP server started» نیز نمایش داده خواهد شد.

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

اکنون یک دستگاه مانند گوشی یا لپ‌تاپ که به همان شبکه Wi-Fi متصل است بردارید. یک مرورگر وب باز کنید (مثل Chrome یا Firefox) و آدرس IP که در Serial Monitor نمایش داده شد را وارد کنید. باید یک صفحه وب ظاهر شود که وضعیت فعلی هر دو LED را نشان می‌دهد و دکمه‌هایی برای کنترل آن‌ها دارد.

کنترل ال ای دی ها موبایل ESP32

در حالی که URL را زیر نظر دارید، روی دکمه LED1 کلیک کنید. به محض کلیک، مرورگر شما یک درخواست به ESP32 با آدرس خاص /led1on می‌فرستد. ESP32 این درخواست را می‌خواند، LED1 را روشن می‌کند و سپس یک صفحه وب جدید ارسال می‌کند که نشان می‌دهد LED1 روشن است. هم‌زمان، Serial Monitor پیام «LED1 Status: ON» را نمایش می‌دهد.

نحوه کنترل رله با وب سرور ESP32

همین کار را برای LED2 نیز امتحان کنید و مشاهده کنید که چگونه پاسخ می‌دهد. خواهید دید که می‌توانید هر دو LED را به‌طور مستقیم و در زمان واقعی از طریق مرورگر کنترل کنید.

موارد موجود در فایل : سورس کامل

5 (3 نفر)

برای دریافت مطالب جدید کانال تلگرام یا پیج اینستاگرام ما را دنبال کنید.

محمد رحیمی

محمد رحیمی هستم. سعی میکنم در آیرنکس مطالب مفید قرار بدهم. سوالات مربوط به این مطلب را در قسمت نظرات همین مطلب اعلام کنید. سعی میکنم در اسرع وقت به نظرات شما پاسخ بدهم.

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *