এইচটিএমএল(৫) SSE
এইচটিএমএল(৫) SSE হচ্ছে একটি ওয়েব পেজকে সার্ভার থেকে পাঠানো তথ্যের মাধ্যমে স্বয়ংক্রিয়ভাবে আপডেট করা। ফেসবুক/টুইটার আপডেট, নিউজফিড, খেলার ফলাফল প্রদর্শনের জন্য SSE ব্যবহার হয়।
ব্রাউজার সাপোর্ট
বর্তমান সময়ের অধিকাংশ ব্রাউজারেই জিওলোকেশন সাপোর্ট করে। ক্রোম ৬.০, ফায়ারফক্স ৬.০, সাফারি ৫.০ এবং অপেরা ১১.৫ ভার্সন থেকে SSE সাপোর্ট করে। ইন্টারনেট এক্সপ্লোরারে এটি সাপোর্ট করে না।
SSE এর উদাহরণ
সার্ভার থেকে নোটিফিকেশন পাওয়ার জন্য EventSource অবজেক্ট ব্যবহার করা হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল(৫) SSE</title>
</head>
<body>
<h1>সার্ভার আপডেট হয়েছে।</h1>
<div id="output"></div>
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("output").innerHTML += event.data + "
";
};
} else {
document.getElementById("output").innerHTML = "দুঃখিত, আপনার ব্রাউজার সার্ভার-সেন্ট ইভেন্ট সাপোর্ট করে না।";
}
</script>
</body>
</html>
ফলাফল
প্রথমে যে পেজ থেকে আপডেট আসবে সে পেজের URL ব্যবহার করে একটি EventSource অবজেক্ট তৈরি করি। প্রতিবার আপডেট গ্রহণের পর onmessage ইভেন্ট ঘটে এবং onmessage ইভেন্ট ঘটলে একটি ফাংশন রান হয়। ফাংশনটি id="result" যুক্ত এলিমেন্টে ডেটা আউটপুট দেয়।
SSE সাপোর্ট চেক
কিছু অতিরিক্ত কোড যোগ করে আমরা ব্রাউজারে SSE সাপোর্ট করে কিনা যাচাই করে নিতে পারিঃ
if(typeof(EventSource) !== "undefined") {
// কোড...
}
else {
//দুঃখিত! SSE সাপোর্ট করে না..
}
সার্ভার-সাইড কোডের উদাহরণ
আপনি "Content-Type" হেডারকে "text/event-stream" এবং "Cache-Control" হেডারকে "no-cache" সেট করতে হবে। নিচে একটি ফাইলের উদাহরণ দেওয়া হলোঃ
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data:
The server time is: {$time}\n\n";
flush();
?>
অন্যান্য ইভেন্ট
EventSource অবজেক্টের অন্যান্য ইভেন্ট নিচে দেওয়া হলোঃ
| ইভেন্ট | বর্ণনা |
|---|---|
| onopen | সার্ভারের সাথে যখন সংযোগ ওপেন হয় |
| onmessage | যখন ম্যাসেজ গ্রহন করে |
| onerror | যখন কোনো ত্রুটি থাকে |