اگر علاقه مند به همکاری در نت پارادیس جهت نویسندگی، ویراستاری و ترجمه مطالب هستی پس روی دکمه مقابل کلیک کن

علاقه به همکاری دارم

طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

آموزش SSE در HTML5


آموزش HTML - مقدمه

در جلسه قبلی آموزش HTML با Web Worker در html5 آشنا شدیم. در این بخش به SSE در html5 خواهیم پرداخت.

رویدادهای فرستاده شده از سمت سرور (Server-Sent Events) در HTML5 به صفحه بصورت اتوماتیک وب امکان گرفتن اطلاعات، از وب سرور را میدهد.

رویدادهای فرستاده شده از سمت سرور چیست

SSE در HTML5 روشی جدید برای صفحه های وب است تا با وب سرور ارتباط برقرار کند. این امر با شیء XMLHttpRequest امکان پذیر می باشد که به کد جاوا اسکریپت تان امکان ایجاد یک درخواست برای وب سرور را میدهد.

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

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

مثال هایی دیگر برای این رویدادهای دریافتی عبارتند از :

  • تغییر عناوین خبرها
  • نتایج ورزشی
  • تغییر در شاخص ها ونمودارهای سایت های اقتصادی و قیمت ارز
  • نوشتن چت آنلاین (قسمت پشتیبانی سایتها) که نیاز به ارسال و دریافت خیلی سریع نیست.
  • دریافت تعداد یوزرهای آنلاین و یا آپدیت تعداد بازدید مطالب.
  • نمایش کامنتهای جدید

می توانید چنین کارهایی را با ویژگی رویدادهای فرستاده شده از سمت سرور در HTML5 انجام بدید. این کار به صفحه های وب امکان نگه داشتنِ ارتباط با وب سرور را میدهند،

بنابراین وب سرور می تواند در هر زمانی بصورت خودکار پاسخی جدید ارسال کند و نیازی به برقراری دوباره ی ارتباط و اجرای دوباره ی سرور اسکریپت بصورت دوباره و دوباره، نیست.

نکته: تمام مرورگرهای مطرح و مدرن مثال Firefox، Chrome، Opera وSafari به جزInternet Explorer  از ویژگی ِ رویدادهای فرستاده شده از سمت سرور در HTML5 پشتیبانی می کنند.

مزیت رویدادهای فرستاده شده از سمت سرور

  • اجرا و پیاده سازیش در حد نوشتن چند خط ساده جاوااسکریپته.
  • نیاز به هیچ فایل و یا پلاگین اضافه ای نداره.
  • یادگیریش خیلی خیلی راحته و نیاز به خوندن صدها خط داکیومنت نداره.
  • چون native ساپورت میشه بصورت کاملا بهینه نوشته شده و با سرور ارتباط برقرار میشه.
  • جایگزین عالی برای Ajax نوشتن در جی کوئری و یا خود جاوااسکریپت (البته ساز و کار همونه ولی بهتر و سریعتر).
حتما بخوانید  آموزش HTML - تگ HEAD در HTML

فرستادن پیام با سرور اسکریپت

بیایید یک فایل PHP به نام ‘server_time.php’ ایجاد کنیم و اسکریپتِ زیر را در آن وارد کنیم.این کار به سادگی، زمان جاریِ ساعت داخلیِ وب سرور را در بازه های زمانی مشخص، گزارش میدهد.

بعداً این زمان را دریافت خواهیم کرد و بر اساس آن صفحه ی وب را به روز رسانی خواهیم کرد.

دو خط اولِ PHP script دو عنوانِ مهم را تنظیم می کند.

  • خط اول، نوع MIME را بصورت text/event-stream تنظیم می کنه، که برای استاندارد رویداد سمت سرور ضروری است.
  • خط دوم به وب سرور میگه ذخیره سازی در حافظه ی نهان را غیرفعال کنه، در غیر این صورت، ممکنه خروجیِ اسکریپت تان در حافظه ی نهان ذخیره بشه.

هر پیامی که از طریق رویدادهای فرستاده شده از سمت سرور فرستاده میشه باید با data: شروع بشه و با متن اصلیِ پیام و کاراکتر خط جدید "n\n\" دنبال بشه.

در آخر از تابع  flush() استفاده میکنیم تا اطمینان حاصل کنیم که داده ها به روشی صحیح ارسال شده باشن، بجای این که بافر بشن تا زمانی که کدِ PHP کامل بشه.

پردازش پیام در صفحه ی وب

شیء EventSource برای دریافت پیام های رویداد فرستاده شده از سمت سرور استفاده میشه. بیاین یه سند HTML به نام ‘demo_sse.html‘ ایجاد کنیم و آن را در پوشه ی پروژه، جایی که فایل ‘server_time.php‘ قرار داره، بذاریم. این سند HTML به سادگی زمان جاری گزارش شده توسط وب سرور را دریافت کرده و به کاربر نمایش میده.

حتما بخوانید  آموزش HTML - لینک ها در HTML

تفاوت SSE با Websocket

وبسوکت (WebSocket) یک ارتباط دوطرفه کلاینت سرور است، ولی SSE تقریبا یکطرفست و شما کنترل زیادی در نحوه برقراری ارتباط با سرور ندارید. خود SSE با سرور سینک میشه و اگه اتفاقی (Event) که مشخص شده افتاد بهتون خبر میده.

تفاوت SSE با AJAX

برخلاف ajax که نیاز هست مرتب و توی بازه های زمانی مشخص سمت سرور رو چک کرد، SSE بصورت اتوماتیک و از طریق کانکشنهای HTTP مرورگر رو بروزرسانی میکند.

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

 

امیدوارم در این بخش آموزش HTML , از SSE در html5 نهایت استفاده را برده باشید.

در بخش بعدی با موقعیت جغرافیایی در HTML آشنا می شویم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

اگر مفید بود, لطفا به اشترک بگذارید تا دوستان دیگر نیز بهره ببرند

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

دیدگاه کاربران

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

جدیدترین آموزش های آنلاین



دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

سورس فروشگاهی دیجی کالا

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما

logo-samandehi

دانلود کتاب

عضویت رایگان خبرنامه