رویدادهای ارسالی سرور HTML

رویدادهای ارسالی سرور اجازه می‌دهد که صفحه به‌روزرسانی‌ها را از سرور دریافت کند.

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

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

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

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

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

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

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

دریافت اعلان‌های ارسالی سرور

شیء 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 رخ می‌دهد، داده‌های دریافت‌شده را به عنصر با شناسه "result" اضافه می‌کنیم

بررسی پشتیبانی رویدادهای ارسالی سرور

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

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

مثال کد سرور

برای اجرای مثال بالا، شما باید بتوانید سرور به‌روزرسانی‌های داده را ارسال کنید (مثلاً 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 در صورت بروز خطا