جشنواره تخفیف 40 درصدی توسینسو بر روی همه آموزش ها
40 درصد تخفیف
مانده تا پایان تخفیف
مانده تا پایان تخفیف
فرهاد مهریاری
فرهاد مهریاری
Full Stack Web Developer

SSE چیست؟ معرفی API ای به نام Server Side Events در HTML5

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

دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
برای مشاهده تخفیف های ویژه امروز کلیک کنید
سرفصل های این مطلب
  1. SSE چیست؟
  2. سه متد ما در SSE داریم :
  3. میریم سراغ یه مثال
  4. Getting server updates
  • 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 ایجاد کنید و کد زیر رو در اون قرار بدید

Getting server updates


در کنار همون فایل (در همون پوشه ) فایلی به نام 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 به بعد

    

    

        
        

            

        

    

    

         0
         1
        

    

    

    

        
    

    

        
نظرات