Jassif Team Institution

HTML Server-Sent Events API

সার্ভার-প্রেরিত ইভেন্টস (SSE) API একটি HTTP সংযোগের মাধ্যমে একটি সার্ভার থেকে একটি ওয়েব পৃষ্ঠায় বার্তা/আপডেট পুশ করার অনুমতি দেয়৷

সার্ভার-প্রেরক ইভেন্ট - একমুখী বার্তাপ্রেরণ

একটি সার্ভার-প্রেরক ইভেন্ট হল যখন একটি ওয়েব পৃষ্ঠা স্বয়ংক্রিয়ভাবে সার্ভার থেকে বার্তা/আপডেট গ্রহণ করে।

সাধারণত, একটি ওয়েব পৃষ্ঠা সার্ভার থেকে ডেটার অনুরোধ করে, কিন্তু সার্ভার-প্রেরিত ইভেন্টগুলির সাথে আপডেটগুলি স্বয়ংক্রিয়ভাবে পুশ করা হয়।

উদাহরণ: Facebook/Twitter আপডেট, স্টক মার্কেট আপডেট, নিউজ ফিড, খেলার ফলাফল ইত্যাদি।

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

সারণীতে থাকা সংখ্যাগুলি সার্ভার-ডিসপ্যাচড ইভেন্ট API-কে সম্পূর্ণরূপে সমর্থন করার জন্য প্রথম ব্রাউজার সংস্করণকে উপস্থাপন করে।

সার্ভার-প্রেরক ইভেন্ট বিজ্ঞপ্তি প্রাপ্তি

ইভেন্টসোর্স অবজেক্টটি সার্ভার-প্রেরিত ইভেন্ট বিজ্ঞপ্তিগুলি পেতে ব্যবহৃত হয়:

<script> const x = document.getElementById("ফলাফল"); // ব্রাউজার SSE সমর্থন চেক করুন if(typeof(EventSource) !== "অনির্ধারিত") { var উৎস = নতুন ইভেন্ট সোর্স("demo_sse.php"); source.onmessage = ফাংশন(ইভেন্ট) { x.innerHTML += event.data + "<br>"; }; } অন্য { x.innerHTML = "দুঃখিত, সার্ভার-প্রেরিত ইভেন্টগুলির জন্য কোন সমর্থন নেই।"; } </script>

উদাহরণ বর্ণনা:

1. একটি নতুন ইভেন্টসোর্স অবজেক্ট তৈরি করুন এবং পৃষ্ঠার URL নির্দিষ্ট করুন যা আপডেট পাঠাবে (এই উদাহরণে "demo_sse.php")।
2. প্রতিবার আপডেট পাওয়া গেলে,onmessageঘটনা ঘটে
3. onmessageঘটনা ঘটলে, প্রাপ্ত তথ্যid="result"উপাদানে এটি রাখুন

ব্রাউজার সমর্থন পরীক্ষা করুন

উপরের উদাহরণে সার্ভার-প্রেরিত ইভেন্টগুলির জন্য ব্রাউজার সমর্থন পরীক্ষা করার জন্য কোডের কয়েকটি অতিরিক্ত লাইন অন্তর্ভুক্ত করা হয়েছে:

if(typeof(EventSource) !== "অনির্ধারিত") { // হ্যাঁ! সার্ভার-প্রেরণ ইভেন্টের জন্য সমর্থন! // কিছু কোড..... } অন্য { // দুঃখিত! সার্ভার-প্রেরিত ইভেন্টগুলি সমর্থিত নয়। }

সার্ভার-সাইড কোড উদাহরণ

উপরের উদাহরণটি কাজ করার জন্য, আপনার একটি সার্ভার প্রয়োজন (যেমন PHP বা ASP) যেখানে আপনি ডেটা আপডেট পাঠাতে পারেন।

সার্ভার-সাইড ইভেন্ট স্ট্রিম সিনট্যাক্স সহজ। "কন্টেন্ট-টাইপ" শিরোনামকে "টেক্সট/ইভেন্ট-স্ট্রীম" এ সেট করুন। এখন আপনি ইভেন্ট স্ট্রীম পাঠানো শুরু করতে পারেন.

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

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

কোড বর্ণনা:

1. "কন্টেন্ট-টাইপ" শিরোনামকে "টেক্সট/ইভেন্ট-স্ট্রীম" এ সেট করুন।
2. নির্দিষ্ট করুন যে পৃষ্ঠাটি ক্যাশে করা উচিত নয়
3. পাঠানোর জন্য ডেটা আউটপুট করুন (সর্বদা "ডেটা:" দিয়ে শুরু করুন)
4. ওয়েব পেজে আউটপুট ডেটা পুশ করুন

ইভেন্টসোর্স অবজেক্ট

উপরের উদাহরণগুলিতে বার্তাগুলি গ্রহণ করতেonmessageআমরা ইভেন্ট ব্যবহার করেছি কিন্তু অন্যান্য ইভেন্টগুলিও পাওয়া যায়:

SSE vs AJAX Polling

ইন্টারেক্টিভ অনুশীলন

অনুশীলন করুন