HTML 5 API - SSE - رویداد های ارسالی از طرف سرویس دهنده

به نام خدا

--

با سلام خدمت دوستان عزیز :)

HTML 5 یک سری API داره که خیلی کاربردی هستند بویژه در سامانه های تحت وب (Web Applications) که در این سری مقالات HTML 5 APIs تمامی اون API ها رو بررسی میکنیم.

لیست API های HTML 5 :

  • SSE
  • Web Workers
  • App Cache
  • Local Storage
  • Drag/Drop
  • Geo Location

که در این مقاله ما به بررسی SSE میپردازیم


SSE

Server Side Events

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

با این مقدمه ای که گفته شد میریم سراغ متد هایی که در SSE موجود هست :


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

onopen

زمانی که SSE باز میشه یا بهتر بگیم ، زمانی که کاربر ارتباطش با سرور برقرار میشه

onmessage

زمانی که پیغامی از طرف سرور به کاربر ارسال میشه

onerror

زمانی که خطایی رخ میده

میریم سراغ یه مثال

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

var SSE = new EventSource("server.php");

طبق کد بالا یک شی جدید از EventSource ایجاد میشه در مرحله بعدی ما متد های گفته شده رو به شی SSE نسب میدیم و کار تمام !

کد زیر مثال کامل تری از نحوه دریافت پیغام از طرف سرور رو نشون میده :

فایلی دلخواه با فرمت html ایجاد کنید و کد زیر رو در اون قرار بدید

<h1>Getting server updates</h1>
<div id="result"></div>

<script>

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

</script>

در کنار همون فایل (در همون پوشه ) فایلی به نام server.php ایجاد کنید و کد زیر رو در اون فایل قرار بدید :

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('Y-m-d H:i:s');
echo "data: The server time is: {$time}\n\n";

توجه کنید که در فایل سرور نوع content در قسمت header الزاما باید text/event-stream باشه در غیر این صورت پیغام های اسرالی از طرف سرور در قسمت کاربر دریافت نمیشه

سطر بعدی هم که cache رو در نظر نمیگیره و سطر 4و5 هم که واضح هست.

پارامتر ورودی که در متد onmessage استفاده میشه خودش یک شی هست که در اون شی (propery) یا ویژگی data همون پیغام دریافتی از سمت سرور هست.

سایر ویژگی های مهم شی event :

origin : مبدا سرور

timeStamp : زمان دریافت

isTrusted بررسی جهت اطمینان از هویت داده که مقدار true یا false رو برمیگردونه

موراردی که SSE میتونه کاربرد داشته بیشتر در گرفت اطلاعیه هست

برای مثال یه web app داریم که جزئیات پردازنده میزان استفاده از RAM رو نشون میده

حالا این رو با پروتکل HTTP با متد POST و از طریق Ajax انجام بدیم که خیلی فاجعه است !

اگر با وب سوکت انجام بدیم ، خوبه ولی اضافه کاری و اتلاف زمان و هزینه رو هم داره

بهترین گزینه استفاده از SSE هست.

و در آخر میتونیم با استفاده از کد زیر بررسی بکنیم که مرورگر از EventSource پشتیبانی میکنه یا نه !

if(typeof(EventSource) !== "undefined") {
    // پشتیبانی میکنه 
    // Some code.....
} else {
    // مرورگر شما قدیمیه آپدیت کن
}

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

کروم : نسخه 6.0 به بعد

اینترنت اکسپلورر : کلا پشتیبانی نمیکنه : | ( اصلا از این خوشم نمیاد )

موزیلا فایرفاکس : نسخه 6.0 به بعد

سافاری : نسخه 5.0 به بعد

اپرا : نسخه 11.5 به بعد

پایان این قسمت

در پناه حق موفق باشید.

دریافت فایل های مقاله


نویسنده : فرهاد مهریاری

منبع : انجمن تخصصی فناوری اطلاعات ایران

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد.

#آموزش_api_های_html5 #آموزش_eventsource #آموزش_html5_sse #آموزش_html5
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....