सिग्नलआर के साथ क्लाउड, एसिंक्रोनस और स्केलेबल वेब एप्लिकेशन का निर्माण करें

सिग्नलआर परिचय

सबसे पहले, मैं सिग्नल राउटर को विकसित करने और Channel9.msdn.com/Shows/Web+Camps+TV/Damian-Edwards-and-David पर देखी जा सकने वाली विशेषताओं को प्रदर्शित करने के लिए डेविड फाउलर और डेमियन एडवर्ड्स को धन्यवाद कहना चाहता हूं । -Fowler-प्रदर्शन-SignalR

सिग्नलआर माइक्रोसॉफ्ट की नई तकनीक है जो निकट-वास्तविक समय, लंबे समय तक रहने वाले, लगातार कनेक्शन के साथ अतुल्यकालिक, स्केलेबल वेब अनुप्रयोगों के विकास को सरल बनाती है। सिग्नलआर ढांचा GitHub github.com/SignalR/SignalR और NuGet nuget.org/packages/signalr पर उपलब्ध है। हाल के वर्षों में कई तकनीकी नवाचारों ने सिग्नलआर के लिए मार्ग प्रशस्त किया है। यदि आप इसके रचनाकारों, डेविड फाउलर और डेमियन एडवर्ड्स के साथ बात करते हैं, तो वे आपको बताएंगे कि कुछ साल पहले सिग्नलआर बनाना बहुत जटिल होगा।

Windows Azure पर तैनात एक नमूना सिग्नलआर अनुप्रयोग आज़माने के लिए:


1. दो अलग-अलग ब्राउज़र विंडो या अलग-अलग ब्राउज़रों में सिग्नलिनक्लाउड.क्लाउड.नेट /Moveshape.htm लिंक खोलें।
2. माउस का उपयोग करके, एक या दूसरी खिड़की में वर्ग को घुमाएं। दूसरी विंडो में, वर्ग भी बढ़ना चाहिए।

Microsoft .NET फ्रेमवर्क 4 में टास्क समानांतर लाइब्रेरी दिखाई देने से पहले बहु-थ्रेडेड प्रोग्राम लिखना बहुत जटिल था। और jQuery के साथ विकास आपको एक बार जावास्क्रिप्ट कोड लिखने की अनुमति देगा और यह फ़ायरफ़ॉक्स, इंटरनेट एक्सप्लोरर, सफारी, ओपेरा और क्रोम में काम करेगा। प्रौद्योगिकी के अभिसरण ने सिग्नलआरआर बनाने और उपयोग करने की तकनीकी व्यवहार्यता के द्वार को खोल दिया है।

एक एप्लिकेशन बनाएं और इसे क्लाउड पर तैनात करें

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

एक सिग्नलआर एप्लिकेशन बनाने और इसे क्लाउड में रखने के लिए चरण

1. क्लाउड प्रोजेक्ट बनाने के लिए विज़ुअल स्टूडियो 2010 का उपयोग करना।
2. प्रोजेक्ट में Asp.Net वेब रोल भूमिका जोड़ें। यह हमारे वेब एप्लिकेशन का कंटेनर होगा।
3. NuGet का उपयोग करना आवश्यक सिग्नलआर असेंबलियों और लिंक को जोड़ता है। आपको NuGet के माध्यम से jQuery जावास्क्रिप्ट मॉड्यूल जोड़ने की भी आवश्यकता है।
4. सर्वर साइड कोड लिखें: सिग्नलआर हब से विरासत में मिली एक क्लास बनाएं और जिसे सर्वर पर निष्पादित किया जाएगा। वह ब्राउज़र # 1 और आगे की घटनाओं को ब्राउज़र # 2 के लिए सुनेंगे
5. क्लाइंट कोड लिखें, जो एक वेब पेज और कुछ जावास्क्रिप्ट कोड है।
6. विंडोज एज़्योर मैनेजमेंट पोर्टल पर जाएं और एक होस्टिंग सेवा और भंडारण खाता बनाएं।
7. परियोजना को पैक करें और इसे विंडोज एज़्योर पर तैनात करें।
8. संकेत दें कि कितने चल रहे सर्वर इंस्टेंसेस की आवश्यकता है। तैनाती के बाद इसे बदला जा सकता है।
9. हो गया!

