वेब वर्कर्स के साथ अपने एंगुलर ऐप की गति कैसे बढ़ाएं

आपको वेब वर्कर की आवश्यकता क्यों है? वेब वर्कर एक वेब एप्लिकेशन के लिए एक कोड घटक है। यह डेवलपर को जावास्क्रिप्ट कार्य के लिए निष्पादन का एक नया थ्रेड बनाने की अनुमति देता है ताकि यह मुख्य ऐप के निष्पादन को बाधित न करे।

पहली नज़र में, ऐसा लग सकता है कि ब्राउज़र स्वाभाविक रूप से थ्रेडिंग का समर्थन करते हैं और डेवलपर को कुछ खास करने की ज़रूरत नहीं है। दुर्भाग्य से, ऐसा नहीं है। वेब वर्कर एक वास्तविक समवर्ती समस्या का समाधान करते हैं।

वेब वर्कर वेब ब्राउज़र के अपेक्षित कार्यात्मक मानकों का एक हिस्सा हैं, और उनके लिए विनिर्देश W3C पर लिखे गए हैं। Angular फ्रेमवर्क ने हमारे लिए वेब वर्कर्स को लपेटा है, और हम उन्हें Angular कमांड लाइन इंटरफ़ेस (CLI) का उपयोग करके आसानी से अपने ऐप में जोड़ सकते हैं।

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

क्या जावास्क्रिप्ट स्वाभाविक रूप से समवर्ती नहीं है?

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

वेब डेवलपर के लिए यह संकेत देता है कि ब्राउज़र समवर्ती कार्य कर सकता है। हालाँकि, जब जावास्क्रिप्ट की बात आती है, तो ब्राउज़र वास्तव में एक समय में केवल एक प्रक्रिया निष्पादित करता है।

अधिकांश आधुनिक वेबसाइट, सिंगल पेज ऐप (SPA) और अधिक आधुनिक प्रोग्रेसिव वेब ऐप (PWA) जावास्क्रिप्ट पर निर्भर करते हैं और आमतौर पर उनमें कई जावास्क्रिप्ट मॉड्यूल होते हैं। हालाँकि, जब भी वेब ऐप जावास्क्रिप्ट चला रहा होता है, तो ब्राउज़र गतिविधि के एक ही थ्रेड तक सीमित होता है। सामान्य परिस्थितियों में कोई भी जावास्क्रिप्ट एक साथ नहीं चलेगा।

इसका मतलब है कि अगर हमारे पास जावास्क्रिप्ट मॉड्यूल में से किसी एक में लंबे समय तक चलने वाला या प्रक्रिया-गहन कार्य परिभाषित है, तो उपयोगकर्ता को ऐप में रुकावट या हैंग होने का अनुभव हो सकता है। साथ ही, ब्राउज़र उपयोगकर्ता इंटरफ़ेस (UI) को अपडेट करने से पहले प्रक्रिया पूरी होने का इंतज़ार करता है। इस तरह के व्यवहार से उपयोगकर्ता हमारे वेब ऐप या SPA पर भरोसा खो देते हैं, और हम में से कोई भी ऐसा नहीं चाहता।

जावास्क्रिप्ट समवर्तीता के लिए एक वेब वर्कर

हम अपने वेब ऐप को समवर्ती जावास्क्रिप्ट थ्रेड चलाने में सक्षम बनाने के लिए दो पैन के साथ एक उदाहरण पृष्ठ बनाएंगे। एक पैन में, हमारे एप्लिकेशन का UI सर्कल के साथ एक ग्रिड द्वारा दर्शाया गया है, जो लगातार चित्र को अपडेट करता है और माउस क्लिक पर प्रतिक्रिया करता है। दूसरा पैन एक लंबे समय तक चलने वाली प्रक्रिया को होस्ट करेगा, जो आम तौर पर UI थ्रेड को ब्लॉक करता है और UI को अपना काम करने से रोकता है।

