सर्वर पर Ext JS

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

यह संभव है कि स्नेचा के दिमाग की उपज इस वंश से संबंधित हो, लेकिन यहां तक ​​कि इसके राजसी विरोधियों का मानना ​​है कि गंभीर इंट्रानेट परियोजनाओं के निर्माण के लिए सबसे अच्छा समाधान खोजना मुश्किल है।

मेरी राय में, एक्सट जेएस में सबसे मूल्यवान चीज यूआई घटकों का संग्रह नहीं है, बल्कि एक अच्छा ओओपी वास्तुकला है। यहां तक ​​कि हाल के वर्षों में जेएस के तेजी से विकास को ध्यान में रखते हुए, 7 साल पहले एक्सट जेएस में लागू की गई कई आवश्यक चीजें अभी भी मूल वर्गों (नाम स्थान, मिश्रण, स्थिर गुण, माता-पिता के तरीकों की सुविधाजनक कॉलिंग) में गायब हैं। इसने मुझे कुछ साल पहले बैकेंड में एक्सट जेएस कक्षाओं के प्रक्षेपण के साथ प्रयोग करने के लिए प्रेरित किया। इसी तरह के पहले प्रयोगों के बारे में मैंने पहले ही हैबे पर पोस्ट किया था। यह लेख पुराने विचारों के एक नए कार्यान्वयन और कई नए लोगों का वर्णन करता है।

शुरू करने से पहले, इस प्रश्न पर ध्यान दें: आपको क्या लगता है, इसे कहाँ निष्पादित किया गया है और नीचे कोड स्निपेट क्या करता है?

Ext.define('Module.message.model.Message', { .... /* scope:server */ ,async newMessage() { ......... this.fireEvent('newmessage', data); ...... } ... }) 

इस कोड को सर्वर पर निष्पादित किया जाता है और सर्वर से जुड़े सभी क्लाइंट मशीनों पर "Module.message.model.Message" वर्ग के सभी उदाहरणों में "newmessage" इवेंट उठाता है।

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

स्थापना

शुरू करने के लिए, हमें 9 + और रेडिस-सर्वर नोडज की आवश्यकता है (यह माना जाता है कि वे पहले से ही स्थापित हैं)।

 git clone https://github.com/Kolbaskin/extjs-backend-example cd extjs-backend-example npm i 

हम सर्वर शुरू करते हैं:

 node server 

ब्राउज़र में, लोकलहोस्ट पेज खोलें: 3000 / www / ऑर्टिकल /
कुछ उपनाम दर्ज करें और एंटर दबाएं।

परियोजना एक डेमो है, इसलिए पुराने ब्राउज़रों के लिए कोई समर्थन नहीं है (ईएस 8 डिजाइन हैं), नए क्रोम या एफएफ का उपयोग करें।

सर्वर

क्रम में चलते हैं।

सर्वर कोड (server.js)

 //   http-  express //   Ext JS     express const express = require('express'); const staticSrv = require('extjs-express-static'); const app = express(); const bodyParser = require('body-parser'); //    global = { config: require('config') } //     Ext JS require('extjs-on-backend')({ //     express app, //         wsClient: 'Base.wsClient' }); //    Ext.Loader.setPath('Api', 'protected/rest'); Ext.Loader.setPath('Base', 'protected/base'); Ext.Loader.setPath('Www', 'protected/www'); //   http   app.use( bodyParser.json() ); app.use(bodyParser.urlencoded({ extended: true })); //     Ext JS  app.use('/api/auth', Ext.create('Api.auth.Main')); app.use('/www/auth', Ext.create('Www.login.controller.Login')); //    app.use(staticSrv(__dirname + '/static')); //   const server = app.listen(3000, () => { console.log('server is running at %s', server.address().port); }); 

जैसा कि आप देख सकते हैं, यहां सब कुछ एक्सप्रेस पर सर्वर के लिए कम या ज्यादा मानक है। ब्याज संबंधित मार्गों को पूरा करने के लिए एक्सट जेएस वर्गों का समावेश है:

 app.use('/api/auth', Ext.create('Api.auth.Main')); app.use('/www/auth', Ext.create('Www.login.controller.Login')); 

