رویدادهای ارسالی توسط سرور

HTML5 رویدادهای ارسال شده توسط سرور با مثال‌هایی توضیح می‌دهد. رویدادهای ارسال شده توسط سرور (SSE) به یک صفحه وب امکان می‌دهد بدون نیاز به ارسال XMLHttpRequests ، جریان مداوم بروزرسانی را از سرور دریافت کند.

رویدادهای ارسالی توسط سرور چیست؟

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

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

با استفاده از رویدادهای ارسال شده HTML5 ، می توانید ارتباطی ایجاد کنید که طولانی‌تر باشد و به روزرسانی‌ها را در یک جریان ثابت دریافت کند. فیدهای خبری ، شبکه‌های اجتماعی ، ورزش و به روزرسانی‌های آب و هوایی همه نمونه های خوبی هستند که می‌توانند از استفاده از رویدادهای ارسال شده توسط سرور HTML5 بهره‌مند شوند.

برای دیدن آموزش کامل و رایگان HTML به شما پیشنهاد میکنیم که مقالات این دسته از سایت دویکس را مطالعه کنید.

دریافت و ارسال SSE

برای دریافت به‌روزرسانی HTML5 ، باید از شی EventSource استفاده کنید:

<script>
 if(typeof(EventSource) !== "undefined") {
     var source = new EventSource("sse_demo.php");
     source.onmessage = function(event) {
         document.getElementById("myresult").innerHTML += event.data + "<br>";
     };
 } else {
     document.getElementById("myresult").innerHTML = "Sorry, server-sent events are not supported in your browser...";
 }
</script>

توجه: در پرانتز ، یک فایل PHP به نام sse_demo.php تعریف شده است. فایلی که به زبان برنامه نویسی پویا نوشته شده باشد برای ارسال به روزرسانی HTML5 به مرورگر ضروری است.

EventSource یک اتصال طولانی مدت را باز می‌کند که فقط در صورت تماس با EventSource.close () به پایان می‌رسد. این اتصال به مرورگر اجازه می‌دهد تا رویدادهای ارسالی توسط سرور HTML5 را از نوع رسانه متنی / رویدادی ارسال کند. با این حال ، این فقط یک طرفه است: مرورگر نمی‌تواند هیچ داده‌ای را به سرور ارسال کند.

اگر تمایل دارید که با CSS بیشتر آشنا شوید و آموزش‌های رایگان این دسته را ببینید می‌توانید با سایت دویکس همراه باشید و آموزشهای رایگان آن را ببینید.

نحوه ی عملکرد SSE

1. ایجاد اتصال: مرورگر با استفاده از شیء EventSource به یک URL مشخص شده در سرور متصل می‌شود.
2. ارسال رویداد: سرور به‌طور مداوم رویدادهای سفارشی را به صورت پیام‌های متنی به مرورگر ارسال می‌کند.
3. دریافت رویداد: مرورگر رویدادهای دریافتی را پردازش می‌کند و می‌تواند برای به‌روزرسانی رابط کاربری یا انجام اقدامات دیگر از آن‌ها استفاده کند.

مزایای استفاده از SSE

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

موارد استفاده از SSE

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

اینها همه رویدادهای مربوط به شی EventSource هستند:

سمت سرور: مثال کد PHP

در صورت لزوم ، یک سرور می‌تواند به روزرسانی های HTML5 را از طریق ASP یا PHP ارسال کند. اگر حداقل دانش پایه‌ای در این زبان ها داشته باشید، نحو پیچیده‌ای نیست:

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

توجه: فراموش نکنید که سربرگ Content-Type را روی متن / event-stream تنظیم کنید.

نکات مهم رویدادهای ارسالی توسط سرور:

رویدادهای ارسالی سرور HTML5 کمی شبیه به WebSockets هستند. با این حال ، استفاده از WebSockets پیچیده‌تر است و به یک پروتکل منحصر به فرد نیاز دارد ، در حالی که SEE به HTTP متکی است.

اطمینان حاصل کنید که از کدگذاری نویسه UTF-8 برای جریان داده‌های متنی استفاده کنید.

اعلان‌های HTML5 برای به روزرسانی‌ها دقیقاً مانند هر درخواست HTTP هدایت می‌شوند.