X

X

X

HTML5 সার্ভার-সেন্ট ইভেন্ট ( Server-Sent Events )


Server-Sent Events একটি ওয়েব পেজের একটি সার্ভার থেকে ব্রাউজারে তথ্য পাঠাতে পারে ।


Server-Sent Events – One Way Messaging

server-sent event দিয়ে একটি ওয়েব পেজ স্বয়ংক্রিয়ভাবে একটি সার্ভার থেকে তথ্য পেতে পারে।

এটি আগেও সম্ভব ছিল, তবে ওয়েব পেজটিকে প্রথমে লোড করে চেক করা লাগতো যে কোন আপডেট ছিল কিনা । বরতমানে server-sent events দিয়ে স্বয়ংক্রিয়ভাবে আপডেটগুলি আসে । বর্তমানে এটি মূলত ওয়েব সকেট ব্যবহার করে করা হয়।

উদাহরণ: Facebook/Twitter আপডেট, stock price আপডেট, news feeds, sport results ইত্যাদি ।


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

যে ব্রাউজার গুলো server-sent events সাপোর্ট করে সেগুলো দেওয়া হল ঃ

API
SSE 6.0 Not supported 6.0 5.0 11.5

Receive Server-Sent Event Notifications

EventSource object ব্যবহার করা হয় server-sent event notifications গ্রহণ করার জন্য।

Code Example

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support Web Workers.</p>

<script>
var w;

function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
    }
}

function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


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

  • নতুন EventSource object তৈরি করুন, এবং এরপর যে পেজ থেকে নোটিফিকেশন পাবেন তার লিংক উল্লেখ্য করুন
  • প্রত্যেকবার নোটিফিকেশন পাবার পর onmessage event সম্পাদিত হয়।
  • যখন onmessage event সম্পাদিত হয় তখন, প্রাপ্ত ডাটাগুলো id=”result” বিশিষ্ট ইলামেন্টের মধ্যে রাখুন।

Server-Sent Events সাপোর্ট করে কিনা চেক করুন

নিচের উদাহরণে server-sent event ব্রাউজারে সাপোর্ট করে কিনা সেটি বর্ণনা করা হয়েছে ।

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

Server-Side Code এর উদাহরণ

উপরের উদাহরণে ডাটা আপডেট করার জন্যে, সার্ভার সাইড ল্যাঙ্গুয়েজ ব্যবহার করা প্রয়োজন (যেমন PHP অথবা ASP) ।
server-side event stream syntax ব্যবহার করা খুব সহজ। শুধু header এ “Content-Type” = “text/event-stream” যুক্ত করুন । এখন থেকে আপনি ডাটা পাঠাতে পারবেন ।

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

Code in ASP (VB) (demo_sse.asp):

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

কোডের ব্যাখ্যা :

  • header এ “Content-Type” = “text/event-stream” যুক্ত করুন।
  • পেজটি cache করে রাখবেন না।
  • ডাটা সেন্ড করার জন্য আউটপুট প্রকাশ করুন। (সবসময়  “data: ” উপসর্গ দিয়ে শুরু করবেন)
  • web page এ ডাটা পাঠান।

EventSource Object

উপরের উদাহরণে তথ্য পাওয়ার জন্যে onmessage event ব্যবহার করা হয়েছে । তবে আরও অনেক event রয়েছে ।

Event সমূহ বর্ণনা
onopen সার্ভারে যখন কানেকশন চালু করা হয়, তখন এক্সিকিউট হয়।
onmessage যখন একটি message সার্ভারে receive হয়, তখন এক্সিকিউট হয়।
onerror যখন কোনো ভুল ঘটে তখন এটি এক্সিকিউট হয়।