अन्य एपीआई कार्यान्वयन

Api.auth.Main वर्ग REST API (संरक्षित / बाकी / व्यावसायिक / Main.js) के लिए अनुरोध करता है।

 Ext.define('Api.auth.Main', { extend: 'Api.Base', //   //     routes: [ { path: '/', get: 'login'}, { path: '/restore', post: 'restoreLogin' }, { path: '/registration', post: 'newuser'}, { path: '/users', get: 'allUsers'} ] //     : // {query: <...>, params: <...>, body: <...>} ,async login(data) { return {data:[{ id:1, subject: 111, sender:222, }]} } ,async restoreLogin() { ... } ,async newuser() { ... } ,async allUsers() { .... } }) 

सर्वर पर XTemplate का उपयोग करके HTML पृष्ठ पीढ़ी

दूसरी श्रेणी, Www.login.controller.Login, एक लॉगिन फ़ॉर्म (संरक्षित / www / लॉगिन / नियंत्रक / Login.js) के साथ एक नियमित HTML पृष्ठ बनाता है।

 Ext.define('Www.login.controller.Login', { //      "" : // ,    .. extend: 'Www.Base' //    //   ,   .. ,baseTpl: 'view/inner' //     // ,   ,loginFormTpl: 'login/view/login' //  ,routes: [ { path: '/', get: 'loginForm', post: 'doLogin'} ] //  html   //       ,async loginForm () { return await this.tpl(this.loginFormTpl, { pageTitle: 'Login page', date: new Date() }); } ,async doLogin (params, res) { if(params.body.name && /^[a-z0-9]{2,10}$/i.test(params.body.name)) { this.redirect(`/index.html?name=${params.body.name}`, res); return; } return await this.tpl(this.loginFormTpl, { pageTitle: 'Login page', date: new Date() }); } }) 

टेम्पलेट मानक XTemplate (संरक्षित / www / लॉगिन / देखने / login.tpl) का उपयोग करते हैं

 <h2>{pageTitle} (date: {[Ext.Date.format(values.date,'dmY')]})</h2> <form method="post"> <input name="name" placeholder="name"> <button type="submit">enter</button> </form> 

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

ग्राहक

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

यह सब app.js से शुरू होता है

 //   Ext.Loader.setConfig({ enabled: true, paths: { "Core": "app/core", "Admin": "app/admin", "Module": "app/admin/modules", "Ext.ux": "ext/ux" } }); //    this.token = Ext.data.identifier.Uuid.createRandom()(); //      //    () //    (   ) Ext.WS = Ext.create('Core.WSocket', { token: this.token, user: new URLSearchParams(document.location.search).get("name") }); //   Ext.application({ name: 'Example', extend: 'Ext.app.Application', requires: ['Admin.*'], autoCreateViewport: 'Admin.view.Viewport' }) 

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

पृष्ठ पर तत्वों का लेआउट Admin.view.Viewport वर्ग (स्थिर / एप्लिकेशन / दृश्य / Viewport.js) में निहित है। वहां कुछ भी दिलचस्प नहीं है।

मुख्य कार्यात्मक तत्व (उपयोगकर्ता सूची, संदेश बार और भेजने का तरीका) अलग-अलग मॉड्यूल के रूप में कार्यान्वित किए जाते हैं।

उपयोगकर्ता सूची

इस सूची का सरल एल्गोरिथ्म इस प्रकार है: पेज खोलने के क्षण में, वर्तमान उपयोगकर्ता सर्वर से लोड होते हैं। जब नए उपयोगकर्ता कनेक्ट होते हैं, तो सर्वर "Module.users.model.UserModel" वर्ग में एक "ऐड" ईवेंट उत्पन्न करता है, जब डिस्कनेक्ट किया जाता है, तो उसी क्लास में, "हटाएं" ईवेंट उठाया जाता है। बात यह है कि ईवेंट को सर्वर साइड पर ट्रिगर किया गया है, और आप इसे क्लाइंट पर ट्रैक कर सकते हैं।

अब, पहले चीजें पहले। ग्राहक की ओर से, स्टोर डेटा (स्थिर / एप्लिकेशन / मॉड्यूल / उपयोगकर्ता / स्टोर / UsersStore.js) को साझा करता है

 Ext.define('Module.users.store.UsersStore', { extend: 'Ext.data.Store' ,autoLoad: true ,total: 0 ,constructor() { //         this.dataModel = Ext.create('Module.users.model.UserModel'); //      this.dataModel.on({ add: (records) => { this.onDataAdd(records) }, remove: (records) => { this.onDataRemove(records) } }) this.callParent(arguments) } //   load ,async load() { //      const data = await this.dataModel.$read(); //   this.total = data.total; //    UI this.loadData(data.data); } ,getTotalCount() { return this.total; } //          ,onDataAdd(records) { this.add(records[0]); } //   --  ,onDataRemove(records) { this.remove(this.getById (records[0].id)) } }); 

2 दिलचस्प बिंदु हैं। सबसे पहले, लाइन में "कास्ट डेटा = इस का इंतजार करें। MataModel। $ Read ();" मॉडल का सर्वर विधि कहा जाता है। अब आपको अजाक्स, समर्थन प्रोटोकॉल आदि का उपयोग करने की आवश्यकता नहीं है, बस सर्वर विधि को स्थानीय कहें। इसी समय, सुरक्षा का बलिदान नहीं किया जाता है (नीचे उस पर अधिक)।

दूसरे, इस.dataModel.on (...) का मानक निर्माण आपको सर्वर द्वारा उत्पन्न होने वाली घटनाओं को ट्रैक करने की अनुमति देता है।

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

 Ext.define('Module.users.model.UserModel', { extend: 'Core.data.DataModel' /* scope:client */ ,testClientMethod() { ... } ,testGlobalMethod() { ... } /* scope:server */ ,privateServerMethod() { .... } /* scope:server */ ,async $read(params) { //      redis const keys = await this.getMemKeys('client:*'); let data = [], name; for(let i = 0;i<keys.length;i++) { //         name = await this.getMemKey(keys[i]); if(name) { data.push({ id: keys[i].substr(7), name }) } } //    return { total: data.length, data } } }) 

टिप्पणियों पर ध्यान दें / * गुंजाइश: सर्वर * / और / * गुंजाइश: क्लाइंट * / - ये निर्माण सर्वर के लिए लेबल हैं जिसके द्वारा यह विधि के प्रकार को निर्धारित करता है।

testClientMethod - यह विधि क्लाइंट पर विशेष रूप से चलती है और केवल क्लाइंट साइड पर उपलब्ध है।
testGlobalMethod - यह विधि क्लाइंट और सर्वर पर चलती है और क्लाइंट और सर्वर साइड पर उपयोग के लिए उपलब्ध है।
PrivateServerMethod - विधि को सर्वर पर निष्पादित किया जाता है और यह केवल सर्वर पर कॉल करने के लिए उपलब्ध है।
$ रीड सबसे दिलचस्प प्रकार का तरीका है जो केवल सर्वर साइड पर चलता है, लेकिन आप इसे क्लाइंट और सर्वर दोनों पर कॉल कर सकते हैं। $ उपसर्ग क्लाइंट साइड पर उपलब्ध किसी भी सर्वर-साइड पद्धति को बनाता है।

आप वेब सॉकेट का उपयोग करके ग्राहक कनेक्शन और वियोग को ट्रैक कर सकते हैं। प्रत्येक उपयोगकर्ता कनेक्शन (संरक्षित / आधार / wsClient.js) के लिए Base.wsClient वर्ग का एक उदाहरण बनाया गया है।

 Ext.define('Base.wsClient', { extend: 'Core.WsClient' //      ,usersModel: Ext.create('Module.users.model.UserModel') //       ,async onStart() { //   "add"    this.usersModel.fireEvent('add', 'all', [{id: this.token, name: this.req.query.user}]); //     redis await this.setMemKey(`client:${this.token}`, this.req.query.user || ''); //   ""      , //     await this.queueProcess(`client:${this.token}`, async (data, done) => { const res = await this.prepareClientEvents(data); done(res); }) } //      ,onClose() { //   "remove"    this.usersModel.fireEvent('remove', 'all', [{id: this.token, name: this.req.query.user}]) this.callParent(arguments); } }) 

एक मानक के विपरीत, फायरएवेंट विधि में एक अतिरिक्त पैरामीटर होता है, जहां यह पारित किया जाता है कि किस क्लाइंट को घटना को ट्रिगर किया जाना चाहिए। यह एक एकल ग्राहक पहचानकर्ता, पहचानकर्ताओं की एक सरणी, या स्ट्रिंग "सभी" को पारित करने के लिए स्वीकार्य है। बाद के मामले में, घटना को सभी जुड़े ग्राहकों पर ट्रिगर किया जाएगा। अन्यथा, यह एक मानक अग्नि है।

संदेश भेजना और प्राप्त करना

प्रपत्र नियंत्रक (स्थिर / एप्लिकेशन / व्यवस्थापक / मॉड्यूल / संदेश / दृश्य / FormController.js) संदेश भेजने के लिए जिम्मेदार है।

 Ext.define('Module.messages.view.FormController', { extend: 'Ext.app.ViewController' ,init(view) { this.view = view; //     this.model = Ext.create('Module.messages.model.Model'); //      this.msgEl = this.view.down('[name=message]'); //     this.usersGrid = Ext.getCmp('users-grid') //    "" this.control({ '[action=submit]' : {click: () => {this.newMessage() }} }) } //     ,newMessage() { let users = []; //     const sel = this.usersGrid.getSelection(); if(sel && sel.length) { sel.forEach((s) => { users.push(s.data.id) }) } //        if(users.length && users.indexOf(Ext.WS.token) == -1) users.push(Ext.WS.token); //       this.model.$newmessage({ to: users, user: Ext.WS.user, message: this.msgEl.getValue() }) //    this.msgEl.setValue(''); } }); 

संदेश सर्वर पर कहीं भी सहेजा नहीं गया है, "newmessage" घटना बस ट्रिगर है। ब्याज की कॉल "this.fireEvent ('newmessage', data.to, msg);" है, जहां ग्राहक पहचानकर्ताओं को संदेश प्राप्तकर्ता के रूप में पारित किया जाता है। इस प्रकार, निजी संदेशों का वितरण कार्यान्वित किया जाता है (स्थैतिक / एप्लिकेशन / व्यवस्थापक / मॉड्यूल / संदेश / मॉडल / मॉडल.जेएस)।

 Ext.define('Module.messages.model.Model', { extend: 'Core.data.DataModel' /* scope:server */ ,async $newmessage(data) { const msg = { user: data.user, message: data.message } if(data.to && Ext.isArray(data.to) && data.to.length) { this.fireEvent('newmessage', data.to, msg); } else { this.fireEvent('newmessage', 'all', msg); } return true; } }) 

उपयोगकर्ताओं के साथ, संदेश सूची के लिए डेटा स्टोर (स्थिर / एप्लिकेशन / व्यवस्थापक / मॉड्यूल / संदेश / स्टोर / MessageStore.js) द्वारा संचालित होता है

 Ext.define('Module.messages.store.MessagesStore', { extend: 'Ext.data.Store', fields: ['user', 'message'], constructor() { //       Ext.create('Module.messages.model.Model', { listeners: { newmessage: (mess) => { this.add(mess) } } }) this.callParent(arguments); } }); 

सामान्य तौर पर, यह सब इस उदाहरण में दिलचस्प है।

संभव प्रश्न

क्लाइंट पर सर्वर के तरीकों की उपलब्धता, ज़ाहिर है, अच्छी है, लेकिन सुरक्षा के बारे में क्या? यह पता चला है कि एक दुष्ट हैकर सर्वर कोड देख सकता है और बैकएंड को क्रैक करने की कोशिश कर सकता है?

नहीं, वह सफल नहीं होगा। क्लाइंट ब्राउज़र पर भेजे जाने पर सबसे पहले, सभी सर्वर विधियों को क्लास कोड से हटा दिया जाता है। इस उद्देश्य के लिए, टिप्पणियों / निर्देशों / * गुंजाइश का इरादा है: ... * /। दूसरे, सबसे सार्वजनिक सर्वर-साइड पद्धति का कोड एक मध्यवर्ती निर्माण द्वारा प्रतिस्थापित किया जाता है जो क्लाइंट साइड पर दूरस्थ कॉल तंत्र को लागू करता है।

फिर से सुरक्षा के बारे में। यदि क्लाइंट पर सर्वर विधियों को बुलाया जा सकता है, तो यह पता चला है, क्या मैं ऐसी कोई विधि कह सकता हूं? और अगर यह एक डेटाबेस सफाई विधि है?

क्लाइंट से, आप केवल उन विधियों को कॉल कर सकते हैं जिनके नाम में $ उपसर्ग है। इस तरह के तरीकों के लिए, आप स्वयं चेक और एक्सेस के तर्क को निर्धारित करते हैं। एक बाहरी उपयोगकर्ता के पास $ के बिना सर्वर विधियों तक पहुंच नहीं है, वह उन्हें भी नहीं देखेगा (पिछले उत्तर देखें)

ऐसा लगता है कि आपको एक अखंड प्रणाली मिली है जिसमें क्लाइंट और सर्वर का अटूट संबंध है। क्या क्षैतिज स्केलिंग संभव है?

प्रणाली, वास्तव में, अखंड दिखती है, लेकिन ऐसा नहीं है। क्लाइंट और सर्वर विभिन्न मशीनों पर "लाइव" कर सकते हैं। क्लाइंट को किसी भी तृतीय-पक्ष वेब सर्वर (Nginx, Apache, आदि) पर चलाया जा सकता है। क्लाइंट और सर्वर के पृथक्करण का मुद्दा बहुत आसानी से स्वचालित प्रोजेक्ट बिल्डर द्वारा हल किया जाता है (मैं इस बारे में एक अलग पोस्ट लिख सकता हूं)। आंतरिक सेवा मैसेजिंग तंत्र को लागू करने के लिए, सिस्टम कतार का उपयोग करता है (अर्थात, इसके लिए Redis आवश्यक है)। इस प्रकार, सर्वर भाग को केवल नई मशीनों को जोड़कर क्षैतिज रूप से आसानी से बढ़ाया जा सकता है।

सामान्य विकास के दृष्टिकोण के साथ, एक नियम के रूप में, बैकएंड एपीआई का एक निश्चित सेट प्रदान करता है जिससे आप विविध क्लाइंट एप्लिकेशन (वेबसाइट, मोबाइल एप्लिकेशन) से जुड़ सकते हैं। आपके मामले में, यह पता चला है कि एक्सट जेएस में लिखा गया केवल एक ग्राहक बैकएंड के साथ काम कर सकता है?

सर्वर पर, विशेष रूप से मॉड्यूल मॉडल में, एक निश्चित व्यावसायिक तर्क लागू किया जाता है। REST API के माध्यम से इस तक पहुँच प्रदान करने के लिए, एक छोटा "आवरण" पर्याप्त है। इस लेख के पहले भाग में एक संबंधित उदाहरण प्रस्तुत किया गया है।

निष्कर्ष

जैसा कि आप देख सकते हैं, काफी जटिल अनुप्रयोगों के आरामदायक कोडिंग के लिए, सामने के छोर और बैकएंड पर एक पुस्तकालय के साथ करना काफी संभव है। इसके महत्वपूर्ण लाभ हैं।

विकास की प्रक्रिया को गति देना। टीम के प्रत्येक सदस्य बैकएंड और फ्रंटेंड पर काम कर सकते हैं। डाउनटाइम इस कारण से "मैं इस एपीआई के सर्वर पर आने का इंतजार कर रहा हूं" अब प्रासंगिक नहीं है।

कम कोड। कोड के समान वर्गों का उपयोग क्लाइंट पर और सर्वर पर (चेक, सत्यापन, आदि) किया जा सकता है।

ऐसी प्रणाली को बनाए रखना बहुत सरल और सस्ता है। दो विविध प्रोग्रामर के बजाय, सिस्टम एक (या वही दो लेकिन विनिमेय) का समर्थन करने में सक्षम होगा। इसी कारण से, टीम के कारोबार से जुड़े जोखिम भी कम हैं।

बॉक्स से रीयल-टाइम सिस्टम बनाने की क्षमता।

बैकएंड और फ्रंटेंट के लिए एकल परीक्षण प्रणाली का उपयोग करना।