TypeScript पर WebSocket: Real-Time एप्लिकेशन बनाना

TypeScript पर WebSocket: real-time एप्लिकेशन बनाना

आधुनिक वेब एप्लिकेशन को क्लाइंट और सर्वर के बीच तत्काल डेटा आदान-प्रदान की आवश्यकता होती है। WebSocket प्रोटोकॉल एक स्थायी द्विदिश कनेक्शन प्रदान करता है, जो इसे चैट, सूचना प्रणाली, ऑनलाइन गेम और अन्य real-time सेवाओं के निर्माण के लिए आदर्श बनाता है। इस लेख में, हम विस्तार से जानेंगे कि TypeScript पर WebSocket के साथ कैसे काम करें - सर्वर सेटअप से लेकर क्लाइंट कार्यान्वयन तक।

WebSocket क्या है और इसकी आवश्यकता क्यों है?

WebSocket एक संचार प्रोटोकॉल है जो एक एकल TCP कनेक्शन पर पूर्ण-द्वैध चैनल प्रदान करता है। पारंपरिक HTTP के विपरीत, जहां क्लाइंट अनुरोध भेजता है और प्रतिक्रिया की प्रतीक्षा करता है, WebSocket सर्वर को क्लाइंट को स्वतंत्र रूप से डेटा भेजने की अनुमति देता है।

WebSocket के मुख्य लाभ:

• स्थायी कनेक्शन — प्रत्येक अनुरोध के लिए नया कनेक्शन स्थापित करने की आवश्यकता नहीं है
• कम विलंबता — HTTP हेडर के ओवरहेड के बिना डेटा तुरंत स्थानांतरित होता है
• द्विदिश संचार — सर्वर क्लाइंट के अनुरोध के बिना डेटा भेज सकता है
• दक्षता — polling समाधानों की तुलना में कम ट्रैफ़िक

WebSocket का व्यापक रूप से वित्तीय एप्लिकेशन (स्टॉक कोट्स), सोशल नेटवर्क (रीयल-टाइम लाइक, कमेंट), मल्टीप्लेयर गेम, मॉनिटरिंग सिस्टम और IoT में उपयोग किया जाता है।

TypeScript पर WebSocket सर्वर सेटअप करना

सर्वर बनाने के लिए हम लोकप्रिय लाइब्रेरी ws का उपयोग करेंगे। इसे npm के माध्यम से इंस्टॉल करें:

npm init -ynpm install wsnpm install -D typescript @types/ws @types/nodenpx tsc --init

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

import { WebSocketServer, WebSocket } from 'ws';

const PORT = 8080;const wss = new WebSocketServer({ port: PORT });

interface CustomMessage {  type: string;  payload: any;}

wss.on('connection', (ws: WebSocket) => {  console.log('नया क्लाइंट कनेक्ट हुआ');

  // स्वागत संदेश भेजें  const welcomeMessage: CustomMessage = {    type: 'welcome',    payload: { message: 'सर्वर में आपका स्वागत है!' }  };  ws.send(JSON.stringify(welcomeMessage));

  // आने वाले संदेशों को संसाधित करना  ws.on('message', (data: Buffer) => {    try {      const message: CustomMessage = JSON.parse(data.toString());            switch (message.type) {        case 'chat':          // सभी कनेक्टेड क्लाइंट को संदेश प्रसारित करें          broadcast(message, ws);          break;        case 'ping':          ws.send(JSON.stringify({ type: 'pong', payload: {} }));          break;        default:          console.log('अज्ञात संदेश प्रकार:', message.type);      }    } catch (error) {      console.error('संदेश प्रसंस्करण में त्रुटि:', error);    }  });

  ws.on('close', () => {    console.log('क्लाइंट डिस्कनेक्ट हो गया');  });

  ws.on('error', (error: Error) => {    console.error('WebSocket त्रुटि:', error);  });});

function broadcast(message: CustomMessage, sender: WebSocket) {  wss.clients.forEach((client) => {    if (client !== sender && client.readyState === WebSocket.OPEN) {      client.send(JSON.stringify(message));    }  });}

console.log(`WebSocket सर्वर ws://localhost:${PORT} पर शुरू हुआ`);

सर्वर को npx ts-node server.ts कमांड से चलाएं। सर्वर पोर्ट 8080 पर सुनेगा और आने वाले कनेक्शनों को संसाधित करेगा।

TypeScript पर WebSocket क्लाइंट बनाना

क्लाइंट भाग को ब्राउज़र और Node.js दोनों के लिए कार्यान्वित किया जा सकता है। आइए दोनों विकल्पों पर विचार करें।

ब्राउज़र क्लाइंट

वेब एप्लिकेशन में उपयोग के लिए एक फ़ाइल client.ts बनाएं:

class WebSocketClient {  private socket: WebSocket;  private url: string;

  constructor(url: string) {    this.url = url;    this.socket = new WebSocke
```