SSE چیست؟

SSE مخفف کلمات Server-Sent Events است و امکان دریافت پیام های یک طرفه از سمت سرور بصورت اتوماتیک را فراهم می کند.

(SSE (Server-Sent Events - پیام های یک طرفه

SSE قابلیت جدیدی در Html5 است که به مرورگر این امکان را می دهد تا Updateهای ارسالی از طرف سرور را دریافت کند.

این قابلیت در گذشته بصورت دیگری وجود داشته است، هر زمان که Updateی ایجاد می شد صفحه وب برای دریافت Update مجبور بود آنرا درخواست نماید. اما با SSE این کار بصورت اتوماتیک و پشت پرده صورت می گیرد.

مثال هایی از SSE: تغییر عناوین خبرها، نتایج ورزشی، تغییر در شاخص ها و نمودارهای سایت های اقتصادی و ...

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

مرورگرهای Firefox, Opera, Chrome, Safari امکان دریافت پیام های یک طرفه از سمت سرور را پشتیبانی می کنند.

توجه: Internet Explorer امکان ارسال پیام های یکطرفه را پشتیبانی نمی کند.

دریافت اطلاعات ارسالی از سرور

شیء EventSource برای دریافت اطلاعات در Updateهای ارسالی از طرف سرور به کار می رود.

بلافاصله بعد از ایجاد شیء EventSource، این شیء تمام رویدادهایی که در URL تنظیم شده اتفاق می افتد را گوش می دهد (Listening).

شکل کلی استفاده از این شیء بصورت زیر است:

مثال (SSE چیست؟)

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

خودتان امتحان کنید »

توضیح کد بالا:

در خط اول یک شی جدید EventSource با نام source ایجاد کرده و صفحه demo_sse.php را به عنوان URL یا آدرس فایلی که Update را به صفحه ارسال می کند تعیین کرده ایم.
- هر زمان که Update جدیدی دریافت شود رویداد onmessage اجرا می شود.
- هر زمان که رویداد onmessage اجرا می شود نتیجه خروجی در عنصر با id معادل "result" به روز رسانی می شود. (آپدیت ارسالی در شی event.data قرار دارد)

چک کردن پشتیبانی مرورگر از SSE

بهتر است قبل از هر چیز پشتیبانی مرورگر از SSE را بررسی کنیم تا در هر حالت کد خود را بر مبنای آن بنویسیم.

قطعه کد زیر بررسی می کند که آیا مرورگر از متد SSE پشتیبانی می کند یا خیر و کد لازم را در هر صورت اجرا می نماید:

if(typeof(EventSource)!=="undefined")
{
// Yes! Server-sent events support!
// Some code.....
}
else
{
// Sorry! No server-sent events support..
}

کد سمت سرور

برای اینکه مثال بالا عمل کند باید صفحه ای وجود داشته باشد که قابلیت تولید و ارسال Update را داشته باشد. برای مثال یک صفحه PHP یا ASP

کد سمت سرور برای ارسال آپدیت بسیار ساده است. کافی است در صفحه PHP یا ASP، مقدار خاصیت Content-Type صفحه را بر روی مقدار text/event-stream تنظیم نمایید. حالا می توانید جریان ارسال اطلاعات را شروع نمایید.

کد 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:

<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>

توضیح کد:

مقدار خاصیت Content-Type صفحه را بر روی مقدار text/event-stream تنظیم نمایید.
مشخص نمایید که صفحه نباید اطلاعات را Cashe (ذخیره) نماید.
داده ها را برای ارسال آماده نمایید، همواره با کلمه data شروع می شود.
با استفاده از متد ()Flush، نتیجه را به صفحه درخواست کننده ارسال نمایید.

شیء EventSource

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

رویداد	توضیحات
onopen	زمانی که یک اتصال به سرور برقرار شود، اتفاق می افتد.
onmessage	زمانی اتفاق می افتد که یک پیام دریافت شود.
onerror	زمانی که یک خطا رخ دهد اتفاق می افتد.

فیلم آموزش html html5

: نوشته شده توسط امیر پهلوان صادق; بازدید: 22995