HTML5-এ সার্ভার-সেন্ট ইভেন্টস (SSE) কীভাবে কাজ করে

সার্ভার-সেন্ট ইভেন্টস সার্ভার থেকে ক্লায়েন্টে ডেটা স্ট্রিম করার মানক পদ্ধতি নির্ধারণ করে। ওয়েব অ্যাপ্লিকেশনে Server-Sent Events ব্যবহার করতে ডকুমেন্টে <eventsource> এলিমেন্ট যোগ করতে হয়।

<eventsource> এলিমেন্টের src অ্যাট্রিবিউটটি এমন একটি URL-কে পয়েন্ট করা উচিত যা একটি স্থায়ী HTTP কানেকশন প্রদান করে এবং ইভেন্ট ধারণকারী ডেটা স্ট্রিম পাঠায়।

URLটি একটি PHP, PERL বা পাইথন স্ক্রিপ্টকে পয়েন্ট করবে যা নিরಂತರ ইভেন্ট ডেটা পাঠানোর দায়িত্ব নেবে। নিচে একটি সাধারণ উদাহরণ দেওয়া হলো যা সার্ভার টাইম আশা করে।

উদাহরণ

নিচের কোডটি চালিয়ে HTML5-এ Server-Sent Events ব্যবহার করা যাবে:

<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript">
      document.getElementsByTagName("eventsource")[0].addEventListener("server-time", eventHandler, false);
      function eventHandler(event) {
        // সার্ভার থেকে পাঠানো টাইম আপডেট করুন
        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>

নিচে Perl-এ লেখা ticker.cgi দেওয়া হলো:

#!/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> এলিমেন্ট বর্তমানে অবচিত (deprecated)। আধুনিক ব্রাউজারগুলিতে EventSource জাভাস্ক্রিপ্ট API ব্যবহার করা উচিত।