🕓 🤛🏼 ⛽️ विंडोज 8 पर उपभोक्ता पूर्वावलोकन 🕴🏻 ▶️ 👸

विंडोज 8 सीपी और सर्वर बीटा में, आईई 10 सहित सभी माइक्रोसॉफ्ट वेबस्केट क्लाइंट और सर्वर अब आईईटीएफ वेबस्केट प्रोटोकॉल के अंतिम संस्करण का समर्थन करते हैं। इसके अलावा, IE10 W3C WebSockets API की प्रारंभिक अनुशंसा को लागू करता है ।

डेवलपर्स के लिए अभिनव एप्लिकेशन और सेवाएँ बनाना शुरू करने के लिए WebSockets स्थिर और तैयार हैं। यह लेख W3C WebSockets API और नीचे दिए गए WebSocket प्रोटोकॉल का एक सरल परिचय है। अपडेट की गई फ्लिपबुक डेमो नवीनतम एपीआई और प्रोटोकॉल का उपयोग करती है।

अपने पिछले लेख में, मैंने WebSockets का उपयोग करने के लिए परिदृश्यों का वर्णन किया:

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

सितंबर 2011 में उस लेख के प्रकाशन के बाद से, कार्य समूहों ने महत्वपूर्ण प्रगति की है। WebSocket प्रोटोकॉल अब IETF द्वारा प्रस्तावित मानक प्रोटोकॉल बन गया है। इसके अलावा, W3C WebSockets API अब W3C अनुशंसा प्रत्याशी है।

एक उदाहरण के रूप में इको का उपयोग करते हुए WebSocket API का परिचय

नीचे दिए गए कोड स्निपेट एक साधारण इको सर्वर का उपयोग करते हैं जो कि System.Web.WebSockets नामस्थान का उपयोग करके बनाया जाता है। ASP.NET से नाम पाठ और पाठ और द्विआधारी संदेश जो अनुप्रयोग से भेजे गए थे। एप्लिकेशन उपयोगकर्ता को भेजे जाने वाले पाठ को दर्ज करने की अनुमति देता है और पाठ संदेश के रूप में प्रतिक्रिया प्रदर्शित करता है, या एक छवि खींचता है जिसे सर्वर पर भेजा जा सकता है और एक बाइनरी संदेश के रूप में वापस प्राप्त किया जा सकता है।

फ्लिपकार्ट डेमो में WebSockets और HTTP मतदान के बीच विलंबता और प्रदर्शन में अंतर के साथ प्रयोग करने के लिए एक अधिक परिष्कृत उदाहरण देखा जा सकता है।

WebSocket सर्वर से कनेक्शन का विवरण।

यह सरल विवरण एप्लिकेशन और सर्वर के बीच सीधा संबंध मानता है। यदि प्रॉक्सी के माध्यम से एक कनेक्शन कॉन्फ़िगर किया गया है, IE10 प्रॉक्सी से एक कनेक्ट HTTP अनुरोध भेजकर कनेक्शन प्रक्रिया शुरू करता है।

जब एक WebSocket ऑब्जेक्ट बनाया जाता है, तो क्लाइंट और सर्वर के बीच एक WebSocket कनेक्शन बनाते हुए एक हैंडशेक बनाया जाता है।

IE10 सर्वर पर एक HTTP अनुरोध भेजकर हैंडशेक प्रक्रिया शुरू करता है:

  HTTP / 1.1 प्राप्त करें / गूँजें
 होस्ट: example.microsoft.com
 अपग्रेड: वेबसोकेट
 कनेक्शन: अपग्रेड
 Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ ==
 मूल: http://microsoft.com
 Sec-WebSocket-Version: 13

आइए इस क्वेरी के प्रत्येक भाग को देखें।

कनेक्शन प्रक्रिया एक मानक HTTP GET अनुरोध के साथ शुरू होती है, जो अनुरोध को फ़ायरवॉल, परदे के पीछे और अन्य सूचना के माध्यम से जाने की अनुमति देता है:

  HTTP / 1.1 प्राप्त करें / गूँजें
 होस्ट: example.microsoft.com

