رویدادهای ارسالی از سرور (Server-Sent Events-SSE)
«رویدادهای ارسالی از سرور (SSE)» یعنی سرور خودش پیام بفرستد. صفحه هر بار درخواست نمی دهد. بنابراین بروزرسانی ها خودکار می رسند.
SSE چیست و چه کاربردی دارد؟
SSE پیام ها را یک طرفه ارسال می کند. یعنی از سرور به مرورگر. مثلا خبر فوری، نتایج مسابقه، یا قیمت لحظه ای.
دریافت پیام با EventSource
شی «EventSource» پیام ها را می گیرد. هر پیام به رویداد onmessage می آید.
<script>
const x = document.getElementById("result");
if (typeof(EventSource) !== "undefined") {
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
x.innerHTML += event.data + "<br>";
};
} else {
x.innerHTML = "Sorry, no support for server-sent events.";
}
<\/script>
بررسی پشتیبانی مرورگر
اول ببین مرورگر از SSE پشتیبانی می کند یا نه.
if (typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code...
} else {
// Sorry! No server-sent events support..
}
نمونه سمت سرور (PHP)
پاسخ را با MIME نوع text/event-stream بفرست. داده ها با پیشوند data: می آیند.
<?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)
اینجا هم همان الگو است. نوع محتوا و متن داده مهم اند.
<%
Response.ContentType = "text/event-stream";
Response.Expires = -1;
Response.Write("data: The server time is: " & now());
Response.Flush();
%>
رویدادهای مهم EventSource
سه رویداد کلیدی داریم. یکی برای باز شدن، یکی پیام، و یکی خطا.
onopen: اتصال باز شد.onmessage: پیام دریافت شد.onerror: خطا رخ داد.
گام های عملی راه اندازی
- سرویس بساز و هدر
text/event-streamبفرست. - در کلاینت یک
EventSourceبساز. - در
onmessageداده را نمایش بده.
برای کار موازی، کارگران وب را ببین. همچنین صفحه رویدادهای ارسالی از سرور مرجع همین بخش است.
جمع بندی سریع
- SSE پیام ها را خودکار می فرستد.
- کلاینت فقط گوش می دهد.
- با EventSource وصل می شوی.
- محتوا باید event-stream باشد.
- هر پیام با data: شروع می شود.