JavaScript पर WebSocket: Node.js पर real-time एप्लिकेशन बनाना

WebSocket पर JavaScript: Node.js पर real-time एप्लिकेशन बनाना

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

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

पारंपरिक HTTP प्रोटोकॉल "अनुरोध-प्रतिक्रिया" सिद्धांत पर काम करता है: क्लाइंट अनुरोध भेजता है, सर्वर जवाब देता है, कनेक्शन बंद हो जाता है। नया डेटा प्राप्त करने के लिए क्लाइंट को लगातार सर्वर से पूछताछ (polling) करनी पड़ती है या लंबे HTTP अनुरोधों (long polling) का उपयोग करना पड़ता है। यह अक्षम है, अतिरिक्त लोड बनाता है और विलंबता बढ़ाता है।

WebSocket (RFC 6455) एक प्रोटोकॉल है जो एक TCP चैनल के माध्यम से स्थायी डुप्लेक्स कनेक्शन स्थापित करता है। HTTP के माध्यम से हैंडशेक (handshake) के बाद, सर्वर और क्लाइंट बिना अतिरिक्त हेडर के किसी भी समय एक दूसरे को डेटा भेज सकते हैं। यह WebSocket को निम्नलिखित के लिए आदर्श समाधान बनाता है:

• चैट और मैसेजिंग एप्लिकेशन
• ऑनलाइन गेम और सहयोगात्मक संपादन
• स्टॉक कोट्स और वित्तीय डैशबोर्ड
• Push सूचनाएं और मॉनिटरिंग
• डेटा की स्ट्रीमिंग (IoT, लॉग्स)

Node.js पर WebSocket सर्वर की स्थापना और कॉन्फ़िगरेशन

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

npm install ws

एक सरल WebSocket सर्वर बनाते हैं। पहले मॉड्यूल को इम्पोर्ट करें और पोर्ट 8080 पर सर्वर का एक इंस्टेंस बनाएं:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

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

    // क्लाइंट को स्वागत संदेश भेजें    ws.send('WebSocket सर्वर में आपका स्वागत है!');

    // इनकमिंग संदेशों को हैंडल करें    ws.on('message', function incoming(message) {        console.log('प्राप्त हुआ: %s', message);        // सभी कनेक्टेड क्लाइंट्स को जवाब दें        wss.clients.forEach(function each(client) {            if (client.readyState === WebSocket.OPEN) {                client.send(`इको: ${message}`);            }        });    });

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

    // एरर को हैंडल करें    ws.on('error', function error(err) {        console.error('WebSocket त्रुटि:', err);    });});

console.log('WebSocket सर्वर ws://localhost:8080 पर शुरू हुआ');

यह कोड एक सरल इको सर्वर बनाता है: क्लाइंट द्वारा भेजा गया कोई भी संदेश सभी कनेक्टेड उपयोगकर्ताओं को भेज दिया जाएगा। readyState की जाँच पर ध्यान दें - यह सुनिश्चित करता है कि हम बंद कनेक्शन पर डेटा भेजने का प्रयास नहीं कर रहे हैं।

ब्राउज़र में WebSocket का क्लाइंट भाग

क्लाइंट (ब्राउज़र) की ओर, WebSocket एक अंतर्निहित ऑब्जेक्ट है - किसी अतिरिक्त लाइब्रेरी की आवश्यकता नहीं है। अपने सर्वर से कनेक्ट करें और एक सरल चैट लागू करें:

// WebSocket कनेक्शन बनाएंconst socket = new WebSocket('ws://localhost:8080');

// कनेक्शन खुलने का हैंडलरsocket.addEventListener('open', function (event) {    console.log('कनेक्शन स्थापित हुआ');    socket.send('नमस्ते, सर्वर!');});

// संदेश प्राप्त करने का हैंडलरsocket.addEventListener('message', function (event) {    const messagesDiv = document.getElementById('messages');    const messageElement = document.createElement('div');```