آموزش SSE در HTML

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

SSE پیام رسانی یک طرفه

یک SSE(رویداد ارسال شده توسط سرور) وقتی است که یک صفحه ی وب به طور اتوماتیک آپدیت ها را از یک سرور دریافت می کند. این قبلاً نیز امکان پذیر بوده است اما صفحه وب باید بپرسد که آیا به روز رسانی در دسترس است یا خیر. با استفاده از SSE، آپدیت ها به صورت اتوماتیک می آیند. بعنوان مثال می توان موارد زیر را نام برد:

• آپدیت های فیس بوک یا توییتر
• به روز رسانی قیمت سهام
• فیدهای خبری
• نتایج ورزشی
• و غیره

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

اعداد درون جدول زیر، اولین ورژن مرورگری را مشخص می کنند که کاملاً از SSE پشتیبانی می کند.

					API
6.0	79.0	6.0	11.5	5.0	SSE

 دریافت نوتیفیکیشن های SSE

از آبجکت EventSource برای دریافت نوتیفیکیشن های SSE استفاده می شود:

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

توضیح مثال بالا:

1. ابتدا یک آبجکت جدید از EventSource ایجاد می کنیم و URL صفحه ای که آپدیت ها را ارسال می کند، مشخص می کنیم(در این مثال، demo_sse.php).

2. هر زمان که یک آپدیت دریافت می شود، رویداد onmessage رخ می دهد.

3. وقتی که یک رویداد onmessage رخ می دهد، داده های دریافت شده در یک عنصر با id="result" قرار داده می شود.

 بررسی پشتیبانی از SSE

در مثال بالا، چند خط کد اضافی وجود داشت که پشتیبانی مرورگر از SSE را بررسی می کرد:

if(typeof(EventSource) !== "undefined") {
  // بله از اس اس ای پشتیبانی می شود
  // مقداری کد.....
} else {
  // متاسفانه از اس اس ای پشتیبانی نمی شود
} 

مثالی ار کدهای سمت سرور

بعنوان مثال، برای اینکه مثال بالا کار کند، به یک سرور مناسب برای ارسال داده ی آپدیت ها(مانند PHP یا ASP) نیاز داریم. سینتکس استریم SSE ساده است. هِدِر Content-Type را برابر با text/event-stream قرر دهید. اکنون می توانید ارسال استریم های رویداد(sending event streams) را شروع کنید.

کد 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 مورد نظر(demo_sse.asp)(VB):

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

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

1. هدر Content-Type را برابر با text/event-stream قرار دهید.

2. مشخص کنید که در صفحه، cache اتفاق نیفتد.

3. داده های را در خروجی() قرار دهید تا ارسال شوند(همیشه با عبارت "data: " شروع کنید).

4. داده های خروجی را در صفحه ی وب برگردانید(Flush the output data back).

آبجکت EventSource

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