HTML Server-Sent इवेंट

Server-Sent इवेंट वेबपेज को सर्वर से अपडेट प्राप्त करने की अनुमति देता है。

Server-Sent इवेंट - एक दिशा में मैसेजिंग

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 इवेंट होने पर, प्राप्त डाटा को "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 जब त्रुटि होती है