HTTP का हेडर अपग्रेड सर्वर से एक रिक्वेस्ट है जो एप्लिकेशन लेयर प्रोटोकॉल को HTTP से WebSocket तक स्विच करने के लिए है।

  अपग्रेड: वेबसोकेट
 कनेक्शन: अपग्रेड

सर्वर, वेब-सॉकेट-की हेडर के मूल्य को तब प्रदर्शित करता है जब वह प्रदर्शित करता है कि यह वेबस्केट प्रोटोकॉल को समझता है:

  Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ ==

मूल हेडर IE10 द्वारा कॉन्फ़िगर किया गया है ताकि सर्वर को स्रोत-आधारित सुरक्षा नीति लागू करने की अनुमति मिल सके।

  मूल: http://microsoft.com

Sec-WebSocket-Version हेडर अनुरोधित प्रोटोकॉल संस्करण की पहचान करता है। संस्करण 13 IETF द्वारा प्रस्तावित मानक में अंतिम है:

  Sec-WebSocket-Version: 13

यदि सर्वर एप्लिकेशन-स्तर प्रोटोकॉल अद्यतन अनुरोध स्वीकार करता है, तो यह HTTP 101 स्विचिंग प्रोटोकॉल प्रतिक्रिया देता है:

  HTTP / 1.1 101 स्विचिंग प्रोटोकॉल
 अपग्रेड: वेबसोकेट
 कनेक्शन: अपग्रेड

प्रदर्शित करने के लिए कि वह वास्तव में WebSocket प्रोटोकॉल को समझता है, सर्वर क्लाइंट रिक्वेस्ट से Sec-WebSocket-Key हेडर वैल्यू का एक मानकीकृत रूपांतरण करता है, और परिणाम को Sec-WebSocket-Accept हेडर में लौटाता है:

  Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK +OO =

IE10 तब Sec-WebSocket-Key मान को Sec-WebSocket-Accept मान पर मैप करता है ताकि यह सुनिश्चित हो सके कि सर्वर वास्तव में एक WebSocket सर्वर है और कुछ और नहीं।

एक क्लाइंट हैंडशेक IE10 और सर्वर के बीच टीसीपी पर एक HTTP कनेक्शन बनाता है। सर्वर द्वारा 101 प्रतिसाद दिए जाने के बाद, एप्लिकेशन लेयर प्रोटोकॉल HTTP से WebSockets पर स्विच हो जाता है, जो पहले से स्थापित टीसीपी कनेक्शन का उपयोग करता है।

इस स्विच के बाद इंटरैक्शन पिक्चर में HTTP पूरी तरह से गायब हो जाता है। हल्के वेबस्केट प्रोटोकॉल का उपयोग करके किसी भी समय संदेश दोनों पार्टियों द्वारा भेजे या प्राप्त किए जा सकते हैं।

एक WebSocket सर्वर के लिए एक कनेक्शन प्रोग्रामिंग

WebSocket प्रोटोकॉल दो नई URI योजनाओं को परिभाषित करता है जो HTTP योजनाओं के समान हैं।

"Ws:" "//" होस्ट [":" पोर्ट ] पथ ["?" क्वेरी ] "http:" स्कीमा के समान है। इसका डिफ़ॉल्ट पोर्ट 80 है। इसका उपयोग असुरक्षित (अनएन्क्रिप्टेड) कनेक्शन के लिए किया जाता है;
"Wss:" "//" होस्ट [":" पोर्ट ] पथ ["?" क्वेरी ] "https:" स्कीमा के समान है। इसका डिफ़ॉल्ट पोर्ट 443 है। इसका उपयोग टीएलएस परत के माध्यम से सुरक्षित कनेक्शन के लिए किया जाता है।

परदे के पीछे या अन्य मध्यस्थ एजेंटों की उपस्थिति के मामले में, संरक्षित कनेक्शन का संचालन सफल होने की अधिक संभावना है, क्योंकि मध्यवर्ती एजेंटों को संरक्षित यातायात में हस्तक्षेप करने की संभावना कम है।

निम्न कोड स्निपेट एक WebSocket कनेक्शन स्थापित करता है:

var host = "ws://example.microsoft.com"; var socket = new WebSocket(host);

रेडीस्टेट - रेडी ... इंस्टॉलेशन ... लेट्स गो ...

