👦🏿 🆘 ✌🏻 नाम सॉकेट के लिए AngularJS सेवा अवधारणा 🐈 👨🏿‍🌾 👩🏾‍🚀

शुभ दिन, दोस्तों!

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

socket.io नामस्थान

जैसा कि यह निकला, सॉकेट.आईओ पुस्तकालय तथाकथित नामस्थान बनाने की क्षमता प्रदान करता है, जो एक ही भौतिक कनेक्शन के भीतर विभिन्न उप प्रणालियों से मल्टीप्लेक्स संदेशों की मदद करते हैं। इस मामले में क्लाइंट कोड कुछ इस तरह दिखता है:

var channelMessages = io.connect('http://localhost:3000/messages'), channelMessages.on('message received', function() { /* notify about new message */ }); // ... channelCommands = io.connect('http://localhost:3000/commands'); channelCommands.emit('init'); channelCommands.on('command received', function() { /* process new command */ });

यानी प्रत्येक io.connect कॉल एक नया कनेक्शन ऑब्जेक्ट देता है जिसमें on और io.connect emit । यह ऐसे कनेक्शन ऑब्जेक्ट्स के लिए था जो मैं सर्वर के साथ सुविधाजनक संचार के लिए प्रत्येक के लिए एक AngularJS सेवा करना चाहता था।

AngularJS सेवा सॉकेट v.1

कई नामित सॉकेट प्राप्त करने की इच्छा के समय, सॉकेट के साथ काम करने की सेवा। इस लेख में विवरण की तरह कुछ देखा गया।

 app.factory('socket', function ($rootScope) { var socket = io.connect(); return { on: function (eventName, callback) { socket.on(eventName, function () { var args = arguments; $rootScope.$apply(function () { apply(socket, args); }); }); }, emit: function (eventName, data, callback) { socket.emit(eventName, data, function () { var args = arguments; $rootScope.$apply(function () { if (callback) { callback.apply(socket, args); } }); }) } }; });

वास्तव में, यह एक आदिम आवरण है जिसके चारों ओर एक संदेश भेजने की पुष्टि / पुष्टि प्राप्त करते समय सभी स्कैप के अपडेट के लिए अग्रणी और emit होता है। सेवा के प्रारंभ के दौरान सर्वर से कनेक्शन एक बार होता है (चूंकि सेवाओं की "सिंगलटन" सुनिश्चित करने के लिए AngularJS एक बार factory विधि को कॉल करता है)।

त्याग

हर छींक के लिए सभी स्कोप को अपडेट करना अच्छा नहीं है और आपको $apply() से अपडेट होने वाले क्षेत्र को कम से कम करने की कोशिश करनी चाहिए। लेकिन इस लेख के लिए, यह एक अपमानजनक है।

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

AngularJS सेवा सॉकेट v.2

विकास के इस बिंदु के आसपास, कुछ संज्ञानात्मक असंगति आ गई है। कई नामित कनेक्शन होने चाहिए, और एंगुलरजेएस में सेवा सिंगलटन है। इस समस्या को हल करने का पहला प्रयास यह विचार था कि एंगुलरजेएस पहले से ही जानता है कि बॉक्स के बाहर कुछ समान कैसे करना है। जैसा कि यह निकला, सेवाओं को बनाने के कम से कम 3 तरीके हैं। सबसे सरल module.service है। module.service , जिसे निर्माता स्वीकार करता है, जिसके साथ मांग पर एक सेवा ऑब्जेक्ट बनाया जाएगा। थोड़ा और अधिक लचीला तरीका module.factory , जो सेवा में वापस आने से पहले कुछ अतिरिक्त कार्यों को करने के लिए सीधे निर्माणकर्ता की तुलना में अधिक सुविधाजनक बनाता है। और सबसे लचीला तरीका है module.provider । नाम से देखते हुए, यह माना जा सकता है कि प्रदाता पर क्लाइंट मॉड्यूल की निर्भरता को इंगित करना संभव है, और नामित कोड /foo प्राप्त करने के लिए क्लाइंट कोड में socketsProvider.get('foo') जैसे कुछ लिखना संभव है। हालाँकि, module.provider आपको केवल एक बार सेवा उदाहरण को कॉन्फ़िगर करने की अनुमति देता है, और क्लाइंट कोड प्रदाता पर, बल्कि सीधे, सेवा पर निर्भर नहीं होना चाहिए।

