HTML Server-Sent 事件

Server-Sent 事件 ওয়েবসাইটকে সার্ভার থেকে অপডেট পাওয়ার অনুমতি দেয়

Server-Sent 事件 - One Way Messaging

Server-Sent 事件 এটা অনলাইন ওয়েবসাইট থেকে সার্ভার থেকে অপডেট পাওয়ার পদ্ধতি

আগেও এই কাজ করা যেত, কিন্তু এটা ব্রাউজারকে সম্পূর্ণ অপডেট পাওয়ার জন্য প্রশ্ন করতে হতো। Server-Sent 事件 থেকে, অপডেট স্বয়ংক্রিয়ভাবে পৌঁছবে

যেমন: Facebook/Twitter অপডেট, স্টক প্রদর্শন, নতুন পোস্ট, প্রতিযোগিতার ফলাফল, ইত্যাদি

ব্রাউজার সমর্থকতা

টেবিলের সংখ্যা প্রথম ব্রাউজারকে পূর্ণাঙ্গ সমর্থন দেয় যারা server-sent 事件 সমর্থ করে

API
SSE 6.0 সমর্থ নয় 6.0 5.0 11.5

Server-Sent 事件 নোটিফিকেশন গ্রহণ

EventSource অবজেক্ট সার্ভার থেকে ইভেন্ট পাঠানো নোটিফিকেশন গ্রহণ করার জন্য ব্যবহৃত হয়:

ইনস্ট্যান্স

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
};

আপনার হাতে পরীক্ষা করুন

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

  • একটি নতুন EventSource অবজেক্ট তৈরি করুন এবং অপডেট পাঠানোর পাতার URL নির্দিষ্ট করুন (এই উদাহরণে "demo_sse.php")
  • প্রত্যেকবার অপডেট পাওয়ার সময়, onmessage ইভেন্ট ঘটবে
  • onmessage ইভেন্ট ঘটলে, পাঠিত ডাটা id হল "result" এর ইলেমেন্টে প্রবেশ করানো হবে

Server-Sent 事件 সমর্থকতা পরীক্ষা

TIY ইনস্ট্যান্সে, আমরা একটি অতিরিক্ত কোড লিখেছি যাতে সার্ভার থেকে ইভেন্ট পাঠানোর ব্রাউজার সমর্থকতা পরীক্ষা করা যায়:

if(typeof(EventSource) !== "undefined") {
    // হ্যাঁ! সার্ভার থেকে ইভেন্ট পাঠানো সমর্থ!
    // কিছু কোড.....
}
    // মানে না! সার্ভার থেকে ইভেন্ট পাঠানো সমর্থ নয়!
}

সার্ভার সাইড কোড ইনস্ট্যান্স

যদি উদাহরণটি চলতে থাকে, তবে আপনাকে সার্ভার থেকে ডাটা অপডেট পাঠাতে হবে (যেমন PHP বা ASP)。

সার্ভার পাশের ইভেন্ট স্ট্রিম সিনটেক্স অত্যন্ত সহজ।"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();
?>

ASP-এর কোড (VB) (demo_sse.asp)：

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

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

  • হেডার "Content-Type" কে "text/event-stream" হিসাবে সংযোজিত করুন
  • পৃষ্ঠা ক্যাশে না করা
  • পাঠাতে হলে, পাঠ শুরু করে "data: " দিয়ে
  • ওয়েবপেজে পুনরায় ফ্রিশ করা হয়

EventSource অবজেক্ট

উপরোক্ত উদাহরণে, আমরা onmessage ইভেন্ট ব্যবহার করে সংদেশ পাই।তবে, অন্যান্য ইভেন্টও ব্যবহার করা যেতে পারে:

ইভেন্ট বিবরণ
onopen যখন সার্ভারের সাথে কানেকশন খোলা হয়
onmessage যখন সংদেশ পাওয়া যায়
onerror যখন ত্রুটি ঘটে