TypeScript पर WebSocket: आरंभ से अंत तक रियल-टाइम एप्लिकेशन

रियल-टाइम एप्लिकेशन के लिए WebSocket और TypeScript का परिचय

आधुनिक वेब एप्लिकेशनों में क्लाइंट और सर्वर के बीच तत्काल डेटा आदान-प्रदान की आवश्यकता बढ़ती जा रही है। पारंपरिक HTTP प्रोटोकॉल, जो "अनुरोध-प्रतिक्रिया" सिद्धांत पर काम करता है, उन कार्यों के लिए उपयुक्त नहीं है जहाँ सूचना वितरण की गति महत्वपूर्ण है: ऑनलाइन चैट, स्टॉक कोटेशन, मल्टीप्लेयर गेम या मॉनिटरिंग सिस्टम। यहीं पर WebSocket मदद करता है — एक प्रोटोकॉल जो स्थायी द्विदिश कनेक्शन प्रदान करता है।

TypeScript — JavaScript का एक सख्ती से टाइप किया गया सुपरसेट — के साथ मिलकर WebSocket एप्लिकेशन का विकास न केवल कुशल बल्कि सुरक्षित भी हो जाता है। TypeScript कंपाइलेशन चरण में त्रुटियों का पता लगाने, कोड की पठनीयता में सुधार और रिफैक्टरिंग को सरल बनाने में मदद करता है। इस लेख में, हम TypeScript के साथ WebSocket पर रियल-टाइम एप्लिकेशन बनाने के पूरे चक्र को समझेंगे: सिद्धांत से लेकर व्यावहारिक उदाहरणों तक।

WebSocket की मूल बातें: प्रोटोकॉल कैसे काम करता है

WebSocket क्या है?

WebSocket (RFC 6455) एक प्रोटोकॉल है जो क्लाइंट (ब्राउज़र) और सर्वर के बीच एक स्थायी कनेक्शन स्थापित करता है। हैंडशेक के बाद, डेटा बिना बार-बार HTTP अनुरोधों के दोनों दिशाओं में प्रेषित किया जा सकता है। इससे विलंबता और नेटवर्क लोड कम होता है।

HTTP से अंतर

\n
• HTTP: क्लाइंट अनुरोध शुरू करता है → सर्वर उत्तर देता है → कनेक्शन बंद हो जाता है (या अगले अनुरोधों के लिए खुला रहता है, लेकिन फिर भी क्लाइंट द्वारा शुरू किया जाता है)।
\n
• WebSocket: कनेक्शन स्थापित होने के बाद, सर्वर किसी भी समय क्लाइंट को डेटा भेज सकता है (push सूचनाएँ)।
\n

WebSocket कनेक्शन का जीवनचक्र

\n
1. हैंडशेक: क्लाइंट Upgrade: websocket हेडर के साथ HTTP अनुरोध भेजता है। सर्वर कोड 101 Switching Protocols के साथ उत्तर देता है।
\n
2. डेटा आदान-प्रदान: सफल हैंडशेक के बाद, कनेक्शन WebSocket प्रोटोकॉल पर स्विच हो जाता है। डेटा फ्रेम के रूप में प्रेषित होता है।
\n
3. समापन: कोई भी पक्ष एक विशेष नियंत्रण फ्रेम भेजकर कनेक्शन बंद करने की पहल कर सकता है।
\n

TypeScript पर WebSocket सर्वर बनाना

लाइब्रेरी का चयन

सर्वर पक्ष के लिए, हम लोकप्रिय लाइब्रेरी ws का उपयोग करेंगे — Node.js के लिए एक हल्का और तेज़ WebSocket कार्यान्वयन। इसे TypeScript के लिए प्रकारों के साथ स्थापित करें:

npm install ws\nnpm install -D @types/ws

बेसिक सर्वर

एक फ़ाइल server.ts बनाएँ:

import { WebSocketServer, WebSocket } from 'ws';\n\nconst PORT = 8080;\nconst wss = new WebSocketServer({ port: PORT });\n\nconsole.log(`WebSocket सर्वर ws://localhost:${PORT} पर शुरू हुआ`);\n\nwss.on('connection', (ws: WebSocket) => {\n  console.log('नया कनेक्शन');\n\n  // स्वागत संदेश भेजें\n  ws.send('सर्वर में आपका स्वागत है!');\n\n  // आने वाले संदेशों को संसाधित करें\n  ws.on('message', (message: Buffer) => {\n    const text = message.toString();\n    console.log(`प्राप्त: ${text}`);\n\n    // इको उत्तर\n    ws.send(`इको: ${text}`);\n  });\n\n  // कनेक्शन बंद होने को संसाधित करें\n  ws.on('close', () => {\n    console.log('क्लाइंट डिस्कनेक्ट हो गया');\n  });\n\n  // त्रुटियों को संसाधित करें\n  ws.on('error', (error: Error) => {\n    console.error('WebSocket त्रुटि:', error);\n  });\n});

विभिन्न प्रकार के संदेशों को संसाधित करना

वास्तविक एप्लिकेशनों में, संदेश अक्सर JSON प्रारूप में संरचित होते हैं। एक टाइप किया गया हैंडलर बनाएँ:

interface ChatMessage {\n  type: 'message' | 'join' | 'leave';\n  username: string;\n  content?: string;\n  timestamp: number;\n}\n\nwss.on('connection', (ws: WebSocket) => {\n  ws.on('message', (data: Buffer) => {\n    try {\n      const msg: ChatMessage = JSON.parse(data.toString());\n      \n      switch (msg.type) {\n        case 'join':\n          console.log(`${msg.username} शामिल हुआ`);