पेश है WebSockets - हमारे प्लैटफ़ॉर्म पर, सॉकेट लाया जा रहा है

एजी कितामुरा
माल्टे यूबीएल
माल्टे यूबीएल
X होम पेज

समस्या: कम इंतज़ार का क्लाइंट-सर्वर और सर्वर-क्लाइंट कनेक्शन

वेब का निर्माण मुख्य रूप से HTTP के तथाकथित अनुरोध/प्रतिक्रिया मॉडल पर किया गया है. क्लाइंट किसी वेब पेज को लोड करता है और फिर तब तक कुछ नहीं होता, जब तक उपयोगकर्ता अगले पेज पर क्लिक नहीं करता. साल 2005 के आस-पास, AJAX ने वेब को ज़्यादा डाइनैमिक बनाना शुरू किया. फिर भी, सभी एचटीटीपी कम्यूनिकेशन क्लाइंट की ओर से चलाए जाते थे, जिसमें सर्वर से नया डेटा लोड करने के लिए उपयोगकर्ता इंटरैक्शन या समय-समय पर पोल कराना पड़ता था.

ऐसी टेक्नोलॉजी जो सर्वर को नया डेटा उपलब्ध होने का पता चलने पर, उसी समय क्लाइंट को डेटा भेजने में मदद करती हैं. ये टेक्नोलॉजी, काफ़ी समय से मौजूद हैं. इन्हें 'पुश' या 'Comet' जैसे नाम दिए जाते हैं. किसी सर्वर की ओर से शुरू किए गए कनेक्शन का भ्रम पैदा करने के सबसे आम तरीकों में से एक है लॉन्ग पोल. लंबे पोलिंग के ज़रिए, क्लाइंट, सर्वर से एक एचटीटीपी कनेक्शन खोलता है. यह सर्वर को तब तक खुला रखता है, जब तक कि वह जवाब नहीं देता. जब भी सर्वर के पास नया डेटा होता है, तो वह रिस्पॉन्स भेजता है. अन्य तकनीकों में फ़्लैश, एक्सएचआर मल्टीपार्ट अनुरोध, और दूसरे तरीके से htmlफ़ाइलें कहा जाता है. लंबे समय तक मतदान करने की सुविधा और दूसरी तकनीकें, बहुत अच्छी तरह से काम करती हैं. आप हर दिन Gmail चैट जैसे ऐप्लिकेशन में उनका इस्तेमाल करते हैं.

हालांकि, इन सभी तरीकों में एक समस्या है: ये एचटीटीपी का ओवरहेड बनाते हैं, जो इन्हें इंतज़ार का समय कम करने वाले ऐप्लिकेशन के लिए सही नहीं बनाता है. ब्राउज़र या किसी ऐसे ऑनलाइन गेम में, मल्टीप्लेयर फ़र्स्ट पर्सन शूटर गेम के बारे में सोचें जिनमें रीयल टाइम कॉम्पोनेंट शामिल हो.

पेश है WebSocket: वेब पर सॉकेट लाना

WebSocket स्पेसिफ़िकेशन ऐसे एपीआई के बारे में बताता है जो वेब ब्राउज़र और सर्वर के बीच "सॉकेट" कनेक्शन सेट करता है. आसान शब्दों में: क्लाइंट और सर्वर के बीच एक स्थायी कनेक्शन होता है और दोनों पक्ष किसी भी समय डेटा भेजना शुरू कर सकते हैं.

YouTube पर शुरुआत करना

आप बस WebSocket कंस्ट्रक्टर को कॉल करके WebSocket कनेक्शन खोल सकते हैं:

var connection = new WebSocket('ws://html5rocks.websocket.org/echo', ['soap', 'xmpp']);

ws: पर ध्यान दें. यह WebSocket कनेक्शन के लिए नया यूआरएल स्कीमा है. सुरक्षित WebSocket कनेक्शन के लिए wss: भी है. ठीक उसी तरह, जिस तरह सुरक्षित एचटीटीपी कनेक्शन के लिए https: का इस्तेमाल किया जाता है.

कुछ इवेंट हैंडलर को कनेक्शन में तुरंत अटैच करके, आपको यह पता चलता है कि कनेक्शन कब खुला है, कब आपको इनकमिंग मैसेज मिलते हैं या कोई गड़बड़ी होती है.

दूसरा तर्क, वैकल्पिक सब-प्रोटोकॉल स्वीकार करता है. यह एक स्ट्रिंग या स्ट्रिंग का कलेक्शन हो सकता है. हर स्ट्रिंग को एक सब-प्रोटोकॉल का नाम दिखाना चाहिए. साथ ही, सर्वर ऐरे में पास किए गए सब-प्रोटोकॉल में से सिर्फ़ एक को स्वीकार करता है. स्वीकार किए गए सब-प्रोटोकॉल को पहचानने के लिए, WebSocket ऑब्जेक्ट की protocol प्रॉपर्टी का इस्तेमाल किया जा सकता है.

