JavaScript में WebSockets: शुरुआत से real-time एप्लिकेशन बनाना

JavaScript में WebSockets: जब "लाइव" साइट जादू नहीं, बल्कि कोड है

क्या आपने कभी सोचा है कि ऑनलाइन चैट, रियल टाइम में शेयर बाजार के भाव या मल्टीप्लेयर ब्राउज़र गेम कैसे काम करते हैं? रहस्य सरल और सुरुचिपूर्ण है — JavaScript में WebSockets। यह तकनीक एक स्थिर वेबसाइट को एक जीवित जीव में बदल देती है जो अन्य उपयोगकर्ताओं के कार्यों पर तुरंत प्रतिक्रिया करता है।

इस लेख में हम केवल सिद्धांत पर चर्चा नहीं करेंगे। हम शुरुआत से एक वास्तविक चैट लिखेंगे, त्रुटियों को संभालना सीखेंगे और समझेंगे कि क्यों WebSockets पर real-time एप्लिकेशन पुराने अच्छे AJAX और polling की तुलना में तेज़ी से काम करते हैं। तैयार हो जाइए — यह दिलचस्प होगा।

HTTP real-time के लिए उपयुक्त क्यों नहीं है? (संक्षिप्त जानकारी)

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

डेवलपर्स ने वैकल्पिक रास्ते खोजे:

\n
• Polling — क्लाइंट हर 5 सेकंड में सर्वर से पूछता है: "क्या कोई खबर है?"
\n
• Long polling — सर्वर कनेक्शन को तब तक खुला रखता है जब तक कोई प्रतिक्रिया न आए (लेकिन यह अभी भी एकतरफा चैनल है)।
\n

और यहाँ मंच पर आते हैं WebSockets। कल्पना करें कि आपने ब्राउज़र और सर्वर के बीच एक टेलीफोन लाइन खोल दी है। दोनों किसी भी समय, एक साथ, बिना किसी देरी के बात कर सकते हैं। यही JavaScript WebSocket API का जादू है।

WebSocket कैसे काम करता है: प्रोटोकॉल, हैंडशेक, संदेश

तकनीकी रूप से, WebSocket एक अलग प्रोटोकॉल है (एन्क्रिप्टेड कनेक्शन के लिए ws:// या wss://)। यह सब HTTP हैंडशेक से शुरू होता है:

\n
1. क्लाइंट हेडर Upgrade: websocket के साथ एक सामान्य HTTP अनुरोध भेजता है।
\n
2. सर्वर जवाब देता है: "101 Switching Protocols" — और कनेक्शन WebSocket में "अपग्रेड" हो जाता है।
\n
3. फिर पूर्ण द्वैध (full duplex) संचार: डेटा फ्रेम के रूप में दोनों दिशाओं में उड़ता है (टेक्स्ट या बाइनरी डेटा)।
\n

ब्राउज़र में WebSocket के साथ काम करने के लिए बिल्ट-इन ऑब्जेक्ट WebSocket का उपयोग किया जाता है। किसी अतिरिक्त लाइब्रेरी की आवश्यकता नहीं है — शुद्ध JavaScript WebSocket सभी आधुनिक ब्राउज़रों में बॉक्स से बाहर काम करता है।

JavaScript में पहला real-time चैट लिखना

आइए एक सरल चैट बनाएं। सर्वर साइड को हम Node.js और ws लाइब्रेरी (जो WebSocket Node.js के लिए सबसे लोकप्रिय है) के साथ लिखेंगे, क्लाइंट को शुद्ध JavaScript में।

चरण 1. सर्वर सेटअप

npm init -y\nnpm install ws

चरण 2. सर्वर कोड (server.js)

const WebSocket = require('ws');\n\nconst wss = new WebSocket.Server({ port: 8080 });\n\nwss.on('connection', function connection(ws) {\n    console.log('नया उपयोगकर्ता जुड़ गया');\n\n    // नए क्लाइंट को स्वागत संदेश भेजें\n    ws.send(JSON.stringify({\n        type: 'system',\n        message: 'चैट में आपका स्वागत है!'\n    }));\n\n    // क्लाइंट से संदेश प्राप्त करें\n    ws.on('message', function incoming(data) {\n        const message = JSON.parse(data);\n        console.log('प्राप्त:', message);\n\n        // सभी जुड़े क्लाइंट्स को संदेश भेजें\n        wss.clients.forEach(function each(client) {\n            if (client.readyState === WebSocket.OPEN) {\n                client.send(JSON.stringify({\n                    type: 'message',\n                    user: message.user,\n                    text: message.text,\n                    time: new Date().toLocaleTimeString()\n                }));\n            }\n        });\n    });\n\n    // डिस्कनेक्ट को संभालें\n    ws.on('close', function() {\n        console.log('उपयोगकर्ता डिस्कनेक्ट हो गया');\n    });\n});\n\nconsole.log('सर्वर ws://localhost:8080 पर शुरू हुआ');

चरण 3. क्लाइंट