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

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

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

WebSocket क्या है और TypeScript क्यों?

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

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

interface ChatMessage {    type: 'message' | 'join' | 'leave';    user: string;    text?: string;    timestamp: number;}

interface ServerResponse {    status: 'ok' | 'error';    data?: ChatMessage;    error?: string;}

यह दृष्टिकोण कोड की डिबगिंग और रखरखाव को काफी सरल बनाता है।

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

सर्वर बनाने के लिए हम ws लाइब्रेरी का उपयोग करेंगे - Node.js के लिए WebSocket का लोकप्रिय कार्यान्वयन। डिपेंडेंसी इंस्टॉल करें:

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

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

import { WebSocketServer, WebSocket } from 'ws';

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

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

    // स्वागत संदेश भेजें    ws.send(JSON.stringify({        type: 'system',        message: 'चैट में आपका स्वागत है!'    }));

    // इनकमिंग संदेशों को संसाधित करें    ws.on('message', (data: Buffer) => {        try {            const message = JSON.parse(data.toString());            console.log('प्राप्त:', message);

            // सभी कनेक्टेड क्लाइंट्स को संदेश प्रसारित करें            wss.clients.forEach((client) => {                if (client.readyState === WebSocket.OPEN) {                    client.send(JSON.stringify({                        type: 'broadcast',                        user: message.user,                        text: message.text,                        timestamp: Date.now()                    }));                }            });        } catch (error) {            ws.send(JSON.stringify({                type: 'error',                message: 'संदेश का गलत प्रारूप'            }));        }    });

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

console.log('WebSocket सर्वर ws://localhost:8080 पर चालू है');

सर्वर को npx ts-node server.ts कमांड से चलाएं। सर्वर कनेक्शन स्वीकार करने और संदेश प्रसारित करने के लिए तैयार है।

TypeScript पर WebSocket क्लाइंट

अब क्लाइंट भाग बनाएं। TypeScript ब्राउज़र में बढ़िया काम करता है, इसलिए हम शुद्ध TypeScript में क्लाइंट लिखेंगे जो JavaScript में कंपाइल होगा।

client.ts फ़ाइल:

interface ChatMessage {    type: string;    user?: string;    text?: string;    message?: string;    timestamp?: number;}

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

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