HTML SSE

सोचिए आप किसी ज़रूरी पैकेज के डिलीवर होने का इंतज़ार कर रहे हैं। आप हर पाँच मिनट में दरवाजे पर जाकर चेक कर सकते हैं कि डिलीवरी ट्रक आया या नहीं (इसे polling कहते हैं, और यह बहुत थकाने वाला है)। अब सोचिए आपके फोन पर एक डायरेक्ट notification सिस्टम है। आप सोफे पर आराम कर सकते हैं, और जैसे ही आपका पैकेज डिलीवर होता है, डिलीवरी सर्विस अपने-आप आपकी स्क्रीन पर सीधे notification भेज देती है। HTML Server-Sent Events (SSE) बिल्कुल यही करते हैं। ये आपके सर्वर से आपके ब्राउज़र तक एक डायरेक्ट, one-way कनेक्शन बनाते हैं, जिससे सर्वर बिना ब्राउज़र को रीलोड कराए रियल-टाइम अपडेट्स (जैसे प्रोग्रेस बार या सिस्टम अलर्ट्स) सीधे आपके पेज पर पुश कर सकता है।

const source = new EventSource("url");
source.onmessage = (event) => { /* event.data */ };

<script>
  const source = new EventSource('/updates');
</script>

<script>
  const source = new EventSource('/stream.php');
</script>

<script>
  const source = new EventSource('/stream.php');
  source.onmessage = function (event) {
    console.log(event.data);
  };
</script>

<script>
  const source = new EventSource('/stream.php');
  source.onerror = function () {
    console.log('Connection lost, browser will retry automatically');
  };
</script>

<!-- Server response headers: Content-Type: text/event-stream -->
<!-- Server response body: data: Hello\n\n -->
<script>
  const source = new EventSource('/stream.php');
</script>