सब-प्रोटोकॉल के नाम, आईएएनए रजिस्ट्री में रजिस्टर किए गए सब-प्रोटोकॉल के नामों में से एक होने चाहिए. फ़िलहाल, फ़रवरी 2012 तक सिर्फ़ एक सब-प्रोटोकॉल का नाम (साबुन) रजिस्टर किया गया है.

// When the connection is open, send some data to the server
connection.onopen = function () {
connection.send('Ping'); // Send the message 'Ping' to the server
};

// Log errors
connection.onerror = function (error) {
console.log('WebSocket Error ' + error);
};

// Log messages from the server
connection.onmessage = function (e) {
console.log('Server: ' + e.data);
};

सर्वर से संपर्क करना

जैसे ही हमें सर्वर से कनेक्शन मिल जाता है (जब open इवेंट ट्रिगर होता है), तो हम कनेक्शन ऑब्जेक्ट पर मौजूद send('your message') तरीके का इस्तेमाल करके, सर्वर को डेटा भेजना शुरू कर सकते हैं. यह पहले सिर्फ़ स्ट्रिंग के साथ काम करता था, लेकिन नए वर्शन में अब यह बाइनरी मैसेज भी भेज सकता है. बाइनरी डेटा भेजने के लिए, Blob या ArrayBuffer ऑब्जेक्ट में से किसी एक का इस्तेमाल किया जा सकता है.

// Sending String
connection.send('your message');

// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
binary[i] = img.data[i];
}
connection.send(binary.buffer);

// Sending file as Blob
var file = document.querySelector('input[type="file"]').files[0];
connection.send(file);

इसी तरह, सर्वर किसी भी समय हमें मैसेज भेज सकता है. जब भी ऐसा होता है, onmessage कॉलबैक ट्रिगर होता है. कॉलबैक को एक इवेंट ऑब्जेक्ट मिलता है और असल मैसेज को data प्रॉपर्टी से ऐक्सेस किया जा सकता है.

WebSocket को सबसे नई शर्त में बाइनरी मैसेज भी मिल सकते हैं. बाइनरी फ़्रेम को Blob या ArrayBuffer फ़ॉर्मैट में मिल सकता है. मिले हुए बाइनरी का फ़ॉर्मैट तय करने के लिए, WebSocket ऑब्जेक्ट की binaryType प्रॉपर्टी को 'blob' या 'arraybuffer' पर सेट करें. डिफ़ॉल्ट फ़ॉर्मैट 'blob' है. (आपको भेजने पर binaryType पैरामीटर को अलाइन करने की ज़रूरत नहीं है.)

// Setting binaryType to accept received binary as either 'blob' or 'arraybuffer'
connection.binaryType = 'arraybuffer';
connection.onmessage = function(e) {
console.log(e.data.byteLength); // ArrayBuffer object if binary
};

WebSocket की एक और नई सुविधा एक्सटेंशन है. यह सुविधा जोड़ी गई है. एक्सटेंशन का इस्तेमाल करके, कंप्रेस किए गए और मल्टीप्लेक्स वगैरह फ़्रेम भेजे जा सकते हैं. ओपन इवेंट के बाद, WebSocket ऑब्जेक्ट की एक्सटेंशन प्रॉपर्टी की जांच करके, सर्वर से स्वीकार किए गए एक्सटेंशन ढूंढे जा सकते हैं. फ़रवरी 2012 तक, आधिकारिक तौर पर पब्लिश किया गया कोई एक्सटेंशन उपलब्ध नहीं है.

// Determining accepted extensions
console.log(connection.extensions);

क्रॉस-ऑरिजिन कम्यूनिकेशन

एक आधुनिक प्रोटोकॉल होने के नाते, क्रॉस ऑरिजिन कम्यूनिकेशन सीधे WebSocket में बेक किया गया है. हालांकि आपको यह पक्का करना चाहिए कि आप सिर्फ़ उन क्लाइंट और सर्वर से ही बातचीत करें जिन पर आपको भरोसा है, WebSocket किसी भी डोमेन पर पक्षों के बीच बातचीत की सुविधा देता है. सर्वर तय करता है कि उसकी सेवा सभी क्लाइंट को उपलब्ध कराई जाए या केवल उन लोगों को जो अच्छी तरह से परिभाषित डोमेन के सेट पर मौजूद हैं.

प्रॉक्सी सर्वर

