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

Eiji Kitamura
Malte Ubl

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

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

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

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

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

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

शुरू करें

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

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

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

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

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

सब-प्रोटोकॉल के नाम, IANA रजिस्ट्री में रजिस्टर किए गए सब-प्रोटोकॉल के नामों में से एक होने चाहिए. फ़िलहाल, फ़रवरी 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 ऑब्जेक्ट की बाइनरीटाइप प्रॉपर्टी को '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 है जो एक क्लाइंट और प्रोटोकॉल के एक सर्वर क्रियान्वयन के साथ आती है और फ़ॉलबैक शामिल होती हैं (socket.io पर फरवरी 2012 तक बाइनरी मैसेज सेवा का समर्थन नहीं करता है). PusherApp जैसे कारोबारी समाधान भी मौजूद हैं. इन्हें क्लाइंट को WebSocket मैसेज भेजने के लिए एचटीटीपी एपीआई देकर, किसी भी वेब एनवायरमेंट में आसानी से इंटिग्रेट किया जा सकता है. अतिरिक्त एचटीटीपी अनुरोध की वजह से, सिर्फ़ WebSocket की तुलना में हमेशा ज़्यादा ओवरहेड होगा.

सर्वर साइड

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

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

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

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

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

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

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

डेमो

रेफ़रंस