WebSocket.readyState विशेषता कनेक्शन की स्थिति प्रदान करती है: कनेक्टिंग, ओपन, क्लॉसिंग या बंद। जब WebSocket बस बनाया जाता है, तो तैयार करना CONNECTING पर सेट हो जाता है। जब कनेक्शन सफल होता है, रेडीस्टेट ओपेन में सेट हो जाता है। यदि कनेक्शन स्थापित नहीं किया जा सका, तो रेडीस्टेट को बंद कर दिया गया है।

संपर्क खुली घटनाओं के लिए सदस्यता लें

एक कनेक्शन बनाया गया है कि सूचनाएं प्राप्त करने के लिए, एप्लिकेशन को खुली घटनाओं की सदस्यता लेनी चाहिए।

 socket.onopen = function (openEvent) { document.getElementById("serverStatus").innerHTML = 'Web Socket State::' + 'OPEN'; };

पर्दे के पीछे का विवरण: संदेश भेजना और प्राप्त करना

एक सफल हैंडशेक के बाद, एप्लिकेशन और सर्वर WebSocket संदेशों का आदान-प्रदान कर सकते हैं। एक संदेश के एक या एक से अधिक टुकड़े के अनुक्रम के रूप में एक संदेश बनता है (दूसरे शब्दों में, डेटा "फ्रेम")।

प्रत्येक फ्रेम में ऐसी जानकारी शामिल है:

फ्रेम का आकार;
संदेश प्रकार (द्विआधारी या पाठ), केवल पहले संदेश फ्रेम में;
ध्वज (फिन), यह दर्शाता है कि यह संदेश का अंतिम फ्रेम है।

IE10 एक स्क्रिप्ट को पास करने से पहले एक पूरे संदेश में फ़्रेम को जोड़ती है।

संदेश भेजने और भेजने के लिए प्रोग्रामिंग

Send API आपको सर्वर को UTF-8 एन्कोडेड टेक्स्ट और साथ ही ArrayBuffers या Blobs के रूप में संदेश भेजने की अनुमति देता है।

उदाहरण के लिए, कोड का यह टुकड़ा उपयोगकर्ता द्वारा दर्ज किए गए पाठ को लेता है और इसे सर्वर को पाठ संदेश (UTF-8) के रूप में भेजता है, जो तब वापस आ जाता है। यह कोड जाँचता है कि Websocket.readyState OPEN राज्य में है:

 function sendTextMessage() { if (socket.readyState !== WebSocket.OPEN) { return; } var e = document.getElementById("textmessage"); socket.send(e.value); }