हर नई तकनीक में नई-नई समस्याएं आती हैं. WebSocket के मामले में, यह ऐसे प्रॉक्सी सर्वर के साथ काम करता है जो ज़्यादातर कंपनी नेटवर्क में एचटीटीपी कनेक्शन के साथ मीडिएट होता है. WebSocket प्रोटोकॉल, किसी WebSocket कनेक्शन पर एचटीटीपी कनेक्शन को 'अपग्रेड' करने के लिए, एचटीटीपी अपग्रेड सिस्टम का इस्तेमाल करता है. आम तौर पर, इसका इस्तेमाल एचटीटीपी/एसएसएल के लिए किया जाता है. कुछ प्रॉक्सी सर्वर को यह पसंद नहीं आता और वे कनेक्शन को छोड़ देंगे. इसलिए, अगर कोई क्लाइंट WebSocket प्रोटोकॉल का इस्तेमाल करता है, तब भी हो सकता है कि उससे कनेक्ट न किया जा सके. इससे अगला सेक्शन और भी अहम हो जाता है :)

आज ही WebSockets इस्तेमाल करें

WebSocket अब भी एक युवा टेक्नोलॉजी है और इसे सभी ब्राउज़र पर पूरी तरह से लागू नहीं किया गया है. हालांकि, जब भी WebSocket उपलब्ध न हो, तब उस लाइब्रेरी के साथ WebSocket का इस्तेमाल किया जा सकता है जो ऊपर बताए गए किसी फ़ॉलबैक का इस्तेमाल करती है. socket.io ऐसी लाइब्रेरी है जो इस डोमेन में काफ़ी लोकप्रिय हो गई है. यह लाइब्रेरी, क्लाइंट और प्रोटोकॉल के सर्वर लागू करने के साथ आती है. इसमें फ़ॉलबैक भी शामिल होते हैं (फ़रवरी 2012 तक, socket.io बाइनरी मैसेज की सुविधा नहीं देता है). इसके अलावा, PusherApp जैसे व्यावसायिक समाधान भी मौजूद हैं. क्लाइंट को WebSocket मैसेज भेजने के लिए, एचटीटीपी एपीआई की मदद से इन्हें किसी भी वेब एनवायरमेंट में आसानी से इंटिग्रेट किया जा सकता है. अतिरिक्त एचटीटीपी अनुरोध की वजह से, शुद्ध WebSocket की तुलना में, हमेशा अतिरिक्त ओवरहेड होगा.

सर्वर साइड

WebSocket का इस्तेमाल करने से, सर्वर साइड ऐप्लिकेशन के लिए इस्तेमाल का एक नया पैटर्न बन जाता है. हालांकि, LAMP जैसे पारंपरिक सर्वर स्टैक को एचटीटीपी अनुरोध/रिस्पॉन्स साइकल के हिसाब से डिज़ाइन किया गया है. हालांकि, वे अक्सर बड़ी संख्या में ओपन WebSocket कनेक्शन के साथ ठीक तरह से काम नहीं करते. एक ही समय पर, बड़ी संख्या में कनेक्शन चालू रखने के लिए ऐसे आर्किटेक्चर की ज़रूरत होती है जिसमें कम परफ़ॉर्मेंस लागत पर ज़्यादा मुद्रा का इस्तेमाल होता है. आम तौर पर, इस तरह के आर्किटेक्चर को थ्रेडिंग या नॉन-ब्लॉकिंग IO कहा जाता है.

सर्वर साइड लागू करना

प्रोटोकॉल वर्शन

WebSocket के लिए वायर प्रोटोकॉल (हैंडशेक और क्लाइंट और सर्वर के बीच डेटा ट्रांसफ़र) अब RFC6455 है. Android के लिए Chrome और Chrome, RFC6455 के साथ पूरी तरह से काम करते हैं. इसमें बाइनरी मैसेज की सुविधा भी शामिल है. साथ ही, Firefox 11 और Internet Explorer के वर्शन 10 पर भी काम करेगा. आपके पास अब भी प्रोटोकॉल के पुराने वर्शन इस्तेमाल करने का विकल्प है. हालांकि, हमारा सुझाव है कि ऐसा न करें, क्योंकि ऐसे वर्शन जोखिम की आशंका के तहत आते हैं. अगर आपके पास WebSocket प्रोटोकॉल के पुराने वर्शन पर सर्वर लागू करने की सुविधा है, तो हमारा सुझाव है कि आप उसे नए वर्शन पर अपग्रेड करें.

इस्तेमाल के उदाहरण

जब भी आपको क्लाइंट और सर्वर के बीच रीयल टाइम कनेक्शन की ज़रूरत हो, तो WebSocket का इस्तेमाल करें. ध्यान रखें कि इसमें इस पर फिर से विचार करना शामिल हो सकता है कि इवेंट की सूची जैसी टेक्नोलॉजी पर नए फ़ोकस के साथ, सर्वर साइड ऐप्लिकेशन कैसे बनाए जाएं. इस्तेमाल के कुछ उदाहरण यहां दिए गए हैं:

  • एक से ज़्यादा खिलाड़ियों वाले ऑनलाइन गेम
  • चैट ऐप्लिकेशन
  • लाइव स्पोर्ट्स टिकर
  • रीयल टाइम में अपडेट की जाने वाली सोशल स्ट्रीम

डेमो

References