HTML Server-Sent Events (SSE)
पहले Web Workers जावास्क्रिप्ट को बैकग्राउंड थ्रेड में चलाते और postMessage से पेज से बात करते थे — स्थानीय CPU, बिना सर्वर स्ट्रीम। यह पाठ ऑफ-थ्रेड गणना छोड़कर SSE पेश करता है: सर्वर HTTP पर टेक्स्ट अपडेट पुश करता है। दायरा व्यावहारिक — खोलें, सुनें, एकतरफ़ा पुश — Node स्ट्रीम सर्वर नहीं।
HTML कोर्स में SSE क्यों
शुरुआती को कस्टम सॉकेट प्रोटोकॉल के बिना लाइव स्कोर/लॉग चाहिए। SSE HTTP पर टेक्स्ट पुश का पहला आम API है। Workers के बाद विभाजन अलग है: सर्वर स्ट्रीम का मालिक; पेज स्क्रिप्ट EventSource और DOM की।
सीधा उत्तर
1) new EventSource("/events")। 2) onmessage और e.data। 3) DOM पेज पर अपडेट करें। 4) onerror। 5) एकतरफ़ा। 6) डुप्लेक्स के लिए WebSockets; दुर्लभ के लिए polling; स्थानीय CPU के लिए Workers।
📊 SSE vs WebSocket vs Worker
| Topic | SSE (this lesson) | WebSocket | Web Worker (prev) |
|---|---|---|---|
| Typical role | Server→browser text stream | Full duplex messages | Local off-thread compute |
| Browser entry | EventSource(url) | new WebSocket(url) | new Worker(url or Blob) |
| Direction | One-way (server push) | Two-way | Page ↔ worker (no server required) |
| Transport idea | HTTP text/event-stream | WS protocol | postMessage / onmessage |
| DOM updates | On the page script | On the page script | On the page script only |
| This course depth | Required (browser pattern) | Contrast only | Previous lesson |
| Not this lesson | Full backend stream servers | Chat product design | SharedWorker fleets |
छोटा EventSource सुनने का पैटर्न
केवल ब्राउज़र पक्ष। /events असली SSE एंडपॉइंट होना चाहिए; बिना सर्वर त्रुटि — फिर भी API आकार सिखाता है।
<pre id="out">Waiting for stream…</pre>
<script>
const out = document.getElementById("out");
const es = new EventSource("/events");
es.onmessage = function (e) {
out.textContent = "Last update: " + e.data;
};
es.onerror = function () {
out.textContent = "SSE error or closed (need a real /events stream)";
};
</script>
सुनने के कॉल पढ़ना
- EventSource लंबा HTTP स्ट्रीम खोलता है
- message पर onmessage
- e.data टेक्स्ट पेलोड
- पेज pre में लिखता है
- Workers से अलग: बैकग्राउंड थ्रेड को postMessage नहीं
- बिना सर्वर onerror अपेक्षित
- परिचय छोटा रखें
स्ट्रीम पंक्तियाँ लॉग में जोड़ें
लाइव UI अक्सर हर इवेंट जोड़ते हैं। यह डेमो सूची में अंतिम पंक्तियाँ रखता है।
<ul id="log"></ul>
<script>
const log = document.getElementById("log");
const es = new EventSource("/events");
es.onmessage = function (e) {
const li = document.createElement("li");
li.textContent = e.data;
log.appendChild(li);
while (log.children.length > 5) {
log.removeChild(log.firstChild);
}
};
es.onerror = function () {
if (!log.dataset.noted) {
log.dataset.noted = "1";
const li = document.createElement("li");
li.textContent = "Stream not available — wire a text/event-stream URL";
log.appendChild(li);
}
};
</script>
लॉग विचार पढ़ना
- हर onmessage एक li बनाता है
- सूची सीमित करें
- अभी भी एकतरफ़ा
- Web Worker नहीं
- नामित इवेंट मौजूद; message काफी
- खत्म पर es.close()
- अगला: XHTML
SSE, polling, सॉकेट या worker चुनना
- HTTP पर बार-बार स्टेटस पुश: अच्छा SSE
- दुर्लभ अपडेट: polling काफी
- दोनों तरफ़ चैट: WebSockets
- भारी स्थानीय लूप: Workers थे
- कार्ड खींचना: DnD था
- बैकएंड स्ट्रीम एंडपॉइंट बनाना: इस परिचय से परे
अभ्यास — खोलें, सुनें, तुलना करें
- सुनने का स्निपेट पढ़ें।
- text/event-stream देखें।
- append-log पढ़ें।
- वाक्य: Workers स्थानीय; SSE सर्वर से।
- वाक्य: SSE एकतरफ़ा; WebSockets डुप्लेक्स।
- वैकल्पिक असली URL।
- आगे: XHTML।
आसान गलतियाँ
- EventSource से ब्राउज़र→सर्वर की उम्मीद
- Web Workers से मिलाना
- event-stream content-type भूलना
- बहुत दुर्लभ अपडेट के लिए SSE
- onerror अनदेखा
- परिचय को पूरा बैकएंड स्ट्रीमिंग कोर्स मानना
- EventSource को Worker/WebSocket से मिलाना
सारांश
- SSE HTTP पर सर्वर→ब्राउज़र टेक्स्ट स्ट्रीम करता है
- EventSource, onmessage/onerror; DOM पेज पर
- एकतरफ़ा पुश; डुप्लेक्स के लिए WebSockets
- Workers स्थानीय ऑफ-थ्रेड गणना थे; यह पाठ सर्वर पुश
- असली डेमो को text/event-stream चाहिए
- अगला: XHTML
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी