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

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

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

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

WebSocket TCP कनेक्शन के ऊपर एक फुल-डुप्लेक्स (full-duplex) संचार प्रोटोकॉल है। HTTP के विपरीत, जहाँ क्लाइंट हमेशा अनुरोध शुरू करता है, WebSocket सर्वर को किसी भी समय क्लाइंट को स्वतंत्र रूप से डेटा भेजने की अनुमति देता है। यह प्रारंभिक हैंडशेक के बाद एक स्थायी द्विदिश चैनल स्थापित करके प्राप्त किया जाता है।

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

• कम विलंबता — बार-बार HTTP हेडर के बिना डेटा तुरंत स्थानांतरित होता है।
• ट्रैफ़िक की बचत — कनेक्शन स्थापित होने के बाद न्यूनतम ओवरहेड।
• स्थायी कनेक्शन — polling या long-polling की कोई आवश्यकता नहीं।
• द्विदिश संचार — सर्वर डेटा भेजना शुरू कर सकता है।

WebSocket real-time एप्लिकेशन के लिए आदर्श है: चैट, सूचनाएं, सहयोगात्मक दस्तावेज़ संपादन, वित्तीय टर्मिनल और ऑनलाइन गेम।

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

Node.js पर WebSocket के साथ काम करने के लिए, हम लोकप्रिय ws लाइब्रेरी का उपयोग करेंगे। यह हल्की, विश्वसनीय और अच्छी तरह से प्रलेखित है।

स्थापना से शुरू करें:

npm init -ynpm install ws

अब एक सरल WebSocket सर्वर बनाएं जो कनेक्शन स्वीकार करेगा और संदेशों का उत्तर देगा:

// server.jsconst 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('क्लाइंट डिस्कनेक्ट हुआ');    });});

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

सर्वर को node server.js कमांड से चलाएं। सर्वर कनेक्शन स्वीकार करने के लिए तैयार है।

JavaScript में क्लाइंट भाग बनाना

क्लाइंट भाग सीधे ब्राउज़र में काम करता है। WebSocket API सभी आधुनिक ब्राउज़रों में निर्मित है, इसलिए किसी अतिरिक्त लाइब्रेरी की आवश्यकता नहीं है।

एक सरल इंटरफ़ेस के साथ HTML पेज बनाएं:

<!DOCTYPE html><html><head>    <title>WebSocket चैट</title>    <style>        #messages { height: 300px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; }        #input { width: 300px; }    </style></head><body>    <h2>Real-time चैट</h2>    <div id="messages"></div>    <input type="text" id="input" placeholder="संदेश लिखें..." />    <button onclick="sendMessage()">भेजें</button>

    <script>        // WebSocket सर्वर से कनेक्ट करें        const socket = new WebSocket('ws://localhost:8080');

        // हैंडलर ऑ