अपने UI को रिस्पॉन्सिव बनाने के लिए, हम अपनी लंबी प्रक्रिया को वेब वर्कर में चलाएँगे, जो इसे एक अलग थ्रेड पर निष्पादित करेगा और इस तरह से UI लॉजिक निष्पादन को ब्लॉक नहीं करेगा। हम ऐप बनाने के लिए फ्रेमवर्क के रूप में Angular का उपयोग करेंगे क्योंकि यह वेब वर्कर को बनाना एक सरल एक-कमांड कार्य बनाता है।

Angular ऐप सेट अप करना

Angular CLI का उपयोग करने के लिए, हमें Node.js और NPM (Node Package Manager) इंस्टॉल करना होगा। एक बार जब हम सुनिश्चित कर लें कि Node और NPM इंस्टॉल हो गए हैं, तो कंसोल विंडो खोलें, फिर NPM के माध्यम से Angular CLI इंस्टॉल करें (यह एक बार की बात है):

 npm install -g @angular/cli

निर्देशिका को उस लक्ष्य निर्देशिका में बदलें जहाँ हम अपना नया ऐप टेम्पलेट बनाना चाहते हैं। अब, हम अपना ऐप बनाने के लिए तैयार हैं। ऐसा करने के लिए हम “ng new” कमांड का उपयोग करते हैं। हम अपने प्रोजेक्ट का नाम NgWebWorker रखेंगे:

 ng new NgWebWorker --no-standalone

प्रोजेक्ट विज़ार्ड पूछता है कि क्या हम अपने प्रोजेक्ट में रूटिंग शामिल करना चाहते हैं। हमें इस उदाहरण के लिए रूटिंग की आवश्यकता नहीं है, इसलिए n टाइप करें।

फिर यह पूछेगा कि हम किस प्रकार का स्टाइलशीट प्रारूप उपयोग करना चाहते हैं। Angular Sass और Less जैसे स्टाइलशीट प्रोसेसर का उपयोग करने का समर्थन करता है, लेकिन इस मामले में, हम सरल CSS का उपयोग करेंगे, इसलिए डिफ़ॉल्ट के लिए बस Enter दबाएँ।

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

इस बिंदु पर, Angular CLI ने एक प्रोजेक्ट बनाया है और इसे NgWebWorker फ़ोल्डर में रखा है। निर्देशिका को NgWebWorker में बदलें। Angular CLI ने हमारे Angular प्रोजेक्ट पर काम करने के लिए आवश्यक सभी चीजें बनाई हैं, जिसमें Node HTTP सर्वर को इंस्टॉल करना भी शामिल है। इसका मतलब है कि टेम्पलेट ऐप शुरू करने के लिए हमें बस इतना करना है:

 ng serve 

Angular CLI आपके प्रोजेक्ट को संकलित करता है और Node HTTP सर्वर शुरू करता है। अब, आप अपने ब्राउज़र में ऐप को <a href="http://localhost:4200"target="_blank"> URL पर इंगित करके लोड कर सकते हैं।

CLI से हमारा पहला Angular ऐप

जब हम पेज लोड करते हैं, तो हमें शीर्ष पर प्रोजेक्ट नाम के साथ मूल टेम्पलेट दिखाई देता है।

“एनजी सर्व” चलाने का लाभ यह है कि कोड में किए गए किसी भी परिवर्तन से ब्राउज़र में साइट स्वचालित रूप से रिफ्रेश हो जाएगी, जिससे परिवर्तनों को प्रभावी होते देखना बहुत आसान हो जाएगा।

हम जिस कोड पर ध्यान केन्द्रित करेंगे, उसका अधिकांश भाग /src/app निर्देशिका के अंतर्गत है।

app.component.html में मुख्य पृष्ठ प्रदर्शित करने के लिए वर्तमान में उपयोग किए जाने वाले एक घटक के लिए HTML शामिल है। घटक कोड app.component.ts (टाइपस्क्रिप्ट) फ़ाइल में दर्शाया गया है।

