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 برای دریافت پیام‌ها استفاده کردیم. اما رویدادهای دیگری نیز در دسترس هستند:
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://www.w3schools.com/