رویدادهای Server-Sent HTML

رویدادهای Server-Sent به webpage اجازه می‌دهند که به‌روزرسانی‌ها را از سرور دریافت کنند.

رویدادهای Server-Sent - پیام‌رسانی یک‌طرفه

رویدادهای Server-Sent به معنای این است که صفحه به صورت خودکار از سرور به‌روزرسانی‌ها را دریافت می‌کند.

این ممکن است قبلاً نیز انجام شود، اما به این شرط که صفحه باید بپرسد که آیا به‌روزرسانی‌های موجودی هستند یا خیر. با رویدادهای Server-Sent، به‌روزرسانی‌ها می‌توانند به صورت خودکار به دست آیند.

مثلاً: به‌روزرسانی‌های Facebook/Twitter، به‌روزرسانی‌های قیمت سهام، پست‌های جدید، نتایج مسابقات و غیره.

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده مرورگر اولی که از رویدادهای server-sent پشتیبانی می‌کند، هستند.

API
SSE 6.0 پشتیبانی نمی‌شود 6.0 5.0 11.5

دریافت اعلان‌های Server-Sent

شیء EventSource برای دریافت اعلان‌های ارسال شده از سرور استفاده می‌شود:

مثال

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
};

خودتان امتحان کنید

توضیح مثال:

  • یک شیء جدید EventSource ایجاد می‌کنیم و URL صفحه‌ای که به‌روزرسانی‌ها را ارسال می‌کند (در این مثال "demo_sse.php") را تعیین می‌کنیم
  • هر بار که یک به‌روزرسانی دریافت می‌شود، رویداد onmessage رخ می‌دهد
  • وقتی رویداد onmessage رخ می‌دهد، داده‌های دریافت شده را به عنصر با id "result" اضافه می‌کنیم

بررسی پشتیبانی رویدادهای Server-Sent

در مثال TIY، ما کد اضافی‌ای برای بررسی پشتیبانی مرورگر از رویدادهای ارسال شده از سرور نوشته‌ایم:

اگر typeof(EventSource) !== "undefined" {
    // بله! رویدادهای ارسال شده از سرور پشتیبانی می‌شود!
    // برخی از کدها.....
}
    // متاسفم! رویدادهای ارسال شده از سرور پشتیبانی نمی‌شود!
}

مثال کد سرور

برای اجرای مثال بالا، شما باید قادر به ارسال به‌روزرسانی‌های سرور (مثلاً PHP یا ASP) باشید.

نحوه استفاده از رویدادهای سرور سمت سرور بسیار ساده است. سربرگ "Content-Type" را به "text/event-stream" تنظیم کنید. حالا می‌توانید شروع به ارسال رویدادهای جریان داده کنید.

کد در PHP (demo_sse.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();
?>

کد در ASP (VB) (demo_sse.asp):

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

توضیح کد:

  • سربرگ "Content-Type" را به "text/event-stream" تنظیم کنید
  • صفحه را برای ذخیره‌سازی در حافظه لغزنده قرار ندهید
  • تاریخ ارسال شده باید با "data: " شروع شود
  • داده‌های تازه به صفحه وب بارگذاری می‌شود

موضوع EventSource

در مثال بالا، ما از رویداد onmessage برای دریافت پیام استفاده کردیم. اما می‌توان از رویدادهای دیگر نیز استفاده کرد:

رویداد توضیح
onopen در صورت باز شدن اتصال به سرور
onmessage در صورت دریافت پیام
onerror در صورت بروز خطا