কম্পিউটার টিউটোরিয়াল

HTML5 Server-Sent Events (SSE) কী এবং কিভাবে কাজ করে?


Server-Sent Events (SSE): কনসেপ্ট ও কর্মক্রম

ঐতিহ্যবাহী ওয়েব অ্যাপ্লিকেশনে ইভেন্টগুলো ব্রাউজার থেকে সার্ভারে যেতে (Client-sent events)। যেমন: লিংক ক্লিক করলে নতুন পেজ রিকোয়েস্ট। কিন্তু HTML5 এবং WHATWG Web Applications 1.0 এর সাথে এসেছে Server-Sent Events (SSE) — যেখানে ইভেন্ট সার্ভার থেকে ব্রাউজারে প্রবাহিত হয়।

SSE কী?

SSE হলো একটি স্ট্যান্ডার্ডাইজড টেকনোলজি যা ওয়েব সার্ভার থেকে ব্রাউজারে 지속적인 (persistent) HTTP সংযোগের মাধ্যমে DOM ইভেন্ট হিসেবে ডেটা পUSH করে। এটি পোলিং (polling) এর বিকল্প হিসেবে কাজ করে — ক্লায়েন্ট বারবার রিকোয়েস্ট না করে সার্ভার যখন নতুন ডেটা থাকে তখন পাঠায়।

SSE কিভাবে কাজ করে?

  1. ক্লায়েন্ট একটি <eventsource> এলিমেন্ট বা EventSource API দিয়ে সার্ভারের সাথে সংযোগ স্থাপন করে।
  2. সার্ভার HTTP রেসপন্স খোলা রাখে এবং Content-Type: text/event-stream হেডার পাঠায়।
  3. সার্ভার নতুন ডেটা উপলব্ধ হলে স্ট্রিমে লিখে: data: মেসেজ\n\n।
  4. ব্রাউজার ডেটা পাওয়ায় onmessage বা কাস্টম ইভেন্ট লিসেনার ট্রিগার করে।
  5. সংযোগ বিচ্ছিন্ন হলে ব্রাউজার স্বয়ংক্রিয়ভাবে রিকানেক্ট করার চেষ্টা করে।

SSE ডেটা ফরম্যাট

সার্ভার থেকে পাঠানো প্রতিটি মেসেজ নিচের ফরম্যাটে থাকে:

data: প্রথম লাইন\n
data: দ্বিতীয় লাইন (যদি মাল্টিলাইন হয়)\n
\n

ঐচ্ছিক ফিল্ডগুলো:

  • event: ইভেন্ট_নাম — কাস্টম ইভেন্ট টাইপ নির্দিষ্ট করে।
  • id: ইউনিক_আইডি — রিকানেক্টের وقت লাস্ট ইভেন্ট আইডি পাঠাতে সাহায্য করে (Last-Event-ID হেডার)۔
  • retry: মিলিসেকেন্ড — রিকানেক্ট ইন্টারভাল নির্দিষ্ট করে।

SSE-এর সুবিধা

  • সরলতা: WebSocket-এর চেয়ে ইমপ্লিমেন্ট করা সহজ।
  • HTTP ওভার: বিদ্যমান ইনফ্রাস্ট্রাকচার (প্রক্সি, CDN, লোড ব্যালেন্সার) সাথে কম্প্যাটিবল।
  • স্বয়ংক্রিয় রিকানেক্ট: ব্রাউজার বিল্ট-ইন রিকানেক্ট লজিক 갖고।
  • লাইটওয়েট: কম ওভারহেড, কোনো বাইনারি ফ্রেমিং নেই।
  • HTTPS সাপোর্ট: সিকিউর কানেকশন নেটিভলি সাপোর্টেড।

কখন SSE ব্যবহার করবেন?

  • সার্ভার থেকে ক্লায়েন্টে একমুখী ডেটা ফ্লো দরকার হলে।
  • রিয়েল-টাইম আপডেট: নোটিফিকেশন, লাইভ স্কোর, স্টক টিকারের মতো।
  • ক্লায়েন্ট থেকে সার্ভারে কম ডেটা পাঠাতে হলে (শুধু প্রায়্টিক্যাল HTTP রিকোয়েস্ট যথেষ্ট)।
  • সিম্পল ইনফ্রাস্ট্রাকচার চাইলে (WebSocket সার্ভার ছাড়া)।

ব্রাউজার সাপোর্ট

সকল আধুনিক ব্রাউজার (Chrome 6+, Firefox 6+, Safari 5+, Opera 11+, Edge 79+) SSE সাপোর্ট করে। Internet Explorer-এ পলিফিল দরকার।

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

  2. HTML5 রেসপন্সিভ ওয়েব ডিজাইন

  3. উইন্ডোজ ১০-এ Cortana Web Preview কাজ করছে না

  4. Telegram Web কাজ না করলে দ্রুত সমাধান