TypeScript में Server-Sent Events: वास्तविक प्रोजेक्ट्स के लिए चरण-दर-चरण गाइड

शुरुआती लोगों के लिए ऑनलाइन Python प्रशिक्षक

Python आसानी से सीखें बिना सिद्धांत के बोझ के। स्वचालित जांच के साथ व्यावहारिक कार्य हल करें और ब्राउज़र में सीधे कोड लिखें।

पाठ्यक्रम शुरू करें

TypeScript में Server-Sent Events: बिना सिरदर्द के डेटा स्ट्रीमिंग

\n\n

कल्पना करें: आपका सर्वर डेटा जनरेट कर रहा है — लॉग्स, नोटिफिकेशन, करेंसी रेट अपडेट — और इसे तुरंत फ्रंटएंड पर भेजना चाहता है। WebSocket? शक्तिशाली है, लेकिन ओवरकिल है। Polling? धीमा है और डेटा खर्च करता है। एक तीसरा रास्ता है — सुरुचिपूर्ण, सरल और अविश्वसनीय रूप से उपयोगी: Server-Sent Events (SSE).

\n\n

इस लेख में हम TypeScript में SSE को पूरी तरह से समझेंगे। क्लाइंट और सर्वर लिखेंगे, एरर हैंडलिंग और रीकनेक्ट करना सीखेंगे, और सबसे महत्वपूर्ण बात — यह समझेंगे कि SSE वास्तव में दूसरे तरीकों से कब बेहतर है। चलिए शुरू करते हैं!

\n\n

Server-Sent Events क्या है और इसकी ज़रूरत क्यों है?

\n\n

Server-Sent Events एक HTML5 स्टैंडर्ड है जो सर्वर को एक HTTP कनेक्शन पर रियल-टाइम में क्लाइंट को डेटा भेजने की अनुमति देता है। WebSocket के विपरीत, SSE एकतरफा है: केवल सर्वर ही संदेश भेजता है। लेकिन यही इसकी ताकत है — यह बेहद सरल है और इसके लिए किसी अतिरिक्त लाइब्रेरी की ज़रूरत नहीं है।

\n\n

SSE का उपयोग कब करें?

\n\n

एकतरफा स्ट्रीमिंग: नोटिफिकेशन, लॉग्स, करेंसी रेट, स्टॉक टिकर।
आसान इंटीग्रेशन: ब्राउज़र में स्टैंडर्ड EventSource के साथ काम करता है — किसी npm पैकेज की ज़रूरत नहीं।
ऑटोमैटिक रीकनेक्ट: कनेक्शन टूटने पर ब्राउज़र खुद ही इसे रीस्टोर करता है।
HTTP/2 के साथ संगतता: मल्टीप्लेक्सिंग में कोई दिक्कत नहीं, WebSocket के विपरीत।

\n\n

लेकिन याद रखें: SSE क्लाइंट से सर्वर पर डेटा नहीं भेज सकता (इसके लिए सामान्य POST रिक्वेस्ट का उपयोग करें) और पुराने ब्राउज़रों (जैसे IE) में सपोर्ट नहीं होता।

\n\n

सर्वर साइड: TypeScript + Express में SSE लिखना

\n\n

बैकएंड से शुरू करते हैं। Node.js पर Express और TypeScript के साथ एक सरल सर्वर बनाएं। डिपेंडेंसी इंस्टॉल करें:

\n\n

npm init -y\nnpm install express cors\nnpm install -D typescript @types/express @types/node ts-node\nnpx tsc --init

\n\n

अब सर्वर लिखते हैं। मुख्य बिंदु — सही हेडर सेट करना और मैसेज फॉर्मेट है।

\n\n

// server.ts\nimport express, { Request, Response } from 'express';\nimport cors from 'cors';\n\nconst app = express();\napp.use(cors());\n\n// SSE के लिए एंडपॉइंट\napp.get('/events', (req: Request, res: Response) => {\n  // SSE के लिए हेडर सेट करें\n  res.writeHead(200, {\n    'Content-Type': 'text/event-stream',\n    'Cache-Control': 'no-cache',\n    'Connection': 'keep-alive',\n  });\n\n  // शुरुआती संदेश भेजें\n  res.write('data: {"message": "कनेक्शन स्थापित हो गया"}\\n\\n');\n\n  // हर 3 सेकंड में इवेंट भेजें\n  const intervalId = setInterval(() => {\n    const data = JSON.stringify({\n      time: new Date().toISOString(),\n      value: Math.random() * 100,\n    });\n    res.write(`data: ${data}\\n\\n`);\n  }, 3000);\n\n  // क्लाइंट के डिस्कनेक्ट को हैंडल करें\n  req.on('close', () => {\n    clearInterval(intervalId);\n    res.end();\n    console.log('क्लाइंट डिस्कनेक्ट हो गया');\n  });\n});\n\nconst PORT = 3000;\napp.listen(PORT, () => console.log(`SSE सर्वर पोर्ट ${PORT} पर शुरू हुआ`));

\n\n

फॉर्मेट पर ध्यान दें: हर संदेश data: से शुरू होता है और दो लाइन ब्रेक \\n\\n के साथ समाप्त होता है। आप id, event और retry भी निर्दिष्ट कर सकते हैं — लेकिन यह बेसिक है।

\n\n

नामांकित इवेंट भेजना

\n\n

कभी-कभी संदेशों के प्रकारों में अंतर करना ज़रूरी होता है। event फील्ड जोड़ें:

\n\n

res.write('event: update\\n');\nres.write(`data: ${JSON.stringify({ id: 1, title: 'नई पोस्ट' })}\\n\\n`);\n\n// और फिर — दूसरा इवेंट\nres.write('event: notification\\n');\nres.write('data: {"level": "info", "text": "सर्वर काम कर रहा है"}\\n\\n');

\n\n

क्लाइंट पर हम विशिष्ट इवेंट्स को सब्सक्राइब कर सकेंगे।

\n\n