TypeScript में Long Polling vs WebSocket: रियल-टाइम के लिए क्या चुनें?

जब "लाइव" वेबसाइट को लाइव कोड की ज़रूरत होती है

कल्पना करें: आप TypeScript में एक मैसेंजर लिख रहे हैं। उपयोगकर्ता एक संदेश भेजता है — और दूसरे व्यक्ति को वह तुरंत दिखना चाहिए, बिना पेज रिफ्रेश किए। या एक स्टॉक मार्केट डैशबोर्ड, जहां शेयर की कीमत हर सेकंड बदलती है। या बस एक नोटिफिकेशन फीड जो अपने आप अपडेट होता है। इसे कैसे लागू करें? दो मुख्य विकल्प हैं — long polling और WebSocket। लेकिन कौन सा चुनें ताकि परफॉरमेंस खराब न हो और UX बिगड़े नहीं?

इस लेख में हम TypeScript पर वास्तविक उदाहरणों के साथ समझेंगे कि प्रत्येक तकनीक कैसे काम करती है, वे कहां चमकती हैं और कहां कमजोर पड़ती हैं। आपको सिर्फ थ्योरी नहीं, बल्कि Node.js और ब्राउज़र के लिए तैयार कोड भी मिलेगा। चलिए शुरू करते हैं!

TypeScript में Long Polling क्या है और यह कैसे काम करता है

Long polling, सामान्य HTTP अनुरोध का एक उन्नत रूप है। क्लाइंट सर्वर पर अनुरोध भेजता है, लेकिन अगर डेटा उपलब्ध नहीं है तो सर्वर तुरंत जवाब नहीं देता। वह कनेक्शन को तब तक खुला रखता है जब तक कोई नई घटना न हो। जैसे ही डेटा तैयार होता है — सर्वर जवाब भेजता है, क्लाइंट उसे प्रोसेस करता है और तुरंत एक नया अनुरोध बनाता है। यह चक्र दोहराया जाता है।

यह एक अस्थायी समाधान जैसा लगता है? कुछ हद तक हाँ। लेकिन यह सबसे सख्त कॉर्पोरेट प्रॉक्सी के माध्यम से भी काम करता है, जो WebSocket को ब्लॉक कर देते हैं।

TypeScript पर Long Polling का कार्यान्वयन (सर्वर साइड)

हम Express और TypeScript के साथ एक सरल सर्वर लिखेंगे। यह संदेशों की कतार का अनुकरण करेगा।

import express, { Request, Response } from 'express';\nimport cors from 'cors';\n\nconst app = express();\napp.use(cors());\napp.use(express.json());\n\n// संदेशों का भंडार (कतार का अनुकरण)\nconst messages: string[] = [];\n\n// Long polling के लिए एंडपॉइंट\napp.get('/poll', (req: Request, res: Response) => {\n  // नए संदेश के लिए 30 सेकंड तक प्रतीक्षा करें\n  const checkForMessage = () => {\n    if (messages.length > 0) {\n      // पहला संदेश भेजें और कतार से हटाएं\n      const message = messages.shift();\n      res.json({ data: message, timestamp: Date.now() });\n    } else {\n      // अगर कोई संदेश नहीं है — प्रतीक्षा जारी रखें\n      setTimeout(checkForMessage, 1000); // हर सेकंड जांचें\n    }\n  };\n\n  // अगर लंबे समय तक कोई संदेश नहीं आता है तो टाइमआउट\n  const timeout = setTimeout(() => {\n    res.json({ data: null, timeout: true });\n  }, 30000);\n\n  // अगर क्लाइंट डिस्कनेक्ट हो जाता है — टाइमर साफ करें\n  req.on('close', () => {\n    clearTimeout(timeout);\n  });\n\n  checkForMessage();\n});\n\n// संदेश भेजने के लिए एंडपॉइंट\napp.post('/send', (req: Request, res: Response) => {\n  const { message } = req.body;\n  if (message) {\n    messages.push(message);\n    res.status(200).json({ status: 'ok' });\n  } else {\n    res.status(400).json({ error: 'message is required' });\n  }\n});\n\napp.listen(3000, () => console.log('Long poll server on port 3000'));

TypeScript पर क्लाइंट साइड (ब्राउज़र)

async function startLongPolling() {\n  try {\n    const response = await fetch('http://localhost:3000/poll');\n    const data = await response.json();\n\n    if (data.data) {\n      console.log('नया संदेश:', data.data);\n      // UI अपडेट करें\n      updateUI(data.data);\n    }\n\n    // तुरंत नया poll शुरू करें\n    startLongPolling();\n  } catch (error) {\n    console.error('Long polling में त्रुटि:', error);\n    // 2 सेकंड प्रतीक्षा करें और पुनः प्रयास करें\n    setTimeout(startLongPolling, 2000);\n  }\n}\n\nfunction updateUI(message: string) {\n  // DOM अपडेट करने के लिए आपका कोड\n  const container = document.getElementById('messages');\n  if (container) {\n    const item = document.createElement('li');\n    item.textContent = message;\n    container.appendChild(item);\n  }\n}\n\n// पेज लोड होने पर शुरू करें\ndocument.addEventListener('DOMContentLoaded', startLongPolling);

निष्कर्ष: long polling को लागू करना आसान है और इसे विशेष प्रोटोकॉल की आवश्यकता नहीं है। लेकिन प्रत्येक अनुरोध में HTTP हेडर, कुकीज़ और अतिरिक्त ओवरहेड शामिल होते हैं। 1000 समवर्ती क्लाइंट के साथ