এইচটিএমএল৫ এসএসই - HTML5 SSE



সার্ভার-সেন্ট-ইভেন্ট ব্যাবহার করে কোন ওয়েব পেজ স্বয়ংক্রিয়ভাবে সার্ভার থেকে আপডেট হতে পারে।


Server-Sent Events - এক তরফা বার্তা

কোন Server-Sent Events হল যখন একটি ওয়েব পেজ স্বয়ংক্রিয়ভাবে একটি সার্ভার থেকে আপডেট নেয়। ওয়েব পেজ আপডেট হবার আগে, এটি কোন আপডেট সহজলভ্য আছে কিনা তা পরীক্ষা করে দেখে। এখানে আপডেট গুলো স্বয়ংক্রিয়ভাবে আসে।

উদাহরণ স্বরূপ ফেসবুক / টুইটার আপডেট, স্টক আপডেট, সংবাদ, খেলাধুলার ফলাফল ইত্যাদির কথা বলা যায়।


ব্রাউজার সমর্থন বা support

টেবিলে প্রদর্শিত সংখ্যাগুলো ব্রাউজারের সেই প্রথম ভার্সন নির্দেশ করে যেগুলো সম্পূর্ণ ভাবে Server-Sent Events সমর্থন বা support করে।

API
SSE 6.0 সমর্থন করে না 6.0 5.0 11.5


সার্ভার-সেন্ট-ইভেন্ট এর notification পাওয়া

সার্ভার-সেন্ট-ইভেন্ট এর notification পেতে EventSource অবজেক্ট ব্যাবহার করতে হয়। নিচে এর একটি উদাহরণ দেখুন।

উদাহরণ

<body>

<h1>Getting server updates</h1>
<div id="result"></div>

<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "
";
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>

</body>


উদাহরণের ব্যাখ্যা

একটি নতুন EventSource অবজেক্ট তৈরি করতে হবে এবং আপডেটগুলি পাঠানোর ওয়েব পেজটির URL নির্দিষ্ট করতে হবে। এই উদাহরণে "demo_sse.php".
প্রতি বার যখন ওয়েব পেজ একটি আপডেট পায়, তখন একটি onmessage ইভেন্ট হয়,
যখন একটি onmessage ইভেন্ট হয়, তখন প্রাপ্ত আপডেট "result" নামের এলিমেন্টে রাখে।


ব্যবহারকারীর ব্রাউজারে সমর্থন বা support পরীক্ষা

ব্যবহারকারীর ব্রাউজারে এটি সমর্থন বা support করে কিনা তা পরীক্ষা করার জন্য নিচের কোড গুলো ব্যাবহার করা যায়।

উদাহরণ

if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code.....
} else {
// Sorry! No server-sent events support..
}




server side কোডের উদাহরণ

এই উদাহরণের কোড গুলো রান করতে একটি সার্ভার প্রয়োজন যেটা data update পাঠাতে সক্ষম। উদাহর স্বরূপ PHP বা ASP এর কথা বলা যায়।

সার্ভার-সাইড ইভেন্ট এর সিনট্যাক্স সহজ। "Content-Type" এর মান "text/event-stream" নির্ধারণ করুন। এখন আপনি event stream পাঠাতে শুরু করতে পারেন।

নিচে PHP কোড ব্যাবহার করে উদাহরণ দেখুন, এখানে ফাইলটি demo_sse.php নামে সংরক্ষণ বা save করা হয়েছে।

PHP কোডের উদাহরণ

<?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();
?>


নিচে ASP কোড ব্যাবহার করে উদাহরণ দেখুন, এখানে ফাইলটি demo_sse.asp নামে সংরক্ষণ বা save করা হয়েছে।

ASP (VB) কোডের উদাহরণ

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>


উদাহরণের ব্যাখ্যা

"Content-Type" হেডার এর মান "text/event-stream" নির্ধারণ করতে হবে,
ওয়েব পেজ টি cache হবে না তা নির্ধারণ করতে হবে,
তথ্য বা data পাঠাতে আউটপুট করা হয়েছে, সর্বদা "data: " দিয়ে শুরু করতে হবে।
ওয়েব পেজে আউটপুট তথ্য বা data Flush করা হয়েছে।


EventSource অবজেক্ট

ওপরের উদাহরণে আমরা বার্তা বা message পাওয়ার জন onmessage ইভেন্ট ব্যাবহার করেছি। তবে আরও কিছু ইভেন্ট রয়েছে। নিচে এদের নাম ও ব্যাবহার দেখুন।

ইভেন্টবর্ণনা
onopenযখন সার্ভারের একটি সংযোগ বা connection চালু বা open হয়।
onmessageযখন একটি বার্তা বা message গ্রহন করা হয়।
onerrorযখন কোন ভুল বা error সংঘটিত হয়।







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.