HTML5 में सर्वर-सेंट इवेंट्स कैसे हैंडल करें?

सर्वर-सेंट इवेंट्स (SSE) हैंडल करना

HTML5 में सर्वर-सेंट इवेंट्स हैंडल करने के लिए निम्न कोड चलाएं:

<!DOCTYPE HTML>
<html>
  <head>
    <script>
      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>

आधुनिक SSE API (EventSource)

<eventsource> टैग **अप्रचलित** है। आधुनिक कोड EventSource JavaScript API का उपयोग करता है:

<!DOCTYPE html>
<html>
<body>
  <div id="ticker">कनेक्ट हो रहा है...</div>
  <script>
    const evtSource = new EventSource("/api/time-stream");
    
    evtSource.onmessage = (event) => {
      document.getElementById('ticker').textContent = event.data;
    };
    
    evtSource.addEventListener("server-time", (event) => {
      console.log('कस्टम इवेंट:', event.data);
    });
    
    evtSource.onerror = (err) => {
      console.error('SSE त्रुटि:', err);
    };
  </script>
</body>
</html>

SSE विशेषताएं

• एकतरफा - केवल सर्वर → क्लाइंट
• स्वचालित पुनर्संयोजन - ब्राउज़र स्वचालित रूप से पुनः कनेक्ट करता है
• HTTP/HTTPS पर - मौजूदा इंफ्रास्ट्रक्चर पर काम करता है
• टेक्स्ट-आधारित - UTF-8 डेटा स्ट्रीम
• Content-Type: text/event-stream हेडर आवश्यक