हम app.component.html की सामग्री को हटा देंगे और अपना खुद का लेआउट जोड़ देंगे। हम एक विभाजित पृष्ठ बनाएंगे जो बाईं ओर हमारे लंबे समय से चल रहे प्रक्रिया मूल्यों को प्रदर्शित करेगा और दाईं ओर कुछ यादृच्छिक वृत्त बनाएगा। यह हमारे ब्राउज़र को दो अतिरिक्त वेब वर्कर थ्रेड चलाने की अनुमति देगा जो स्वतंत्र रूप से काम करेंगे ताकि आप Angular Web Workers को कार्रवाई में देख सकें।

लेख के बाकी सभी कोड GitHub रिपोजिटरी से प्राप्त किए जा सकते हैं।

यहां अंतिम पृष्ठ कुछ इस प्रकार दिखाई देगा जब यह यादृच्छिक वृत्त बनाएगा (लंबे समय तक चलने वाली प्रक्रिया शुरू होने से पहले)।

app.component.html में कोड को निम्नलिखित से बदलें:

 <div id="first"> <div class="innerContainer"> <button (click)="longLoop()">Start Long Process</button> </div> <div class="innerContainer"> <textarea rows="20" [value]="(longProcessOutput)"></textarea> </div> </div>

कोड डाउनलोड में styles.css में कुछ आईडी और सीएसएस क्लासेस और संबंधित शैलियाँ भी शामिल हैं, जिनका उपयोग यूआई के बहुत सरल स्वरूपण के लिए किया जाता है, इसलिए हमारे पास दो अनुभाग (बाएं और दाएं) और अन्य बुनियादी स्टाइलिंग हैं।

 .container { width: 100%; margin: auto; padding: 1% 2% 0 1%; } .innerContainer{ padding: 1%; } #first { width: 50%; height: 405px; float:left; background-color: lightblue; color: white; } #second { width: 50%; float: right; background-color: green; color: white; }

यहाँ ध्यान देने वाली महत्वपूर्ण बात यह है कि हमने बटन में Angular इवेंट बाइंडिंग (क्लिक) जोड़ा है। जब उपयोगकर्ता बटन पर क्लिक करता है, तो कॉम्पोनेंट TypeScript फ़ाइल, app.component.ts में पाए जाने वाले longLoop मेथड को कॉल करके लंबी प्रक्रिया शुरू की जाती है।

 title = 'NgWebWorker'; longProcessOutput: string = 'Long\nprocess\noutput\nwill\nappear\nhere\n'; fibCalcStartVal: number; longLoop() { this.longProcessOutput = ''; for (var x = 1; x <= 1000000000; x++) { var y = x / 3.2; if (x % 20000000 == 0) { this.longProcessOutput += x + '\n'; console.log(x); } } }

यह हमारे घटक के सदस्य चर, longProcessOutput में लेखन करते हुए 10 बिलियन पुनरावृत्तियों को चलाता है।

चूँकि हमने उस सदस्य चर को app.component.html (textarea तत्व पर) में बाँध दिया है, इसलिए UI हर बार चर के अपडेट होने पर अपडेट को दर्शाएगा। HTML में हम जो मान सेट करते हैं, वह वह जगह है जहाँ हम सदस्य चर को बाँधते हैं।

 <textarea rows="20" [value]="longProcessOutput"></textarea>

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

Angular CLI का उपयोग करके एक रैंडम सर्कल घटक जोड़ें

इसके बाद, हम यादृच्छिक वृत्त बनाने के लिए एक “सर्कल” घटक जोड़ेंगे। हम इसे Angular CLI का उपयोग करके निम्न कमांड के साथ कर सकते हैं:

 ng generate component circle

कमांड ने सर्कल नाम से एक नया फ़ोल्डर बनाया और चार नई फ़ाइलें बनाईं:

• सर्कल.घटक.html

• circle.component.spec.ts (यूनिट परीक्षण)

