HTML5 में सर्वर-सेंट इवेंट्स कैसे काम करते हैं?

सर्वर-सेंट इवेंट्स मानकीकृत करते हैं कि हम सर्वर से क्लाइंट तक डेटा कैसे स्ट्रीम करते हैं। वेब एप्लिकेशन में सर्वर-सेंट इवेंट्स का उपयोग करने के लिए, आपको डॉक्यूमेंट में <eventsource> एलिमेंट जोड़ना होगा।

<eventsource> एलिमेंट का src एट्रिब्यूट एक URL की ओर इशारा करना चाहिए जो एक स्थायी HTTP कनेक्शन प्रदान करे जो इवेंट्स युक्त डेटा स्ट्रीम भेजता है।

URL एक PHP, PERL या किसी Python स्क्रिप्ट की ओर इशारा करेगा जो इवेंट डेटा को लगातार भेजने का ध्यान रखेगा। यहां एक सरल उदाहरण है जो सर्वर टाइम की अपेक्षा करेगा।

उदाहरण

HTML5 में सर्वर-सेंट इवेंट्स का उपयोग करना सीखने के लिए निम्न कोड चलाएं:

<!DOCTYPE HTML> <html>    <head>       <script type="text/javascript">          document.getElementsByTagName("eventsource")[0].addEventListener("server-time", eventHandler, false);          function eventHandler(event) {             // सर्वर द्वारा भेजा गया समय अलर्ट करें             document.querySelector('#ticker').innerHTML = event.data;          }       </script>    </head>    <body>       <div id="sse">          <eventsource src="/cgi-bin/ticker.cgi" />       </div>       <div id="ticker" name="ticker">          [TIME]       </div>    </body> </html>

अंत में, Perl में लिखी गई ticker.cgi:

#!/usr/bin/perl
print "Content-Type: text/event-stream\n\n";
while(true) {
  print "Event: server-time\n";
  $time = localtime();
  print "Data: $time\n";
  sleep(5);
}

महत्वपूर्ण: <eventsource> एलिमेंट अब डिप्रिकेटेड है। आधुनिक ब्राउज़र्स में EventSource JavaScript API का उपयोग करें।