यह कोड कैनवास पर उपयोगकर्ता द्वारा खींची गई छवि प्राप्त करता है और इसे सर्वर को एक बाइनरी संदेश के रूप में भेजता है:

 function sendBinaryMessage() { if (socket.readyState != WebSocket.OPEN) { return; } var sourceCanvas = document.getElementById('source'); // msToBlob returns a blob object from a canvas image or drawing socket.send(sourceCanvas.msToBlob()); // ... }

संदेश घटनाओं के लिए सदस्यता

संदेश प्राप्त करने के लिए, एप्लिकेशन को संदेश घटनाओं की सदस्यता लेनी चाहिए। ईवेंट हैंडलर एक MessageEvent प्राप्त करता है, जिसमें MessageEvent.data में डेटा होता है। डेटा पाठ या बाइनरी संदेशों के रूप में प्राप्त किया जा सकता है।

जब कोई बाइनरी संदेश प्राप्त होता है, तो WebSocket.binaryType विशेषता नियंत्रित करती है कि डेटा वापस आ गया है, या तो एक बूँद के रूप में या एक ArrayBuffer के रूप में। विशेषता को ब्लॉब या एरेबफ़र में सेट किया जा सकता है।

नीचे दिए गए उदाहरण "बूँद" के डिफ़ॉल्ट मान का उपयोग करते हैं।

कोड का यह टुकड़ा किसी वेबसोकेट सर्वर से एक छवि या पाठ को स्वीकार करता है। यदि डेटा बाइनरी है, तो यह एक छवि प्राप्त करता है और इसे लक्ष्य कैनवास पर खींचता है। अन्यथा, यह UTF-8 एन्कोडेड पाठ प्राप्त करता है और इसे पाठ बॉक्स में प्रदर्शित करता है।

 socket.onmessage = function (messageEvent) { if (messageEvent.data instanceof Blob) { var destinationCanvas = document.getElementById('destination'); var destinationContext = destinationCanvas.getContext('2d'); var image = new Image(); image.onload = function () { destinationContext.clearRect(0, 0, destinationCanvas.width, destinationCanvas.height); destinationContext.drawImage(image, 0, 0); } image.src = URL.createObjectURL(messageEvent.data); } else { document.getElementById("textresponse").value = messageEvent.data; } };

WebSocket कनेक्शन बंद करने के बारे में और जानें।

एक स्वागत योग्य हैंडशेक की तरह, एक विदाई हैंडशेक भी है। कोई भी पक्ष (एप्लिकेशन या सर्वर) इस प्रक्रिया को आरंभ कर सकता है।

एक विशेष प्रकार का फ्रेम (समापन फ्रेम) दूसरी तरफ भेजा जाता है। समापन फ्रेम में वैकल्पिक स्थिति कोड और बंद करने का कारण हो सकता है। प्रोटोकॉल स्थिति कोड के लिए कई उपयुक्त मानों को परिभाषित करता है। समापन फ्रेम के प्रेषक को समापन फ्रेम के बाद कोई डेटा नहीं भेजना चाहिए।

जब दूसरा पक्ष एक समापन फ्रेम प्राप्त करता है, तो यह अपने स्वयं के समापन फ्रेम के साथ प्रतिक्रिया करता है। यह समापन फ्रेम में कई संदेश भेज सकता है।

वेबसॉकेट बंद प्रोग्रामिंग और समापन घटनाओं के लिए सदस्यता

आवेदन एक खुले कनेक्शन पर एक करीबी एपीआई का उपयोग कर विदाई की शुरुआत करता है:

 socket.close(1000, "normal close");

किसी कनेक्शन को बंद करने के बारे में सूचनाएं प्राप्त करने के लिए, एप्लिकेशन को कनेक्शन समापन घटनाओं की सदस्यता लेनी चाहिए।

 socket.onclose = function (closeEvent) { document.getElementById("serverStatus").innerHTML = 'Web Socket State::' + 'CLOSED'; };

करीबी एपीआई दो वैकल्पिक मापदंडों को स्वीकार करता है: प्रोटोकॉल में परिभाषित सूची और एक विवरण से एक स्थिति कोड। स्थिति कोड या तो 1000 होना चाहिए, या 3000 से 4999 तक होना चाहिए। जब कनेक्शन बंद हो जाता है, तो तैयार विशेषता को CLOSING पर सेट किया जाता है। IE10 सर्वर से एक समापन फ्रेम के साथ प्रतिक्रिया प्राप्त करने के बाद, रेडीस्टेट विशेषता को बंद कर दिया जाता है और करीबी घटना को उठाया जाता है।

वेबसाइड्स ट्रैफ़िक देखने के लिए फ़िडलर का उपयोग करना

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

सभी WebSocket संदेश भी लॉग इन हैं। नीचे दिए गए स्क्रीनशॉट में, आप देख सकते हैं कि "सर्पिल" एप्लिकेशन सर्वर पर एक टेक्स्ट संदेश कैसे भेजता है, जो इसे वापस भेजता है:

निष्कर्ष

यदि आप WebSockets के बारे में अधिक जानना चाहते हैं, तो आप सितंबर 2011 में Microsoft // बिल्ड / सम्मेलन से इन सत्रों को देख सकते हैं:

यदि आप WebSocket सेवा बनाने के लिए Microsoft तकनीकों से अपरिचित हैं, तो ये लेख एक अच्छे मार्गदर्शक हो सकते हैं:

मुझे उम्मीद है कि आप आज वेबसॉकेट्स के आधार पर विकास शुरू करेंगे और अपने छापों को हमारे साथ साझा करेंगे।

-ब्रायन रेमोर, वरिष्ठ प्रोग्राम मैनेजर, विंडोज नेटवर्किंग

विंडोज 8 पर उपभोक्ता पूर्वावलोकन