• circle.component.ts (टाइपस्क्रिप्ट कोड)

• circle.component.css (शैलियाँ जो केवल इस घटक के लिए संबद्ध HTML पर लागू होंगी)

  
  

HTML सरल है। हमें बस उस HTML की आवश्यकता है जो हमारे घटक का प्रतिनिधित्व करेगा। हमारे मामले में, यह पृष्ठ के दाईं ओर का घटक है, जो हल्के हरे रंग का ग्रिड प्रदर्शित करेगा और वृत्त खींचेगा। यह ड्राइंग HTML कैनवास तत्व के माध्यम से की जाती है।

 <div id="second"> <canvas #mainCanvas (mousedown)="toggleTimer()"></canvas> </div>

हम mousedown इवेंट को पकड़ने के लिए Angular इवेंट बाइंडिंग जोड़कर सर्कल्स की ड्राइंग शुरू और बंद करते हैं। यदि उपयोगकर्ता कैनवास क्षेत्र के अंदर कहीं भी क्लिक करता है, तो यदि प्रक्रिया पहले से शुरू नहीं हुई है, तो सर्कल्स ड्राइंग शुरू हो जाएंगे। यदि प्रक्रिया पहले से शुरू हो गई है, तो टॉगल टाइमर विधि ( circle.component.ts में पाई जाती है) ग्रिड को साफ़ करती है और सर्कल्स की ड्राइंग को रोक देती है।

टॉगलटाइमर प्रत्येक 100 मिलीसेकंड (10 वृत्त/सेकंड) पर यादृच्छिक रूप से चयनित रंग के साथ यादृच्छिक स्थान पर एक वृत्त खींचने के लिए बस setInterval का उपयोग करता है।

 toggleTimer(){ if (CircleComponent.IntervalHandle === null){ CircleComponent.IntervalHandle = setInterval(this.drawRandomCircles,50); } else{ clearInterval(CircleComponent.IntervalHandle); CircleComponent.IntervalHandle = null; this.drawGrid(); } }