यह दृश्य स्टूडियो 2011 समाधान है जब हम विकास को पूरा करेंगे


तीन मुख्य फाइलें जिन्हें हम Visual Studio समाधान में जोड़ेंगे:
MoveShape.cs सिग्नलआर सर्वर कोड है जो jQuery कॉल प्रसारण के लिए एक केंद्र या केंद्रीय प्रवेश द्वार के रूप में कार्य करता है। यह कोड एक ब्राउजर पर सुनता है और अन्य ब्राउजर्स को यूजर एक्शन भेजता है।
MoveShape.js - उस ब्राउज़र में JavaSript कोड जिसे सिग्नलआर सर्वर बैकएंड के माध्यम से कहा जाता है।
MoveShape.htm - वह वेब पेज जिस पर सब कुछ होता है। यह उस पर है कि उपयोगकर्ता आंकड़ा खींचता है, जबकि अन्य देखते हैं कि यह अन्य ब्राउज़रों में कैसे चलता है।

एक नया क्लाउड प्रोजेक्ट बनाना

1. एक नया क्लाउड प्रोजेक्ट बनाना।
एक। एक व्यवस्थापक के रूप में विज़ुअल स्टूडियो लॉन्च करें और फ़ाइल , नई परियोजना का चयन करें ।

ख। बाएं भाग में, क्लाउड का चयन करें, इनपुट फ़ील्ड में प्रोजेक्ट का नाम और स्थान दर्ज करें।

2. ASP.NET वेब रोल पर डबल-क्लिक करें


3. CloudSignalRSample_WebRole में वेब भूमिका का नाम बदलें। यह आवश्यक नहीं है, लेकिन आपको कोड को अधिक संगठित करने की अनुमति देता है।

NuGet का उपयोग करके सिग्नलआर स्थापित करें

नुगेट शायद सिग्नलआर के साथ काम करने का सबसे आसान तरीका है। यह आपको केवल सिग्नलआर डाउनलोड करने और अपनी परियोजना के लिए नमूना कोड जोड़ने की अनुमति देता है। सभी आवश्यक निर्भरताएं भी जोड़ी जाएंगी।

1. यदि NuGet पहले से स्थापित नहीं है, तो आपको यह अवश्य करना चाहिए। ऐसा करने के लिए, टूल मेनू से एक्सटेंशन मैनेजर चुनें


2. NuGetPackage Manager का चयन करें और डाउनलोड का चयन करें


3. नुगेट को स्थापित करने के बाद, आप सिग्नलआर की स्थापना के साथ आगे बढ़ सकते हैं


4. दो सिग्नलआर पैकेज स्थापित करें: सिग्नलआर.जेएस और सिग्नलआर.हॉटिंग.एस्पनेट (सब कुछ स्वचालित रूप से इंस्टॉल हो जाएगा जब निर्भरताएं रीसेट हो जाएंगी)




5. कृपया ध्यान दें कि सिग्नल लिंक पैकेज की स्थापना को दर्शाने वाले विभिन्न लिंक समाधान में जोड़े गए हैं

सर्वर और क्लाइंट कोड जोड़ना

यह उन 3 फाइलों को जोड़ने का समय है, जिनके बारे में हमने पहले चर्चा की थी: 1) मूव शैप। (2) MoveShape.js; (3) MoveShape.htm।
1. वेब रोल प्रोजेक्ट पर राइट-क्लिक करें और Add , New Item चुनें


2. कक्षा का चयन करें और फ़ाइल को MoveShapre.cs नाम दें ।


3. फ़ाइल में निम्न कोड जोड़ें: MoveShape.cs

using System; using System.Collections.Generic; using System.Linq; using System.Web; // Add reference using SignalR.Hubs; namespace CloudSignalRSample_WebRole { // Derive from Hub, which is a server-side class // and a client side proxy. [HubName("moveShape")] // moveShape is the name used in the Javascript public class MoveShapeHub : Hub { public void MoveShape(int x, int y) { // Broadcast drag event to other browsers Clients.shapeMoved(Context.ConnectionId, x, y); // Simple diagnostics for debugging System.Diagnostics.Debug.WriteLine("x = " + x + ", y = " + y); } } } 

4. अब, NuGet का उपयोग करके, प्रोजेक्ट में jQuery कोड जोड़ें। संदर्भ पर राइट क्लिक करें और प्रबंधित करें NuGet पैकेज चुनें


5. jQuery UI (संयुक्त पुस्तकालय) नाम के NuGet पैकेज को चुनें और इंस्टॉल करें


6. गयी लिपियों पर ध्यान दें


7. वेब रोल प्रोजेक्ट पर राइट-क्लिक करें और Add , New Item चुनें


8. वेब और जावास्क्रिप्ट फ़ाइल का चयन करें, इसे MoveShape.js नाम दें

9. फ़ाइल में निम्न कोड जोड़ें:

 /// <reference path="Scripts/jquery-1.6.4.js" /> /// <reference path="Scripts/jquery.signalR.js" /> /// <reference path="Scripts/jquery-ui-1.8.18.js" /> $(function () { // Get a refeerence to the server-side moveShape() class. var hub = $.connection.moveShape, // Get a reference to the shape div in the html $shape = $("#shape"); // Use extend to move the shape object (if we are not the sender) $.extend(hub, { // Use css to move the shape object shapeMoved: function (cid, x, y) { if ($.connection.hub.id !== cid) { $shape.css({ left: x, top: y }); $("p:last").text("left: " + x + ", top: " + y); } } }); // Wire up the draggable behavior (when hub is done starting) // "done" is a jquery deferred method $.connection.hub.start().done(function () { $shape.draggable({ // Implement draggable effect for jquery drag: function () { // Tell the server that the shape was just dragged hub.moveShape(this.offsetLeft, this.offsetTop); } }); }) }); 

10. वेब रोल प्रोजेक्ट पर राइट-क्लिक करें और Add , New Item चुनें


11. वेब और HTML पेज का चयन करें, इसे MoveShape.htm नाम दें


12. फ़ाइल में निम्न कोड जोड़ें:

 <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> #shape { width: 200px; height: 200px; background: #ccc; border: 2px solid #333; } p { margin-left:10px; } </style> </head> <body> <div id="shape"></div> <script src="../Scripts/jquery-1.6.4.js" type="text/javascript"></script> <script src="../Scripts/jquery-ui-1.8.18.js" type="text/javascript"></script> <script src="../Scripts/jquery.signalR.js" type="text/javascript"></script> <script src="/signalr/hubs" type="text/javascript"></script> <script src="MoveShape.js" type="text/javascript"></script> <div> <p>Hello</p></div><p></p> </body> </html> 

आवेदन परीक्षण

Windows Azure एमुलेटर में प्रोजेक्ट चलाएँ। MoveShape.hrm प्रारंभ करने से पहले पृष्ठ को सेट करना याद रखें।
1. डिबग का चयन करें , मेनू से डिबगिंग प्रारंभ करें । Windows Azure कंप्यूट इम्यूलेटर और Windows Azure स्टोरेज एमुलेटर लॉन्च होता है और MoveShape.hrm स्टार्ट पेज खुलता है


2. IE या किसी अन्य ब्राउज़र को लॉन्च करें और इसमें लिंक 127.0.0.1 : 81 / MoveShape.htm पेस्ट करें
3. दो विंडो को साइड में रखें और जांचें कि किसी भी ब्राउजर में फिगर को हिलाने पर वह दूसरे में चला जाएगा।


4. विंडोज एज़्योर में प्रोजेक्ट को तैनात करने के लिए सब कुछ तैयार है।

विंडोज एज़्योर पर एक प्रोजेक्ट तैनात करना

लगभग। अनुवादक: चूँकि विंडोज अज़ोर में परियोजनाओं को हाब पर और रूसी-भाषी इंटरनेट पर कैसे तैनात किया जाए, इस बारे में बहुत सारे निर्देश हैं, इसलिए मैंने लेख के इस हिस्से का अनुवाद नहीं किया, ताकि पहले से ही पर्याप्त लंबे पाठ को अव्यवस्थित न किया जा सके।

निष्कर्ष

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