HTML5-এ Server-Sent Events (SSE) হ্যান্ডলিং পদ্ধতি

Server-Sent Events (SSE) ক্লায়েন্ট-সাইড ইমপ্লিমেন্টেশন

Server-Sent Events (SSE) হলো একটি টেকনোলজি যেখানে সার্ভার থেকে ক্লায়েন্টে স্বয়ংক্রিয়ভাবে ডেটা পUSH করা হয়। এটি HTTP/HTTPS상의 একটি দীর্ঘস্থায়ী সংযোগ ব্যবহার করে। নিচে একটি বেসিক ইমপ্লিমেন্টেশন দেওয়া হলো:

সম্পূর্ণ কোড উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <script>
    // DOM লোড হওয়ার পর ইভেন্ট লিসেনার যোগ করুন
    document.addEventListener('DOMContentLoaded', function() {
      const eventSource = document.querySelector('eventsource');
      const tickerDiv = document.getElementById('ticker');
      
      if (eventSource) {
        // 'server-time' ইভেন্টের জন্য লিসেনার
        eventSource.addEventListener('server-time', function(event) {
          // সার্ভার থেকে প্রেরিত ডেটা প্রদর্শন
          tickerDiv.textContent = event.data;
        }, false);
        
        // এরর হ্যান্ডলিং
        eventSource.onerror = function(err) {
          console.error('SSE সংযোগ ত্রুটি:', err);
          tickerDiv.textContent = 'সংযোগ বিচ্ছিন্ন হয়েছে। পুনরায় চেষ্টা করছি...';
        };
      } else {
        console.warn('<eventsource> এলিমেন্ট পাওয়া যায়নি।');
      }
    });
  </script>
</head>
<body>
  <div id="sse">
    <eventsource src="/cgi-bin/ticker.cgi" />
  </div>
  <div id="ticker" name="ticker">[সময় লোড হচ্ছে...]</div>
</body>
</html>

SSE-এর মূল বৈশিষ্ট্য

• একমুখী যোগাযোগ: শুধু সার্ভার → ক্লায়েন্ট।
• HTTP/HTTPS ওভার: ফায়ারওয়াল/প্রক্সি বান্ধব।
• স্বয়ংক্রিয় রিকানেক্ট: ব্রাউজার আটোমেটিক রিকানেক্ট করে।
• ইভেন্ট-ভিত্তিক: কাস্টম ইভেন্ট টাইপ সাপোর্ট করে।
• হালকা ওজন: WebSocket-এর চেয়ে সিম্পল।

সার্ভার-সাইড নোট (PHP উদাহরণ)

<?php
// ticker.cgi বা ticker.php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Connection: keep-alive');

while (true) {
  $time = date('Y-m-d H:i:s');
  echo "event: server-time\n";
  echo "data: {$time}\n\n";
  ob_flush();
  flush();
  sleep(1); // প্রতি সেকেন্ডে আপডেট
}
?>

ব্রাউজার সাপোর্ট ও পলিফিল

সকল আধুনিক ব্রাউজার SSE সাপোর্ট করে (IE বাদে)। Internet Explorer-এ পলিফিল ব্যবহার করতে হবে (যেমন: eventsource npm প্যাকেজ)।

SSE vs WebSocket