सहकर्मियों के साथ समस्या पर चर्चा करने के बाद, प्रथम पैरामीटर के रूप में namespace पैरामीटर जोड़कर सॉकेट सेवा के on और emit का विस्तार करने का विचार आया, और सेवा के अंदर आलसी कनेक्शन का एक पूल रखा। प्रत्येक कॉल on या emit , यह जांचना आवश्यक होगा कि क्या कोई कनेक्शन पहले से दिए गए नामस्थान के साथ मौजूद है, और यदि नहीं, तो एक नया बनाएं। और नामित कनेक्शन वस्तुओं के कार्यान्वयन के लिए, हल्के सेवाओं socketFoo , socketBar , इत्यादि को बनाने के लिए आवश्यक होगा, उनके स्वयं के कार्यान्वयन होने और emit करने के लिए socket.on और socket.emit करना, नाम और पैरामीटर को 'फू' और 'बार' के निरंतर मूल्यों के साथ ठीक करना। एक काम कर रहे समाधान, लेकिन एक महत्वपूर्ण कमी के साथ - सॉकेट विधियों के सेट का विस्तार करते समय, socketFoo और socketBar सेवा ग्राहक मौजूदा socketFoo और socketBar सेवा कोड को बदलने के बिना नए सॉकेट विधियों को कॉल करने में सक्षम नहीं होंगे।

अपने दिमाग को लुटने के बाद, मैं थोड़ा और याद करने में सक्षम था कि कोई भी वस्तु, जिसमें एक फंक्शन भी शामिल है, अंगरेजों की सेवा के रूप में कार्य कर सकती है! उदाहरणों के रूप में सेवाओं का उपयोग करने का क्लासिक पैटर्न निम्न दृष्टिकोण में बदला जा सकता है:

 var module = angular.module('myApp.services', []); app.factory('MyService', function() { function MyService(options) { /*    */ } MyService.prototype.baz = function() { /* ... */ }; MyService.prototype.qux = function() { /* ... */ }; return MyService; }); // ... module.factory('clientService', function(MyService) { var myService = new MyService({foo: 1, bar: 42}); myService.qux(); // return ... });

न केवल सेवा बनाने का तरीका बदल गया है, बल्कि नामकरण का तरीका भी बदल गया है। पारंपरिक camelCase बजाय (जिसका अर्थ है कि हम एक उदाहरण के साथ काम कर रहे हैं), CamelCase उपयोग यह दिखाने के लिए किया जाता है कि सेवा वास्तव में एक निर्माता है। इस दृष्टिकोण का उपयोग करते हुए, Socket सेवा को लागू किया गया था:

Socket.js

 var services = angular.module('myApp.services', []); services.factory('Socket', ['$rootScope', function($rootScope) { var connections = {}; //  ,       function getConnection(channel) { if (!connections[channel]) { connections[channel] = io.connect('http://localhost:3000/' + channel); } return connections[channel]; } //    ,   namespace-  . function Socket(namespace) { this.namespace = namespace; } Socket.prototype.on = function(eventName, callback) { var con = getConnection(this.namespace), self = this; //      con.on(eventName, function() { var args = arguments; $rootScope.$apply(function() { callback.apply(con, args); }); }); }; Socket.prototype.emit = function(eventName, data, callback) { var con = getConnection(this.namespace); //     . con.emit(eventName, data, function() { var args = arguments; $rootScope.$apply(function() { if (callback) { callback.apply(con, args); } }); }) }; return Socket; }]);

नामित कनेक्शन के विशिष्ट कार्यान्वयन, जिस पर ग्राहक मॉड्यूल निर्भर करेगा, कुछ इस तरह दिखाई देगा:

Examples.js

 var services = angular.module('myApp.services.channels', []); //  . services.factory('channelFoo', function(Socket) { return new Socket('foo'); }); //    . services.factory('channelBar', function(Socket) { function ChannelBar() { this.namespace = 'bar'; } ChannelBar.prototype = angular.extend(Socket.prototype, {}); ChannelBar.prototype.start = function() { this.emit('start'); }; ChannelBar.prototype.exit = function() { this.emit('exit'); }; return new ChannelBar(); });

इस तरह से बनाए गए चैनल में अंतर्निहित सॉकेट ऑब्जेक्ट से सभी कार्यक्षमता को स्वचालित रूप से प्राप्त करने का लाभ होता है, और socket.on और socket.emit के मामले में की तुलना में काफी कम टेम्पलेट कोड की आवश्यकता होती है।

निष्कर्ष

Socket सेवा कार्यान्वयन का दिया गया उदाहरण केवल एक अवधारणा है। इसका पूर्ण उपयोग करने के लिए, एक io ऑब्जेक्ट को इंजेक्ट करने की क्षमता, कनेक्शन स्ट्रिंग और प्राधिकरण के लिए सेटिंग्स, साथ ही सर्वर से संदेश प्राप्त करते समय अद्यतन किए जाने वाले स्कोप को निर्दिष्ट करने की क्षमता निर्दिष्ट करने की क्षमता के साथ इसे पूरक करना आवश्यक है। एक उदाहरण के साथ कोड जीथब पर पाया जा सकता है।

नाम सॉकेट के लिए AngularJS सेवा अवधारणा

socket.io नामस्थान

AngularJS सेवा सॉकेट v.1

AngularJS सेवा सॉकेट v.2

निष्कर्ष

More articles: