API رویدادهای ارسال‌شده از سرور (SSE) در HTML
API رویدادهای ارسال‌شده از سرور (Server-Sent Events یا SSE) امکان ارسال (push) پیام‌ها/به‌روزرسانی‌ها از یک سرور به صفحه وب را از طریق اتصال HTTP فراهم می‌کند.
رویدادهای ارسال‌شده از سرور - پیام‌رسانی یک‌طرفه
یک رویداد ارسال‌شده از سرور زمانی رخ می‌دهد که یک صفحه وب به‌طور خودکار پیام‌ها/به‌روزرسانی‌ها را از یک سرور دریافت می‌کند.
به‌طور معمول، یک صفحه وب باید داده‌ها را از سرور درخواست کند، اما با رویدادهای ارسال‌شده از سرور، به‌روزرسانی‌ها به‌طور خودکار ارسال (push) می‌شوند.
مثال‌ها: به‌روزرسانی‌های فیسبوک/توییتر، به‌روزرسانی‌های بازار بورس، فیدهای خبری، نتایج ورزشی و غیره.
پشتیبانی مرورگرها
اعداد داخل جدول، اولین نسخه از مرورگر را مشخص می‌کنند که به‌طور کامل از API رویدادهای ارسال‌شده از سرور پشتیبانی می‌کند.
دریافت اعلان‌های رویداد ارسال‌شده از سرور
شیء EventSource برای دریافت اعلان‌های رویداد ارسال‌شده از سرور استفاده می‌شود:
مثال
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
let w;
function startWorker() {
const x = document.getElementById("result");
if (typeof(Worker) !== "undefined") {
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
x.innerHTML = event.data;
};
} else {
x.innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html>توضیح مثال:
-
یک شیء
EventSourceجدید ایجاد کنید و URL صفحه‌ای که به‌روزرسانی‌ها را ارسال می‌کند، مشخص نمایید (در این مثال "demo_sse.php"). -
هر بار که یک به‌روزرسانی دریافت می‌شود، رویداد
onmessageرخ می‌دهد. -
هنگامی که رویداد
onmessageرخ می‌دهد، داده‌ی دریافت‌شده را در عنصری با شناسه‌یid="result"قرار دهید.
بررسی پشتیبانی مرورگر
در مثال بالا، چند خط کد اضافی برای بررسی پشتیبانی مرورگر از رویدادهای ارسال‌شده از سرور وجود داشت:
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code.....
} else {
// Sorry! No server-sent events support..
}مثال کد سمت سرور
برای اینکه مثال بالا کار کند، شما به سروری نیاز دارید که قادر به ارسال به‌روزرسانی داده‌ها باشد (مانند PHP یا ASP).
سینتکس جریان رویداد (event stream) در سمت سرور ساده است. هدر (header) 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تنظیم کنید. -
مشخص کنید که صفحه نباید کش (cache) شود.
-
داده‌ای را که باید ارسال شود، خروجی دهید (همیشه با
data:شروع شود). -
داده‌ی خروجی را به صفحه وب فلاش کنید (یعنی فوراً ارسال کنید).
شیء EventSource
در مثال‌های بالا ما از رویداد onmessage برای دریافت پیام‌ها استفاده کردیم. اما رویدادهای دیگری نیز در دسترس هستند: