HTML Server-Sent 事件

Server-Sent 事件允许网页从服务器获得更新。

Server-Sent 事件 - One Way Messaging

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 + "
";
};

亲自试一试

例子解释：

  • 创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）
  • 每当接收到一次更新，就会发生 onmessage 事件
  • 当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中

检测 Server-Sent 事件支持

在 TIY 实例中，我们编写了一段额外的代码来检测服务器发送事件的浏览器支持：

if(typeof(EventSource) !== "undefined") {
    // ہا! سرور سمت واقعی سرکریتاروپر حاصل کیاجاتا!
    // کچھ کوڈ.....
}
    // معافی! سرور سمت واقعی سرکریتاروپر نہیں حاصل کیاجاتا!
}

سرور سمت کوڈ مثال

کہ وہ مثال چل سکے، آپ کو سرور کو اپدیت کا موصول کئے جانے والا موصول کرنا چاہئیے (مثلاً پی ایچ پی یا اے ایس پی)。

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

کد PHP در 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 در ASP (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 در صورت بروز خطا