آموزش HTML - رویدادهای ارسال‌شده از سرور API

رویدادهای ارسال‌شده از سرور (SSE API)

رویدادهای ارسال‌شده از سرور (Server-sent events) روشی برای ارسال داده‌ها از سرور به یک صفحه وب بدون نیاز به رفرش شدن صفحه یا ارسال درخواست‌های مکرر هستند. این رویدادها برای ساخت برنامه‌های آنی (Real-time) مانند چت، فیدهای خبری یا اعلان‌ها بسیار مفیدند. با استفاده از SSE، می‌توانیم رویدادهای DOM را به‌صورت پیوسته از سرور وب خود به مرورگر بازدیدکننده ارسال (Push) کنیم.

رویکرد استریم رویدادها یک اتصال پایدار به سرور برقرار می‌کند و هنگام دسترسی به اطلاعات جدید، داده‌ها را به کلاینت ارسال می‌نماید؛ این کار نیاز به بررسی مداوم (Continuous Polling) را از بین می‌برد. رویدادهای ارسال‌شده از سرور، نحوه استریم داده‌ها از سرور به کلاینت را استانداردسازی می‌کنند.

چگونه از SSE در برنامه وب استفاده کنیم؟

برای استفاده از رویدادهای ارسال‌شده از سرور در یک برنامه وب، باید یک عنصر <eventsource> به سند اضافه کنیم. ویژگی src در عنصر <eventsource> باید به آدرسی اشاره کند که یک اتصال HTTP پایدار فراهم می‌کند و جریان داده‌های حاوی رویدادها را ارسال می‌نماید. علاوه بر این، این آدرس به یک اسکریپت PHP، PERL یا هر اسکریپت پایتونی اشاره می‌کند که مسئولیت ارسال مداوم داده‌های رویداد را بر عهده دارد.

نمونه

در ادامه یک نمونه کد HTML از یک برنامه وب آورده شده است که انتظار دریافت زمان سرور را دارد:

<!DOCTYPE html>
<html>
<head>
   <script type="text/javascript">
      /* Define event handling logic here */
   </script>
</head>
<body>
   <div id="sse">
      <eventsource src="/cgi-bin/ticker.cgi" />
   </div>
   <div id="ticker">
      <TIME>
   </div>
</body>
</html>

اسکریپت سمت سرور برای SSE

مراحل زیر برای ارسال رویدادهای ارسال‌شده از سرور (SSE) از طریق اسکریپت سمت سرور بیان شده است:

۱. تنظیم هدر Content-Type

اسکریپت سمت سرور باید هدر Content-Type را با مشخص کردن نوع text/event-stream به شکل زیر ارسال کند.

print "Content-Type: text/event-stream\n\n";

۲. ارسال نام رویداد

پس از تنظیم Content-Type، اسکریپت سمت سرور یک تگ Event: را به همراه نام رویداد ارسال می‌کند. تکه‌کد زیر نام رویداد را به‌صورت Server-Time ارسال می‌کند که با یک کاراکتر خط جدید خاتمه می‌یابد.

print "Event: server-time\n";

۳. ارسال داده‌های رویداد

مرحله پایانی ارسال داده‌های رویداد با استفاده از تگ Data است که پس از آن یک عدد صحیح یا مقدار رشته‌ای قرار می‌گیرد و به شکل زیر با یک کاراکتر خط جدید پایان می‌یابد −

$time = localtime();
print "Data: $time\n";

۴. ترکیب مراحل در یک اسکریپت کامل

در نهایت، اسکریپت کامل "ticker.cgi" که به زبان Perl نوشته شده به شرح زیر است −

#!/usr/bin/perl
print "Content-Type: text/event-stream\n\n";
while(true){
   print "Event: server-time\n";
   $time = localtime();
   print "Data: $time\n";
   sleep(5);
}

مدیریت رویدادهای ارسال‌شده از سرور

شما همچنین می‌توانید برنامه وب را طوری تغییر دهید که با استفاده از یک شیء eventsource به رویدادهای ارسال‌شده از سرور گوش دهد و آن‌ها را پردازش کند. بیایید برنامه وب خود را برای مدیریت رویدادهای ارسال‌شده از سرور تغییر دهیم.

مثال

مثال زیر نحوه مدیریت رویدادهای ارسال‌شده از سرور را نشان می‌دهد:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      document.getElementsByTagName("eventsource")[0].addEventListener("server-time", eventHandler, false);
         function eventHandler(event) {
            // Alert time sent by the server
            document.querySelector('#ticker').innerHTML = event.data;
         }
    </script>
  </head>
  <body>
    <div id="sse">
      <eventsource src="/cgi-bin/ticker.cgi" />
    </div>
    <div id="ticker" name="ticker"> [TIME] </div>
  </body>
</html>

توجه: قبل از آزمایش رویدادهای ارسال‌شده از سرور، پیشنهاد می‌کنم مطمئن شوید که مرورگر وب شما از این مفهوم پشتیبانی می‌کند.