Circle.component.ts में और भी कोड है जो कैनवस एलिमेंट को सेट करता है, मेंबर वैरिएबल को इनिशियलाइज़ करता है और ड्रॉइंग करता है। जब इसे जोड़ा जाता है, तो आपका कोड इस तरह दिखना चाहिए:

 import { ViewChild, Component, ElementRef, AfterViewInit } from '@angular/core'; @Component({ selector: 'app-circle', templateUrl: './circle.component.html', styleUrl: './circle.component.css', }) export class CircleComponent implements AfterViewInit { title = 'NgWebWorker'; static IntervalHandle = null; static ctx: CanvasRenderingContext2D; GRID_LINES: number = 20; lineInterval: number = 0; gridColor: string = 'lightgreen'; static CANVAS_SIZE: number = 400; @ViewChild('mainCanvas', { static: false }) mainCanvas: ElementRef; constructor() { console.log('ctor complete'); } ngAfterViewInit(): void { CircleComponent.ctx = (<HTMLCanvasElement>( this.mainCanvas.nativeElement )).getContext('2d'); this.initApp(); this.initBoard(); this.drawGrid(); this.toggleTimer(); } initApp() { CircleComponent.ctx.canvas.height = CircleComponent.CANVAS_SIZE; CircleComponent.ctx.canvas.width = CircleComponent.ctx.canvas.height; } initBoard() { console.log('initBoard...'); this.lineInterval = Math.floor( CircleComponent.ctx.canvas.width / this.GRID_LINES ); console.log(this.lineInterval); } drawGrid() { console.log('drawGrid...'); CircleComponent.ctx.globalAlpha = 1; // fill the canvas background with white CircleComponent.ctx.fillStyle = 'white'; CircleComponent.ctx.fillRect( 0, 0, CircleComponent.ctx.canvas.height, CircleComponent.ctx.canvas.width ); for (var lineCount = 0; lineCount < this.GRID_LINES; lineCount++) { CircleComponent.ctx.fillStyle = this.gridColor; CircleComponent.ctx.fillRect( 0, this.lineInterval * (lineCount + 1), CircleComponent.ctx.canvas.width, 2 ); CircleComponent.ctx.fillRect( this.lineInterval * (lineCount + 1), 0, 2, CircleComponent.ctx.canvas.width ); } } toggleTimer() { if (CircleComponent.IntervalHandle === null) { CircleComponent.IntervalHandle = setInterval(this.drawRandomCircles, 100); } else { clearInterval(CircleComponent.IntervalHandle); CircleComponent.IntervalHandle = null; this.drawGrid(); } } static generateRandomPoints() { var X = Math.floor(Math.random() * CircleComponent.CANVAS_SIZE); // gen number 0 to 649 var Y = Math.floor(Math.random() * CircleComponent.CANVAS_SIZE); // gen number 0 to 649 return { x: X, y: Y }; } drawRandomCircles() { var p = CircleComponent.generateRandomPoints(); CircleComponent.drawPoint(p); } static drawPoint(currentPoint) { var RADIUS: number = 10; var r: number = Math.floor(Math.random() * 256); var g: number = Math.floor(Math.random() * 256); var b: number = Math.floor(Math.random() * 256); var rgbComposite: string = 'rgb(' + r + ',' + g + ',' + b + ')'; CircleComponent.ctx.strokeStyle = rgbComposite; CircleComponent.ctx.fillStyle = rgbComposite; CircleComponent.ctx.beginPath(); CircleComponent.ctx.arc( currentPoint.x, currentPoint.y, RADIUS, 0, 2 * Math.PI ); // allPoints.push(currentPoint); CircleComponent.ctx.stroke(); CircleComponent.ctx.fill(); } }

index.html फ़ाइल में सर्कल घटक जोड़ना न भूलें:

 <body> <app-root></app-root> <app-circle></app-circle> </body>

जब पेज लोड होगा, तो वृत्त बनाना शुरू हो जाएगा। जब हम [स्टार्ट लॉन्ग प्रोसेस] बटन पर क्लिक करेंगे, तो हम देखेंगे कि ड्राइंग रुक गई है। ऐसा इसलिए है क्योंकि सारा काम एक ही थ्रेड पर किया जा रहा है।

आइये वेब वर्कर जोड़कर इस समस्या को ठीक करें।

Angular वेब वर्कर जोड़ना

CLI का उपयोग करके एक नया वेब वर्कर जोड़ने के लिए, हम बस अपने प्रोजेक्ट फ़ोल्डर में जाते हैं, और निम्नलिखित कमांड निष्पादित करते हैं:

 ng generate web-worker app

अंतिम पैरामीटर (ऐप) उस घटक का नाम है जिसमें हमारी लंबे समय से चलने वाली प्रक्रिया शामिल है, जिसे हम अपने वेब वर्कर में रखना चाहेंगे।

Angular app.component.ts में कुछ कोड जोड़ेगा जो निम्न प्रकार दिखाई देगा:

 if (typeof Worker !== 'undefined') { // Create a new const worker = new Worker(new URL('./app.worker', import.meta.url)); worker.onmessage = ({ data }) => { console.log(`page got message: ${data}`); }; worker.postMessage('hello'); } else { // Web Workers are not supported in this environment. // You should add a fallback so that your program still executes correctly. }

नया कोड क्या करता है? हम देख सकते हैं कि यह कोड नए app.worker Component को संदर्भित करता है जिसे कमांड ने भी जोड़ा है। इस बिंदु पर, कोड:

1. यह सुनिश्चित करता है कि ब्राउज़र वेब वर्कर्स का समर्थन करता है।
2. एक नया कार्यकर्ता बनाता है.
3. कार्यकर्ता को एक संदेश पोस्ट करता है ( app.worker.ts में पाया जाता है)।
4. जब कार्यकर्ता को "हैलो" संदेश प्राप्त होता है, तो EventListener सक्रिय हो जाएगा (निम्नलिखित कोड स्निपेट में दिखाया गया है)।
5. जब EventListener सक्रिय होता है ( app.worker.ts में), तो यह एक प्रतिक्रिया ऑब्जेक्ट बनाएगा और उसे कॉलर को वापस भेज देगा।

app.worker.ts की संपूर्ण सामग्री यहां दी गई है:

 /// <reference lib="webworker" /> addEventListener('message', ({ data }) => { const response = `worker response to ${data}`; postMessage(response); });

इन चरणों के परिणामस्वरूप हमें कंसोल में संदेश दिखाई देंगे, जो निम्नलिखित कंसोल आउटपुट में अंतिम पंक्ति की तरह दिखेंगे:

यह वह console.log है जो EventHandler में होता है जिसे मूल Worker ऑब्जेक्ट पर बनाया गया था:

 worker.onmessage = ({ data }) => { console.log(`page got message: ${data}`); };

इससे हमें पता चलता है कि app.component ने app.worker को एक संदेश पोस्ट किया और app.worker ने अपने संदेश के साथ उत्तर दिया।

हम अपनी लॉन्ग रनिंग प्रक्रिया को दूसरे थ्रेड पर चलाने के लिए वर्कर का उपयोग करना चाहते हैं, ताकि हमारा सर्कल ड्राइंग कोड बाधित न हो।

सबसे पहले, आइए अपने UI तत्वों से जुड़े कोड को अपने app.component क्लास के कंस्ट्रक्टर में ले जाएं।

 constructor() { if (typeof Worker !== 'undefined') { // Create a new const worker = new Worker(new URL('./app.worker', import.meta.url)); worker.onmessage = ({ data }) => { console.log(`page got message: ${data}`); this.longProcessOutput += `page got message: ${data}` + '\n'; }; worker.postMessage('hello'); } else { // Web Workers are not supported in this environment. // You should add a fallback so that your program still executes correctly. } }

यह हमें अब longProcessOutput वैरिएबल को संदर्भित करने की अनुमति देता है। इसके साथ, हम उस वैरिएबल तक पहुँच सकते हैं; हमारे पास worker.onmessage है, जो प्रारंभिक परीक्षण के रूप में कंसोल पर लिखने के बजाय टेक्स्टएरिया में मूल डेटा जोड़ता है।

आप देख सकते हैं कि बायीं ओर हाइलाइट किया गया पाठ प्राप्त संदेश है।

वेब वर्कर में लॉन्गलूप

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

यहाँ वह कोड है जो हमारे अंतिम app.component.ts में होगा:

 constructor() { if (typeof Worker !== 'undefined') { // Create a new const worker = new Worker(new URL('./app.worker', import.meta.url)); worker.onmessage = ({ data }) => { console.log(`page got message: ${data}`); this.longProcessOutput += `page got message: ${data}` + '\n'; }; worker.postMessage('hello'); } else { // Web Workers are not supported in this environment. // You should add a fallback so that your program still executes correctly. } } longLoop() { this.longProcessOutput = ''; for (var x = 1; x <= 1000000000; x++) { var y = x / 3.2; if (x % 20000000 == 0) { this.longProcessOutput += x + '\n'; console.log(x); } } }

हमने वर्कर वैरिएबल को क्लास में ले जाया है, जो अब एक सदस्य वैरिएबल है। इस तरह, हम इसे अपने AppComponent क्लास में कहीं भी आसानी से संदर्भित कर सकते हैं।

आगे, आइए अधिक बारीकी से देखें कि हमने कन्स्ट्रक्टर में कोड के साथ वर्कर ऑब्जेक्ट पर मैसेज इवेंट हैंडलर को कैसे परिभाषित किया है:

 this.worker.onmessage = ({ data }) => { this.longProcessOutput += `${data}` + "\n"; };

वह कोड तब चलेगा जब वेब वर्कर क्लास ( app.worker.ts में पाया जाता है) postMessage(data) को कॉल करेगा। हर बार जब postMessage विधि को कॉल किया जाता है, तो longProcessOutput (textarea से जुड़ा मॉडल) डेटा और कैरिज रिटर्न (“\n”) के साथ अपडेट हो जाएगा, जो कि बस इतना है कि प्रत्येक मान textarea तत्व में अपनी लाइन पर लिखा जाएगा।

वास्तविक वेब वर्कर ( app.worker.ts ) में पाया गया सारा कोड यहां दिया गया है:

 addEventListener('message', ({ data }) => { console.log(`in worker EventListener : ${data}`); for (var x = 1; x <=1000000000;x++){ var y = x/3.2; if ((x % 20000000) == 0){ // posts the value back to our worker.onmessage handler postMessage(x); // don't need console any more --> console.log(x); } } });

यह इवेंट हैंडलर तब सक्रिय होता है जब उपयोगकर्ता [रन लॉन्ग प्रोसेस] बटन पर क्लिक करता है। वेब वर्कर ( app.worker.ts ) में पाया गया सारा कोड एक नए थ्रेड पर चलता है। यह वेब वर्कर का मान है; इसका कोड एक अलग थ्रेड पर चलता है। इसलिए यह अब वेब ऐप के मुख्य थ्रेड को प्रभावित नहीं करता है।

जब उपयोगकर्ता बटन पर क्लिक करता है तो वेब वर्कर कोड सक्रिय हो जाता है, क्योंकि अब हमारे longLoop विधि में निम्नलिखित कोड है।

 longLoop(){ this.longProcessOutput = ""; // the following line starts the long process on the Web Worker // by sending a message to the Web Worker this.worker.postMessage("start looping..."); }

जब संदेश कार्यकर्ता को पोस्ट किया जाता है, तो EventListener सक्रिय हो जाता है और हमारे मूल longLoop से कोड चलाता है जिसे हमने वहां रखा है।

वेब वर्कर्स के साथ एंगुलर ऐप्स को समाप्त करना

जब आप ऐप चलाएँगे, तो आप पाएँगे कि [स्टार्ट लॉन्ग प्रोसेस] बटन पर क्लिक करने से अब सर्कल ड्रॉइंग रुकती नहीं है। आप सर्कल-ड्राइंग कैनवस घटक के साथ सीधे इंटरैक्ट भी कर पाएँगे, ताकि अगर आप लॉन्गलूप के चलते समय उस पर क्लिक करते हैं, तो कैनवस तुरंत फिर से ड्रॉ हो जाएगा। पहले, अगर आप ऐसा करते थे, तो ऐप ऐसा व्यवहार करता था जैसे कि वह रुका हुआ हो।

अब, आप अपनी लंबे समय से चल रही प्रक्रियाओं को एंगुलर वेब वर्कर में जोड़ सकते हैं और एक ऐसे ऐप के सभी लाभ प्राप्त कर सकते हैं जो रुकता नहीं है।

यदि आप जावास्क्रिप्ट वेब वर्कर्स के साथ हल किया गया कोई उदाहरण देखना चाहते हैं, तो आप इसे प्लंकर पर देख सकते हैं।

क्या आप फ्रेमवर्क-अज्ञेय UI घटकों की तलाश कर रहे हैं? MESCIUS में जावास्क्रिप्ट UI घटकों का एक पूरा सेट है, जिसमें डेटा ग्रिड, चार्ट, गेज और इनपुट नियंत्रण शामिल हैं। हम शक्तिशाली स्प्रेडशीट घटक , रिपोर्टिंग नियंत्रण और उन्नत प्रस्तुति दृश्य भी प्रदान करते हैं।

हमारे पास Angular (साथ ही React और Vue) के लिए गहन समर्थन है और हम आधुनिक जावास्क्रिप्ट फ्रेमवर्क में उपयोग के लिए अपने घटकों का विस्तार करने के लिए समर्पित हैं।