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	هنگامی که یک خطا رخ می‌دهد

صفحهٔ بعد»

«صفحهٔ قبل