ওয়েব অ্যাপ্লিকেশনে HTML5 Server-Sent Events ব্যবহার

SSE ব্যবহার করে রিয়েল-টাইম ওয়েব অ্যাপ্লিকেশন তৈরি

Server-Sent Events (SSE) ব্যবহার করে আপনি সার্ভার থেকে ক্লায়েন্টে স্বয়ংক্রিয়ভাবে ডেটা পUSH করতে পারেন। এটি লাইভ ফিড, নোটিফিকেশন, স্টক প্রাইস, স্পোর্টস স্কোর ইত্যাদির জন্য আদর্শ।

ক্লায়েন্ট-সাইড ইমপ্লিমেন্টেশন

<!DOCTYPE html>
<html>
<head>
  <title>Live Server Time via SSE</title>
  <style>
    #ticker { font-family: monospace; font-size: 1.5rem; padding: 20px; background: #f8f9fa; border-radius: 8px; margin: 20px; }
    .status { padding: 10px; margin: 10px; border-radius: 4px; }
    .connected { background: #d4edda; color: #155724; }
    .disconnected { background: #f8d7da; color: #721c24; }
  </style>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const eventSource = document.querySelector('eventsource');
      const ticker = document.getElementById('ticker');
      const status = document.getElementById('status');
      
      if (!eventSource) {
        status.textContent = 'SSE সাপোর্ট নেই।';
        status.className = 'status disconnected';
        return;
      }
      
      // কাস্টম ইভেন্ট লিসেনার
      eventSource.addEventListener('server-time', function(event) {
        ticker.textContent = event.data;
        status.textContent = 'সংযোগ সক্রিয়';
        status.className = 'status connected';
      });
      
      // ডিফল্ট message ইভেন্ট (যদি সার্ভার event: পাঠায় না)
      eventSource.onmessage = function(event) {
        ticker.textContent = event.data;
      };
      
      // সংযোগ খোলা হলে
      eventSource.onopen = function() {
        status.textContent = 'সংযোগ স্থাপিত হয়েছে';
        status.className = 'status connected';
      };
      
      // এরর হ্যান্ডলিং
      eventSource.onerror = function(err) {
        status.textContent = 'সংযোগ বিচ্ছিন্ন। পুনরায় সংযোগ করা হচ্ছে...';
        status.className = 'status disconnected';
        // ব্রাউজার অটোমেটিক রিকানেক্ট করবে
      };
    });
  </script>
</head>
<body>
  <h1 style="text-align:center;">Live Server Time</h1>
  <div id="status" class="status">সংযোগ করা হচ্ছে...</div>
  <div id="sse">
    <eventsource src="/cgi-bin/ticker.cgi" />
  </div>
  <div id="ticker">[TIME]</div>
</body>
</html>

সার্ভার-সাইড ইমপ্লিমেন্টেশন (Node.js উদাহরণ)

// server.js
const http = require('http');

http.createServer((req, res) => {
  if (req.url === '/events') {
    // SSE হেডার সেট করুন
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
      'Access-Control-Allow-Origin': '*' // CORS যদি প্রয়োজন হয়
    });
    
    // প্রতি সেকেন্ডে টাইম পাঠান
    const interval = setInterval(() => {
      const time = new Date().toISOString();
      res.write(`event: server-time\n`);
      res.write(`data: ${time}\n\n`);
    }, 1000);
    
    // ক্লায়েন্ট ডিসকানেক্ট হলে ইন্টারভাল ক্লিয়ার করুন
    req.on('close', () => {
      clearInterval(interval);
      res.end();
    });
  } else {
    res.writeHead(404);
    res.end();
  }
}).listen(3000, () => console.log('SSE সার্ভার পোর্ট 3000-এ চলছে'));

SSE ব্যবহার করার সুযোগ

• লাইভ ড্যাশবোর্ড: রিয়েল-টাইম মেট্রিক্স আপডেট।
• নোটিফিকেশন সিস্টেম: ইমেইল, চ্যাট, সিস্টেম অ্যালার্ট।
• ফিনান্সিয়াল ডেটা: স্টক প্রাইস, ক্রিপ্টো রেট।
• সোশ্যাল ফিড: লাইভ কমেন্ট, লাইক, শেয়ার আপডেট।
• IoT মনিটরিং: সেন্সর ডেটা স্ট্রিমিং।

সীমাবদ্ধতা ও সমাধান