JavaScript पर WebSocket: real-time एप्लिकेशन A से Z तक

JavaScript पर WebSocket का परिचय: real-time संचार क्या है?

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

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

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

WebSocket क्या है और यह HTTP से कैसे अलग है?

WebSocket एक संचार प्रोटोकॉल है जो TCP के ऊपर काम करता है। यह HTTP अनुरोध (हैंडशेक) के रूप में शुरू होता है, जिसके बाद कनेक्शन WebSocket में "अपग्रेड" हो जाता है, और डेटा बिना अतिरिक्त हेडर के दोनों दिशाओं में प्रेषित होता है। यह इसे उन एप्लिकेशन के लिए आदर्श बनाता है जहां कम विलंबता महत्वपूर्ण है।

पारंपरिक तरीकों (Polling, Long Polling) की तुलना में WebSocket के मुख्य लाभ:

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

कनेक्शन स्थापित करना: हैंडशेक

प्रक्रिया क्लाइंट से HTTP अनुरोध से शुरू होती है जिसमें हेडर Upgrade: websocket होता है। WebSocket का समर्थन करने वाला सर्वर स्थिति 101 Switching Protocols के साथ उत्तर देता है। इसके बाद कनेक्शन स्थापित माना जाता है।

// WebSocket स्थापित करने के लिए HTTP अनुरोध का उदाहरण\nGET /chat HTTP/1.1\nHost: example.com\nUpgrade: websocket\nConnection: Upgrade\nSec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==\nSec-WebSocket-Version: 13

Node.js पर WebSocket सर्वर बनाना

ws-लाइब्रेरी की स्थापना और कॉन्फ़िगरेशन

सर्वर साइड पर WebSocket के साथ काम करने के लिए हम लोकप्रिय लाइब्रेरी ws का उपयोग करेंगे। यह हल्की, तेज़ और प्रोटोकॉल विनिर्देशन के साथ पूरी तरह से संगत है।

// लाइब्रेरी स्थापित करना\n// npm install ws

एक सरल WebSocket सर्वर बनाएं:

const WebSocket = require('ws');\n\nconst wss = new WebSocket.Server({ port: 8080 });\n\nwss.on('connection', (ws) => {\n    console.log('नया क्लाइंट कनेक्ट हुआ');\n    \n    ws.on('message', (message) => {\n        console.log('संदेश प्राप्त हुआ:', message.toString());\n        // सभी कनेक्टेड क्लाइंट को उत्तर भेजें\n        wss.clients.forEach((client) => {\n            if (client.readyState === WebSocket.OPEN) {\n                client.send(`इको: ${message}`);\n            }\n        });\n    });\n    \n    ws.send('WebSocket सर्वर में आपका स्वागत है!');\n});\n\nconsole.log('WebSocket सर्वर पोर्ट 8080 पर शुरू हुआ');

JavaScript पर क्लाइंट कनेक्शन

क्लाइंट साइड (ब्राउज़र) पर बिल्ट-इन ऑब्जेक्ट WebSocket का उपयोग किया जाता है:

const socket = new WebSocket('ws://localhost:8080');\n\nsocket.onopen = () => {\n    console.log('कनेक्शन स्थापित हुआ');\n    socket.send('नमस्ते, सर्वर!');\n};\n\nsocket.onmessage = (event) => {\n    console.log('सर्वर से संदेश:', event.data);\n};\n\nsocket.onclose = () => {\n    console.log('कनेक्शन बंद हुआ');\n};\n\nsocket.onerror = (error) => {\n    console.error('WebSocket त्रुटि:', error);\n};

JavaScript और Node.js पर real-time चैट बनाना