100% کامل شده تا

SSE بوسیله API در اچ‌تی‌ام‌ال (HTML SSE API)

از موتو کد، دانشنامهٔ برنامه‌نویسی


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


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

یک رویداد server-sent هنگامی است که صفحه وب به‌طور خودکار از یک سرور بروزرسانی دریافت می‌کند.[۱]

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

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



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

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

API Chrome Internet Explorer / Edge Firefox Safari Opera
SSE ۶٫۰ پشتیبانی نمی‌شود ۶٫۰ ۵٫۰ ۱۱٫۵


دریافت اخطارهای رویداد Server-Sent

شیء EventSource برای دریافت اخطارهای رویداد server-sent استفاده می‌شود:

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

مثال
<!DOCTYPE html>
<html>
<body>

<h1>Getting server updates</h1>
<div id="result"></div>

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

</body>
</html>

Responsive demo.svg


توضیح مثال:

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


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

در مثال بالا، چند خط کد اضافی برای بررسی پشتیبانی مرورگر از رویدادهای 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)

<?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();
?>


کد به زبان ای‌اس‌پی‌ (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" تنظیم می‌کند
  • مشخص می‌کند که صفحه نباید cache شود
  • داده‌های ارسالی را در خروجی قرار می‌دهد (همیشه با " :data" شروع کنید)
  • برگرداندن داده‌های خروجی به صفحه وب


شیء EventSource

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

رویداد تعریف
onopen زمانی که یک اتصال به سرور باز می‌شود
onmessage هنگامی که یک پیام دریافت می‌شود
onerror هنگامی که یک خطا رخ می‌دهد

منابع آموزشی




به‌روزرسانی شده: ۲۰ روز پیش