HTML Server-Sent Events API
सर्वर-सेंटेड इवेंट्स (एसएसई) एपीआई एक HTTP कनेक्शन पर सर्वर से वेब पेज पर संदेशों/अपडेट को पुश करने की अनुमति देता है।
सर्वर-प्रेषक घटनाएँ - एकतरफा संदेश
सर्वर-प्रेषक ईवेंट तब होता है जब एक वेब पेज स्वचालित रूप से सर्वर से संदेश/अपडेट प्राप्त करता है।
आम तौर पर, एक वेब पेज सर्वर से डेटा का अनुरोध करेगा, लेकिन सर्वर-प्रेषित घटनाओं के साथ, अपडेट स्वचालित रूप से पुश किए जाते हैं।
उदाहरण: फेसबुक/ट्विटर अपडेट, शेयर बाजार अपडेट, समाचार फ़ीड, खेल परिणाम, आदि।
ब्राउज़र समर्थन
तालिका में संख्याएँ सर्वर-डिस्पैच्ड इवेंट एपीआई को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र संस्करण का प्रतिनिधित्व करती हैं।
| API | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| SSE | 6.0 | 79.0 | 6.0 | 5.0 | 11.5 |
सर्वर-प्रेषक ईवेंट सूचनाएं प्राप्त करना
इवेंटसोर्स ऑब्जेक्ट का उपयोग सर्वर-प्रेषित ईवेंट सूचनाएं प्राप्त करने के लिए किया जाता है:
उदाहरण
<स्क्रिप्ट> स्थिरांक x = document.getElementById('परिणाम'); // ब्राउज़र एसएसई समर्थन की जाँच करें if(typeof(EventSource) !== "अपरिभाषित") { var स्रोत = नया इवेंटसोर्स('demo_sse.php'); source.onmessage = फ़ंक्शन(इवेंट) { x.innerHTML += इवेंट.डेटा + "<br>"; }; }अन्यथा{ x.innerHTML = "क्षमा करें, सर्वर द्वारा भेजे गए ईवेंट के लिए कोई समर्थन नहीं।"; } </स्क्रिप्ट>उदाहरण स्पष्टीकरण:
- एक नया इवेंटसोर्स ऑब्जेक्ट बनाएं और उस पेज का यूआरएल निर्दिष्ट करें जो अपडेट भेजेगा (इस उदाहरण में "demo_sse.php")।
- हर तरह से एक अद्यतन प्राप्त होता है,
onmessageघटना घटती है onmessageजब घटना घटती है, तो प्राप्त डेटाid="result"इसे तत्व में रखें
ब्राउज़र समर्थन की जाँच करें
उपरोक्त उदाहरण में सर्वर-प्रेषित घटनाओं के लिए ब्राउज़र समर्थन की जांच करने के लिए कोड की कुछ अतिरिक्त पंक्तियां शामिल हैं:
उदाहरण
if(typeof(EventSource) !== "अपरिभाषित") { // हाँ! सर्वर-प्रेषण घटनाओं के लिए समर्थन! // कुछ कोड... }अन्यथा{ // क्षमा करें! सर्वर-प्रेषित ईवेंट समर्थित नहीं हैं. }सर्वर-साइड कोड उदाहरण
उपरोक्त उदाहरण को काम करने के लिए, आपको एक सर्वर (जैसे PHP या ASP) की आवश्यकता है, जिस पर आप डेटा अपडेट भेज सकें।
सर्वर-साइड इवेंट स्ट्रीम सिंटैक्स सरल है। "सामग्री-प्रकार" हेडर को "टेक्स्ट/इवेंट-स्ट्रीम" पर सेट करें। अब आप इवेंट स्ट्रीम भेजना शुरू कर सकते हैं।
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();
?>एएसपी (वीबी) में कोड (demo_sse.asp):
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>कोड स्पष्टीकरण:
- "सामग्री-प्रकार" हेडर को "टेक्स्ट/इवेंट-स्ट्रीम" पर सेट करें।
- निर्दिष्ट करें कि पृष्ठ कैश्ड नहीं होना चाहिए
- भेजे जाने वाले डेटा को आउटपुट करें ("डेटा:" से शुरू करें)
- आउटपुट डेटा को वेब पेज पर पुश करें
इवेंटसोर्स ऑब्जेक्ट
उपरोक्त उदाहरणों में संदेश प्राप्त करने के लिएonmessageहमने इवेंट का उपयोग किया. लेकिन अन्य घटनाएँ भी उपलब्ध हैं:
जब सर्वर से कोई कनेक्शन खोला जाता है
जब कोई संदेश प्राप्त होता है
जब कोई त्रुटि होती है
SSE vs AJAX Polling
Server-Sent Events
- एक तरफ़ा संचार (सर्वर → ब्रांचियन)
- लगातार HTTP कनेक्शन
- स्वचालित अद्यतन
- कम अव्यक्ता
- कम बैंडविड्थ उपयोग
- स्वचालित रूप से पुन: कनेक्ट करें
AJAX Polling
- दोतरफा संचार
- अलग अनुरोध
- लगातार अनुरोध की आवश्यकता है
- बहुत ज्यादा देरी
- उच्च बैंडविड्थ उपयोग
- मैनुअल रीलिंकिंग
इंटरैक्टिव दृष्टिकोण
सर्वर-प्रेषित ईवेंट विधि
नीचे दिए गए बटन पर क्लिक करें और सर्वर से कनेक्ट करें। सर्वर कनेक्शन स्थिति और टाइमस्टैम्प प्रदर्शित होते हैं।
सिंथेटिक सर्वर:
इस दृष्टिकोण में, हम एक सिंथेटिक सर्वर का उपयोग करते हैं जो हर 2 सेकंड में आगे बढ़ने वाले टाइमस्टैम्प भेजता है। वास्तविक एप्लिकेशन में, यह वास्तविक सर्वर को प्रतिस्थापित कर देगा।