EventSource के साथ React में SSE स्ट्रीम का उपयोग

new EventSource(url) निर्दिष्ट URL से SSE कनेक्शन बनाता है। ब्राउज़र तुरंत Accept: text/event-stream हेडर के साथ HTTP GET अनुरोध खोलता है। सर्वर इस कनेक्शन को खुला रखता है और घटनाओं की धाराएँ भेजता रहता है। EventSource ब्राउज़र में पहले से उपलब्ध API है—मूल उपयोग के लिए किसी लाइब्रेरी की आवश्यकता नहीं होती।

EventSource की तीन ready states होती हैं: 0 (CONNECTING) — कनेक्शन स्थापित या पुनःस्थापित किया जा रहा है, 1 (OPEN) — कनेक्शन स्थापित है और घटनाएँ प्रवाहित हो रही हैं, 2 (CLOSED) — कनेक्शन बंद है और फिर से कनेक्ट नहीं होगा। वर्तमान स्थिति जानने के लिए eventSource.readyState जाँचें।

eventSource.onmessage हैंडलर उन सर्वर घटनाओं के लिए सक्रिय होता है जिनका कोई स्पष्ट इवेंट प्रकार नहीं होता, यानी सर्वर event: फ़ील्ड के बिना data: ... भेजता है। हैंडलर को एक इवेंट ऑब्जेक्ट मिलता है, जिसमें event.data स्ट्रिंग के रूप में डेटा होता है। सर्वर आमतौर पर डेटा पर JSON.stringify का उपयोग करता है, इसलिए प्राप्त होने पर आप उसे JSON.parse कर सकते हैं।

सर्वर नाम वाली घटनाएँ भेज सकता है: event: userJoined data: {"userId": "123"} । ब्राउज़र में eventSource.addEventListener('userJoined', handler) के साथ सुनें। इससे एक ही SSE कनेक्शन पर कई इवेंट प्रकारों को मल्टीप्लेक्स किया जा सकता है—हर इवेंट प्रकार का अपना हैंडलर होता है, जिससे कोड साफ़ और व्यवस्थित रहता है।

SSE डेटा स्ट्रिंग के रूप में आता है। संरचित डेटा के लिए सर्वर JSON.stringify(payload) भेजता है और क्लाइंट उसे इस प्रकार पार्स करता है: const data = JSON.parse(event.data)। सर्वर से मिले गलत JSON को सहजता से सँभालने के लिए JSON.parse को हमेशा try/catch में रखें, त्रुटि की लॉगिंग करें और गलत इवेंट को छोड़ दें।

useEffect के अंदर EventSource बनाएँ और बंद करें: कॉम्पोनेंट माउंट होने पर कनेक्शन बनाएँ, इवेंट हैंडलर जोड़ें और एक क्लीनअप फ़ंक्शन लौटाएँ जो eventSource.close() को कॉल करे। क्लीनअप के बिना कॉम्पोनेंट अनमाउंट होने, उपयोगकर्ता के दूसरे पृष्ठ पर जाने या अलग निर्भरताओं के साथ इफ़ेक्ट के दोबारा चलने पर कनेक्शन लीक हो जाता है।

eventSource.onmessage हैंडलर के अंदर नया डेटा दिखाने के लिए React की स्थिति अपडेट करें: setMessages(prev => [...prev, JSON.parse(event.data)])। पुरानी क्लोज़र समस्या से बचने के लिए setState के फ़ंक्शनल रूप का उपयोग करें—इवेंट हैंडलर शुरुआती स्थिति मान को पकड़ लेता है, जबकि फ़ंक्शनल अपडेट यह सुनिश्चित करता है कि आप हमेशा नवीनतम स्थिति में बदलाव करें।

नेटवर्क त्रुटि या सर्वर के पुनःआरंभ होने के कारण कनेक्शन टूटने पर EventSource अपने-आप पुनःकनेक्ट हो जाता है। ब्राउज़र थोड़ी देर प्रतीक्षा करता है (आमतौर पर 3 सेकंड; स्ट्रीम में retry: 3000 के माध्यम से सर्वर द्वारा इसे विन्यस्त किया जा सकता है), फिर पुनःकनेक्ट करता है। आपको पुनःकनेक्शन तर्क लागू करने की आवश्यकता नहीं है — यह EventSource API में पहले से मौजूद है।

EventSource प्राप्त हुई अंतिम घटना की ID को ट्रैक करता है (सर्वर इसे स्ट्रीम में id: 123 के माध्यम से सेट करता है)। पुनःकनेक्ट करते समय ब्राउज़र इस ID को Last-Event-ID HTTP शीर्षलेख में अपने-आप भेजता है। अच्छी तरह डिज़ाइन किया गया सर्वर इसका उपयोग छूटी हुई घटनाओं को फिर से भेजने के लिए करता है, ताकि पुनःकनेक्शन के दौरान कोई घटना न छूटे।

EventSource सीधे कस्टम शीर्षलेखों का समर्थन नहीं करता। प्रमाणीकरण के लिए कुकीज़ का उपयोग करें (new EventSource(url, { withCredentials: true }) कुकीज़ भेजता है) या प्रमाणीकरण टोकन को URL क्वेरी पैरामीटर के रूप में शामिल करें। यदि आपको प्राधिकरण शीर्षलेखों की आवश्यकता है, तो SSE प्रतिक्रिया को मैन्युअल रूप से संसाधित करने के लिए EventSource के बजाय Fetch API के साथ ReadableStream का उपयोग करें।

जब EventSource को कोई त्रुटि मिलती है, तो onerror हैंडलर सक्रिय हो जाता है। readyState CONNECTING होगा (यदि पुनःप्रयास किया जाएगा) या CLOSED होगा (यदि नहीं किया जाएगा)। onerror में readyState जाँचकर अस्थायी नेटवर्क त्रुटि (जिस पर अपने-आप पुनःप्रयास होगा) और स्थायी विफलता (सर्वर ने 200 के अलावा कोई स्थिति लौटाई) के बीच अंतर करें। स्थायी त्रुटियों के लिए कनेक्शन बंद करें और उपयोगकर्ता को सूचित करें।

new EventSource(url) से readyStates: CONNECTING, OPEN, CLOSED वाला SSE कनेक्शन बनता है। onmessage सामान्य घटनाओं को संभालता है; addEventListener नामित घटना प्रकारों को संभालता है। JSON.parse(event.data) संरचित पेलोड निकालता है। useEffect में EventSource बनाएँ और उसकी सफ़ाई करें। स्वचालित पुनःकनेक्शन अंतर्निहित है — EventSource नेटवर्क त्रुटियों के बाद छूटी हुई घटनाओं को फिर से भेजने के लिए Last-Event-ID के साथ पुनःप्रयास करता है। कुकीज़ (withCredentials) या URL क्वेरी पैरामीटर के माध्यम से प्रमाणीकरण करें।