SSE در HTML
Main Page Tutorial | |
---|---|
![]() | |
موارد آموزشی | |
فرمهای HTML | |
گرافیک در HTML | |
رسانه در HTML | |
APIها در HTML | |
۱ | موقعیت جغرافیایی |
۲ | کشیدن/رهاکردن |
۳ | ذخیرهسازی وب |
۴ | Workerهای وب |
۵ | SSE |
مثالها | |
مرجع HTML |
رویدادهای Server-Sent به یک صفحه وب امکان دریافت بروزرسانی از یک سرور را میدهند.[۱]
رویدادهای Server-Sent - پیام رسانی یک طرفه
یک رویداد server-sent هنگامی است که صفحه وب بطور خودکار از یک سرور بروزرسانی دریافت میکند.
این حالت قبلاً هم امکانپذیر بوده اما صفحه وب باید سؤال میکرده آیا بروزرسانی موجود است یا نه. با رویدادهای server-sent، بروزرسانیها بطور خودکار دریافت میشوند.
مثالها: بروزرسانیهای Facebook/Twitter، بروز رسانی قیمت سهام، اخبار، نتایج ورزشی و غیره.
پشتیبانی مرورگر
اعداد در جدول زیر نشان دهنده اولین نسخه مرورگرها هستند که از رویدادهای server-sent بطور کامل پشتیبانی میکنند.
API | ![]() |
![]() |
![]() |
![]() |
![]() |
SSE | ۶٫۰ | پشتیبانی نمیشود | ۶٫۰ | ۵٫۰ | ۱۱٫۵ |
دریافت اخطارهای رویداد Server-Sent
شیء EventSource برای دریافت اخطارهای رویداد server-sent استفاده میشود:
مثال
1 var source = new EventSource("demo_sse.php");
2 source.onmessage = function(event) {
3 document.getElementById("result").innerHTML += event.data + "<br>";
4 };
توضیح مثال:
- یک شیء جدید EventSource ایجاد میکند و URL صفحهٔ ارسال کننده بروزرسانیها را مشخص میکند (در این مثال صفحه "demo_sse.php")
- هر بار که یک بروزرسانی دریافت میشود، رویداد onmessage اتفاق میافتد
- هنگامی که رویداد onmessage رخ میدهد، دادههای دریافت شده را در عنصری با id="result" قرار میدهد
بررسی پشتیبانی رویدادهای Server-Sent
در مثال tryit بالا، چند خط کد اضافی برای بررسی پشتیبانی مرورگر از رویدادهای server-sent وجود دارد:
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code.....
} else {
// Sorry! No server-sent events support..
}
مثال کد سمت سرور (به انگلیسی: Server-Side)
برای اینکه مثال بالا اجرا شود، به یک سرور نیاز دارید که توانایی ارسال دادههای بروزرسانی را داشته باشد (مانند PHP یا ASP)
نحو (syntax) جریان رویداد سمت سرور ساده است. عنوان "Content-Type" باید برابر با "text/event-stream" تنظیم شود. حال میتوانید ارسال جریانهای رویداد را آغاز کنید.
کد به زبان (demo_sse.php)
1 <?php
2 header('Content-Type: text/event-stream');
3 header('Cache-Control: no-cache');
4
5 $time = date('r');
6 echo "data: The server time is: {$time}\n\n";
7 flush();
8 ?>
کد به زبان ASP (demo_sse.php):
1 <%
2 Response.ContentType = "text/event-stream"
3 Response.Expires = -1
4 Response.Write("data: The server time is: " & now())
5 Response.Flush()
6 %>
توضیح کد:
- عنوان "Content-Type" برابر با "text/event-stream" تنظیم میکند
- مشخص میکند که صفحه نباید cache شود
- دادههای ارسالی را در خروجی قرار میدهد (همیشه با “data” شروع کنید)
- برگرداندن دادههای خروجی به صفحه وب
شیء EventSource
در مثالهای بالا از رویداد onmessage برای گرفتن پیامها استفاده کردیم. اما رویدادهای دیگری نیز موجود هستند:
رویداد | تعریف |
---|---|
onopen | زمانی که یک اتصال به سرور باز میشود |
onmessage | هنگامی که یک پیام دریافت میشود |
onerror | هنگامی که یک خطا رخ میدهد |
منابع آموزشی