एचटीएमएल एसएसई एपीआई
सर्वर से भेजे गए ईवेंट (SSE) वेब पेज को सर्वर से अपडेट प्राप्त करने की अनुमति देते हैं।
सर्वर से भेजे गए इवेंट - एक तरह से मैसेजिंग
सर्वर द्वारा भेजी गई घटना तब होती है जब एक वेब पेज स्वचालित रूप से सर्वर से अपडेट प्राप्त करता है।
यह पहले भी संभव था, लेकिन वेब पेज को यह पूछना होगा कि क्या कोई अपडेट उपलब्ध था। सर्वर द्वारा भेजे गए ईवेंट के साथ, अपडेट स्वचालित रूप से आते हैं।
उदाहरण: फेसबुक/ट्विटर अपडेट, स्टॉक मूल्य अपडेट, समाचार फ़ीड, खेल परिणाम आदि।
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो सर्वर द्वारा भेजे गए ईवेंट का पूर्ण समर्थन करता है।
API | |||||
---|---|---|---|---|---|
SSE | 6.0 | 79.0 | 6.0 | 5.0 | 11.5 |
सर्वर से भेजे गए ईवेंट सूचनाएं प्राप्त करें
EventSource ऑब्जेक्ट का उपयोग सर्वर द्वारा भेजी गई ईवेंट सूचनाएँ प्राप्त करने के लिए किया जाता है:
उदाहरण
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
उदाहरण समझाया:
- एक नया EventSource ऑब्जेक्ट बनाएं, और अपडेट भेजने वाले पृष्ठ का URL निर्दिष्ट करें (इस उदाहरण में "demo_sse.php")
- हर बार जब कोई अपडेट प्राप्त होता है, तो ऑनमेसेज इवेंट होता है
- जब कोई ऑनमेसेज घटना होती है, तो प्राप्त डेटा को आईडी = "परिणाम" के साथ तत्व में डालें
सर्वर-भेजे गए ईवेंट समर्थन की जाँच करें
ऊपर दिए गए उदाहरण में सर्वर द्वारा भेजे गए ईवेंट के लिए ब्राउज़र समर्थन की जाँच करने के लिए कोड की कुछ अतिरिक्त पंक्तियाँ थीं:
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code.....
}
else {
// Sorry! No server-sent events support..
}
सर्वर-साइड कोड उदाहरण
काम करने के लिए ऊपर के उदाहरण के लिए, आपको डेटा अपडेट (जैसे 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()
%>
कोड समझाया:
- "सामग्री-प्रकार" शीर्षलेख को "पाठ/ईवेंट-स्ट्रीम" पर सेट करें
- निर्दिष्ट करें कि पृष्ठ को कैश नहीं करना चाहिए
- भेजने के लिए डेटा आउटपुट करें ( हमेशा "डेटा:" से शुरू करें)
- आउटपुट डेटा को वेब पेज पर वापस फ्लश करें
इवेंटसोर्स ऑब्जेक्ट
ऊपर के उदाहरणों में हमने संदेश प्राप्त करने के लिए ऑनमेसेज ईवेंट का उपयोग किया है। लेकिन अन्य कार्यक्रम भी उपलब्ध हैं:
Events | Description |
---|---|
onopen | When a connection to the server is opened |
onmessage | When a message is received |
onerror | When an error occurs |