JavaScript में Server-Sent Events: WebSocket के बिना रियल-टाइम डेटा

Server-Sent Events (SSE) क्या है और इसकी आवश्यकता क्यों है?

\n\n

कल्पना करें: आपने एक करेंसी रेट वेबसाइट खोली है, और डॉलर का रेट आपकी आँखों के सामने बदल रहा है — बिना पेज रिफ्रेश किए, बिना कोई बटन दबाए। या फिर आप सर्वर पर किसी बड़ी फाइल के प्रोसेसिंग रिजल्ट का इंतज़ार कर रहे हैं, और अचानक एक लाइन आती है: "70% तैयार"। यह कैसे काम करता है? सबसे सरल और प्रभावी तरीकों में से एक है Server-Sent Events (SSE)।

\n\n

SSE एक ऐसी तकनीक है जो सर्वर को खुद से क्लाइंट को डेटा भेजने की अनुमति देती है, जैसे ही वह डेटा उपलब्ध होता है। WebSocket के विपरीत, SSE केवल एक दिशा में काम करता है — सर्वर से क्लाइंट की ओर। लेकिन यही इसकी सबसे बड़ी ताकत है: यह अविश्वसनीय रूप से सरल, कुशल है और उन कार्यों के लिए एकदम सही है जहाँ क्लाइंट को केवल अपडेट प्राप्त करने की आवश्यकता होती है।

\n\n

इस लेख में हम समझेंगे कि JavaScript में Server-Sent Events का उपयोग कैसे करें, एक काम करने वाला कोड लिखेंगे और जानेंगे कि SSE कब सबसे अच्छा विकल्प है, और कब WebSocket का उपयोग करना चाहिए। तैयार हैं? चलिए शुरू करते हैं!

\n\n

Server-Sent Events (SSE) कैसे काम करता है?

\n\n

तकनीकी रूप से, SSE सिर्फ एक HTTP कनेक्शन है जिसे सर्वर रिस्पॉन्स भेजने के बाद बंद नहीं करता। इसके बजाय, वह विशेष text/event-stream फॉर्मेट का उपयोग करके डेटा को टुकड़ों में भेजता है। क्लाइंट (ब्राउज़र) EventSource ऑब्जेक्ट के माध्यम से इस कनेक्शन को सुनता है और हर नए मैसेज पर इवेंट जनरेट करता है।

\n\n

सर्वर का एक सामान्य रिस्पॉन्स कुछ इस तरह दिखता है:

\n\n

data: {"message": "नमस्ते!", "timestamp": 1700000000}\n\ndata: {"message": "नई सूचना", "timestamp": 1700000001}

\n\n

हर मैसेज data: से शुरू होता है, उसके बाद एक स्पेस और कंटेंट होता है। मैसेज को दो न्यूलाइन कैरेक्टर \\n\\n से अलग किया जाता है। सर्वर आईडी (id:) और इवेंट टाइप (event:) भी भेज सकता है, लेकिन न्यूनतम सेट data ही है।

\n\n

क्लाइंट साइड और भी सरल है:

\n\n

const eventSource = new EventSource('/events');\n\neventSource.onmessage = (e) => {\n    console.log('डेटा प्राप्त हुआ:', e.data);\n};\n\neventSource.onerror = (e) => {\n    console.error('कनेक्शन में त्रुटि', e);\n};

\n\n

बस इतना ही! कोई जटिल हैंडशेक नहीं, कोई लाइब्रेरी नहीं — ब्राउज़र खुद ही कनेक्शन टूटने पर फिर से जुड़ जाता है, खुद ही कनेक्शन लॉस को हैंडल करता है। यही Server-Sent Events का असली जादू है।

\n\n

SSE बनाम WebSocket: कब क्या चुनें?

\n\n

अक्सर शुरुआती सोचते हैं: "चूँकि SSE सरल है, तो यह हमेशा बेहतर है।" लेकिन ऐसा नहीं है। हर तकनीक का अपना उपयोग है। आइए तुलना करें।

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

विशेषता	SSE	WebSocket
डेटा की दिशा	केवल सर्वर → क्लाइंट	दो-तरफा
कार्यान्वयन में आसानी	बहुत आसान (नेटिव ब्राउज़र)	मध्यम (लाइब्रेरी चाहिए)
ऑटोमैटिक रीकनेक्ट	बिल्ट-इन	मैन्युअल करना पड़ता है
ब्राउज़र सपोर्ट	सभी आधुनिक ब्राउज़र (IE को छोड़कर)	ब्लॉग पुस्तक अनुशंसाएँ TypeScript कोड का रिफैक्टरिंग: गुणवत्ता और रखरखाव क्षमता बढ़ाना एसिंक्रोनस C# (.NET): पूर्ण गाइड C# (.NET) और डेटाबेस: एक व्यावहारिक मार्गदर्शिका Optimizing Java: Java अनुप्रयोगों के प्रदर्शन अनुकूलन के लिए व्यावहारिक मार्गदर्शिका यह भी पढ़ें PHP में फ़ोल्डर बनाएँ यदि वह मौजूद नहीं है: 2025 के 5 सर्वश्रेष्ठ तरीके Rust में डिज़ाइन पैटर्न: कब और क्यों उनका उपयोग करें Python से इंटरनेट पर रिक्वेस्ट कैसे भेजें? (पूरी गाइड) रूस में PHP डेवलपर्स के वेतन: उन्नत स्तर के लिए बाजार का अवलोकन TypeScript में कॉन्करेंसी: थ्रेड्स, गोरूटीन्स और async/await — प्रैक्टिकल गाइड 🍪 Сначала примите условия Чтобы войти на сайт, необходимо принять соглашение об использовании файлов cookie. Мы используем их для авторизации и улучшения работы сайта. Политика конфиденциальности Принять и продолжить Закрыть 🍪 Мы используем файлы cookie для авторизации, аналитики и улучшения работы сайта. Продолжая пользоваться сайтом, вы соглашаетесь с нашей политикой конфиденциальности. Принять Только необходимые