SSE در Html

SSE در Html چیست و چه کاربردی دارند ؟

HTML 5 یک سری API داره که خیلی کاربردی هستند بویژه در سامانه های تحت وب (Web Applications) که ssl یکی از این API ها هستش

Server Side Events : SSE مخفف رویداد های طرف سرویس دهنده هست یعنی اون توابعی که در قسمت سرویس دهنده اجرا میشه و نتایج اون به صورت Real time یعنی بدون وقفه به کاربر یا سرویس گیرنده (Client) ارسال میشه . یعنی بدون نیاز به ارسال درخواست HTTP چه به صورت Ajax و یا معمولی ، اطلاعات رو از سرویس دهنده (Server) دریافت میکنه نمونه کامل تر این فرآیند وب سوکت هست ولی در وب سوکت ایجاد سرور و ارتباط دو طرفه بودن کمی زمان بر هست و گاهی ما فقط نیاز این رو داریم که اطلاعات فقط از طرف سرویس دهنده به کاربر به صورت Real Time باشه در این مواقع بهترین گزینه استفاده از SSE هست. یعنی میشه گفت SSE همون وب سوکت هست ولی با این تفاوت که در SSE مسیر یک طرفه از سرویس دهنده به کاربر هست و نیازی به ایجاد سرور نیست ! با این مقدمه ای که گفته شد میریم سراغ متد هایی که در SSE موجود هست

sse برای زمانی است که یک صفحه وب به طور خودکار از سرور بروز رسانی می کند.

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

بروزرسانی های فیس بوک و توییتر ، بروزرسانی قیمت سهام ، خبرهای خبری ، نتایج ورزشی و … نمونه هایی از sse است

سه متد در SSE داریم :

onopen : زمانی که SSE باز میشه یا بهتر بگیم ، زمانی که کاربر ارتباطش با سرور برقرار میشه
onmessage : زمانی که پیغامی از طرف سرور به کاربر ارسال میشه
onerror : زمانی که خطایی رخ میده

بیشتر

Video در Html

اعلان های sse

شی EventSource برای دریافت اعلان های رsse استفاده می شود.

به مثال زیر دقت کنید :

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

یک شی EventSource جدید ایجاد کردیم و URL صفحه ارسال کننده بروزرسانی ها را مشخص کردیم (در این مثال “demo_sse.php”)

با هر بار به روزرسانی ، رویداد onmessage رخ می دهد

هنگامی که رویداد onmessage رخ می دهد ، داده های دریافت شده را در تگ با id = “result قرار می دهیم

پشتیبانی sse

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

if(typeof(EventSource) !== “undefined”) {
// پشتیبانی از رویدادهای ارسال شده توسط سرور

// code…..
} else {
// از sse پشتیبانی نمی کند
}

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

برای کار کردن مثال بالا ، شما به سروری نیاز دارید که بتواند بروزرسانی های داده را ارسال کند (مانند PHP یا ASP).

نحو جریان sse ساده است. عنوان “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

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

عنوان “Content-Type” را روی “text/event-stream” تنظیم کنید

مشخص کنید که صفحه نباید حافظه پنهان شود

داده ها را برای ارسال خارج کنید (همیشه با “data:” شروع کنید)

داده های خروجی را به صفحه وب برگردانید

نسخه ی مرور گر ها که از SSE پشتیبانی میکنند :

کروم : نسخه ۶٫۰ به بعد
اینترنت اکسپلورر : نسخه ۷۹ به بعد
موزیلا فایرفاکس : نسخه ۶٫۰ به بعد
سافاری : نسخه ۵٫۰ به بعد
اپرا : نسخه ۱۱٫۵ به بعد

امیدواریم این بخش از آموزش در مورد SSE در Html نیز برای شما مفید واقع شده باشد و ما را در تلگرام و اینستاگرام دنبال کنید .

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید

SSE در Html چیست و چه کاربردی دارند ؟

سه متد در SSE داریم :

اعلان های sse

به مثال زیر دقت کنید :

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

پشتیبانی sse

<?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(); ?>

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

سلام کاربر عزیز

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

<?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();
?>

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