ওয়েব ওয়ার্কারদের সাথে আপনার কৌণিক অ্যাপের গতি বাড়ানোর উপায়

কেন আপনি একটি ওয়েব কর্মী প্রয়োজন? একটি ওয়েব কর্মী একটি ওয়েব অ্যাপ্লিকেশনের জন্য একটি কোড উপাদান। এটি বিকাশকারীকে একটি জাভাস্ক্রিপ্ট টাস্কের জন্য এক্সিকিউশনের একটি নতুন থ্রেড তৈরি করার অনুমতি দেয় যাতে এটি মূল অ্যাপের কার্য সম্পাদনে বাধা না দেয়।

প্রথম নজরে, এটা মনে হতে পারে যে ব্রাউজারগুলি সহজাতভাবে থ্রেডিং সমর্থন করে এবং বিকাশকারীকে বিশেষ কিছু করতে হবে না। দুর্ভাগ্যবশত, যে ক্ষেত্রে না. ওয়েব ওয়ার্কাররা একটি বাস্তব সমসাময়িক সমস্যা সমাধান করে।

ওয়েব ওয়ার্কাররা ওয়েব ব্রাউজারগুলির প্রত্যাশিত কার্যকরী মানগুলির একটি অংশ, এবং তাদের জন্য স্পেসিফিকেশনগুলি W3C- তে লেখা হয়েছে। অ্যাঙ্গুলার ফ্রেমওয়ার্ক আমাদের জন্য ওয়েব ওয়ার্কারদের গুটিয়ে রেখেছে, এবং আমরা তাদের সহজেই অ্যাঙ্গুলার কমান্ড লাইন ইন্টারফেস (সিএলআই) ব্যবহার করে আমাদের অ্যাপে যোগ করতে পারি।

এই নিবন্ধে, আমরা প্রথমে ব্রাউজারে জাভাস্ক্রিপ্টের সাথে থ্রেড কনকারেন্সি সম্পর্কে কিছু ভুল ধারণা পরীক্ষা করব। তারপরে, আমরা একটি কার্যকরী উদাহরণ তৈরি করব যা প্রদর্শন করে যে কৌণিক সহ ওয়েব ওয়ার্কার্স বাস্তবায়ন করা কতটা সহজ, যা একটি ওয়েবসাইটে সমসাময়িক থ্রেডিং সক্ষম করে।

জাভাস্ক্রিপ্ট কি সহজাতভাবে সমসাময়িক নয়?

কিছু ডেভেলপার বিশ্বাস করেন যে জাভাস্ক্রিপ্ট ব্রাউজারে সহজাতভাবে সমসাময়িক কারণ যখন ব্রাউজার একটি ওয়েবসাইটের সাথে সংযোগ করে এবং একটি পৃষ্ঠার জন্য এইচটিএমএল পুনরুদ্ধার করে, তখন এটি একাধিক সংযোগ খুলতে পারে (ছয়টির কাছাকাছি) এবং রিসোর্স টানতে পারে (ছবি, লিঙ্ক করা CSS ফাইল, লিঙ্ক করা জাভাস্ক্রিপ্ট ফাইল, এবং তাই) একই সাথে। দেখে মনে হচ্ছে ব্রাউজারটি একসাথে বেশ কয়েকটি থ্রেড এবং অসংখ্য কাজ সম্পাদন করে (প্রসঙ্গ স্যুইচিংয়ের মাধ্যমে)।

অবিচ্ছিন্ন ওয়েব ডেভেলপারের কাছে, এটি ইঙ্গিত করে যে ব্রাউজারটি একযোগে কাজ করতে পারে। যাইহোক, যখন জাভাস্ক্রিপ্টের কথা আসে, ব্রাউজারটি আসলে একটি সময়ে শুধুমাত্র একটি প্রক্রিয়া চালায়।

বেশিরভাগ আধুনিক ওয়েবসাইট, সিঙ্গেল পেজ অ্যাপস (এসপিএ), এবং আরও আধুনিক প্রগ্রেসিভ ওয়েব অ্যাপস (পিডব্লিউএ) জাভাস্ক্রিপ্টের উপর নির্ভর করে এবং সাধারণত অসংখ্য জাভাস্ক্রিপ্ট মডিউল ধারণ করে। যাইহোক, যে কোনো সময় ওয়েব অ্যাপটি JavaScript চালাচ্ছে, ব্রাউজারটি কার্যকলাপের একটি একক থ্রেডের মধ্যে সীমাবদ্ধ। জাভাস্ক্রিপ্টের কোনটিই স্বাভাবিক পরিস্থিতিতে একই সাথে চলবে না।

এর অর্থ হল যদি আমাদের জাভাস্ক্রিপ্ট মডিউলগুলির একটিতে আমাদের একটি দীর্ঘ-চলমান বা প্রক্রিয়া-নিবিড় কাজ সংজ্ঞায়িত করা থাকে তবে ব্যবহারকারী অ্যাপটি তোতলাতে বা ঝুলে যাওয়ার অভিজ্ঞতা হতে পারে। একই সময়ে, ব্যবহারকারী ইন্টারফেস (UI) আপডেট করার আগে ব্রাউজার প্রক্রিয়াটি সম্পূর্ণ হওয়ার জন্য অপেক্ষা করে। এই ধরনের আচরণ ব্যবহারকারীদের আমাদের ওয়েব অ্যাপ বা SPA-তে আস্থা হারায় এবং আমরা কেউই তা চাই না।

জাভাস্ক্রিপ্ট কনকারেন্সির জন্য একজন ওয়েব কর্মী

সমসাময়িক জাভাস্ক্রিপ্ট থ্রেড চালানোর জন্য আমাদের ওয়েব অ্যাপকে সক্ষম করতে আমরা দুটি প্যান সহ একটি উদাহরণ পৃষ্ঠা তৈরি করব। একটি ফলকে, আমাদের অ্যাপ্লিকেশনের UI চেনাশোনা সহ একটি গ্রিড দ্বারা উপস্থাপিত হয়, যা ক্রমাগত ছবি আপডেট করে এবং মাউস ক্লিকে প্রতিক্রিয়া জানায়। দ্বিতীয় ফলকটি একটি দীর্ঘ-চলমান প্রক্রিয়া হোস্ট করবে, যা সাধারণত UI থ্রেডকে ব্লক করে এবং UI কে তার কাজ করতে বাধা দেয়।

আমাদের UI কে প্রতিক্রিয়াশীল করতে, আমরা একটি ওয়েব ওয়ার্কারে আমাদের দীর্ঘ প্রক্রিয়া চালাব, যা এটিকে একটি পৃথক থ্রেডে কার্যকর করবে এবং এইভাবে UI লজিক এক্সিকিউশনকে ব্লক করবে না। আমরা অ্যাপটি তৈরি করার জন্য ফ্রেমওয়ার্ক হিসাবে অ্যাঙ্গুলার ব্যবহার করব কারণ এটি ওয়েব ওয়ার্কারদের একটি সাধারণ ওয়ান-কমান্ড কাজ করে তোলে।

কৌণিক অ্যাপ সেট আপ করা হচ্ছে

Angular CLI ব্যবহার করার জন্য, আমাদের Node.js এবং NPM (নোড প্যাকেজ ম্যানেজার) ইনস্টল করতে হবে। একবার আমরা নিশ্চিত হয়েছি যে নোড এবং এনপিএম ইনস্টল করা আছে, একটি কনসোল উইন্ডো খুলুন, তারপরে এনপিএম এর মাধ্যমে কৌণিক CLI ইনস্টল করুন (এটি এককালীন জিনিস):

 npm install -g @angular/cli

ডিরেক্টরিটিকে লক্ষ্য ডিরেক্টরিতে পরিবর্তন করুন যেখানে আমরা আমাদের নতুন অ্যাপ টেমপ্লেট তৈরি করতে চাই। এখন, আমরা আমাদের অ্যাপ তৈরি করতে প্রস্তুত। আমরা এটি করতে "ng new" কমান্ড ব্যবহার করি। আমরা আমাদের প্রকল্পের নাম দেব NgWebWorker:

 ng new NgWebWorker --no-standalone

প্রজেক্ট উইজার্ড জিজ্ঞেস করে যে আমরা আমাদের প্রোজেক্টে রাউটিং অন্তর্ভুক্ত করতে চাই কিনা। এই উদাহরণের জন্য আমাদের রাউটিং প্রয়োজন নেই, তাই n টাইপ করুন।

এটি তখন জিজ্ঞাসা করবে আমরা কোন ধরনের স্টাইলশীট ফরম্যাট ব্যবহার করতে চাই। কৌণিক স্টাইলশীট প্রসেসর যেমন Sass এবং Less ব্যবহার করে সমর্থন করে, তবে এই ক্ষেত্রে, আমরা সাধারণ CSS ব্যবহার করব, তাই ডিফল্টের জন্য এন্টার টিপুন।

তারপরে আমরা কিছু CREATE বার্তা দেখতে পাব কারণ NPM প্রয়োজনীয় প্যাকেজগুলি টেনে নেয় এবং CLI টেমপ্লেট প্রকল্প তৈরি করে। অবশেষে, এটি সম্পূর্ণ হলে, আমরা কমান্ড লাইনে আবার একটি ব্লিঙ্কিং কার্সার পাই।

এই মুহুর্তে, কৌণিক CLI একটি প্রকল্প তৈরি করেছে এবং এটি NgWebWorker ফোল্ডারে স্থাপন করেছে। ডিরেক্টরিটিকে NgWebWorker এ পরিবর্তন করুন। কৌণিক CLI নোড HTTP সার্ভার ইনস্টল সহ আমাদের কৌণিক প্রকল্পে কাজ করার জন্য প্রয়োজনীয় সবকিছু তৈরি করেছে। তার মানে টেমপ্লেট অ্যাপটি শুরু করার জন্য আমাদের যা করতে হবে তা হল নিম্নলিখিত:

 ng serve 

Angular CLI আপনার প্রজেক্ট কম্পাইল করে এবং নোড HTTP সার্ভার শুরু করে। এখন, আপনি অ্যাপটিকে আপনার ব্রাউজারে <a href="http://localhost:4200"target="_blank"> URL-এ নির্দেশ করে লোড করতে পারেন৷

CLI থেকে আমাদের প্রথম কৌণিক অ্যাপ

যখন আমরা পৃষ্ঠাটি লোড করি, তখন আমরা শীর্ষে প্রকল্পের নাম সহ মৌলিক টেমপ্লেট দেখতে পাই।

"এনজি সার্ভ" চালানোর সুবিধা হল যে কোডে করা যেকোনো পরিবর্তনের ফলে সাইটটি স্বয়ংক্রিয়ভাবে ব্রাউজারে রিফ্রেশ হবে, পরিবর্তনগুলি কার্যকর হওয়া দেখতে অনেক সহজ হবে৷

আমরা যে কোডগুলিতে ফোকাস করব তার বেশিরভাগই /src/app ডিরেক্টরির অধীনে।

app.component.html এ একটি উপাদানের জন্য HTML রয়েছে যা বর্তমানে প্রধান পৃষ্ঠা প্রদর্শন করতে ব্যবহৃত হয়। কম্পোনেন্ট কোডটি app.component.ts (TypeScript) ফাইলে উপস্থাপন করা হয়।

আমরা app.component.html এর বিষয়বস্তু মুছে ফেলব এবং আমাদের নিজস্ব লেআউট যোগ করব। আমরা একটি বিভক্ত পৃষ্ঠা তৈরি করব যা আমাদের দীর্ঘ-চলমান প্রক্রিয়ার মানগুলিকে বাম দিকে প্রদর্শন করবে এবং ডান দিকে কিছু এলোমেলো বৃত্ত আঁকবে। এটি আমাদের ব্রাউজারকে দুটি অতিরিক্ত ওয়েব ওয়ার্কার থ্রেড চালানোর অনুমতি দেবে যা স্বাধীনভাবে কাজ করবে যাতে আপনি অ্যাঙ্গুলার ওয়েব ওয়ার্কারদের কাজ করতে দেখতে পারেন।

বাকি নিবন্ধের জন্য সমস্ত কোড 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>

কোড ডাউনলোডে কিছু আইডি এবং CSS ক্লাস এবং styles.css এর সাথে সম্পর্কিত শৈলীও রয়েছে, যা UI এর খুব সাধারণ বিন্যাসনের জন্য ব্যবহৃত হয়, তাই আমাদের কাছে দুটি বিভাগ (বাম এবং ডান) এবং অন্যান্য মৌলিক স্টাইলিং রয়েছে।

 .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; }

এখানে লক্ষ্য করা গুরুত্বপূর্ণ বিষয় হল যে আমরা বোতামটিতে একটি কৌণিক ইভেন্ট বাইন্ডিং (ক্লিক) যোগ করেছি। ব্যবহারকারী যখন বোতামে ক্লিক করেন, তখন কম্পোনেন্ট 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 (টেক্সটেরিয়া এলিমেন্টে) আবদ্ধ করেছি, প্রতিবার পরিবর্তনশীল আপডেট করার সময় UI আপডেটটি প্রতিফলিত করবে। আমরা HTML এ যে মানটি সেট করি সেখানে আমরা সদস্য ভেরিয়েবলকে আবদ্ধ করি।

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

চালাও এটা। আমরা দেখতে পাব যে আমরা বোতামে ক্লিক করলে তেমন কিছুই ঘটবে না, এবং তারপরে হঠাৎ করে, টেক্সটেরিয়া একগুচ্ছ মান সহ আপডেট করা হয়েছে। আমরা কনসোল খুললে, আমরা কোড রান হিসাবে সেখানে লেখা মান দেখতে পাই।

কৌণিক CLI ব্যবহার করে একটি র্যান্ডম সার্কেল উপাদান যোগ করুন

এরপর, আমরা এলোমেলো চেনাশোনা আঁকতে একটি "বৃত্ত" উপাদান যোগ করব। আমরা নিম্নলিখিত কমান্ডের সাথে কৌণিক CLI ব্যবহার করে এটি করতে পারি:

 ng generate component circle

কমান্ডটি বৃত্ত নামে একটি নতুন ফোল্ডার তৈরি করেছে এবং চারটি নতুন ফাইল তৈরি করেছে:

• circle.component.html

• circle.component.spec.ts (ইউনিট পরীক্ষা)

• circle.component.ts (TypeScript কোড)

• circle.component.css (শৈলী যা শুধুমাত্র এই উপাদানটির জন্য সংশ্লিষ্ট HTML এ প্রয়োগ করা হবে)

  
  

HTML সোজা। আমরা শুধু আমাদের উপাদান প্রতিনিধিত্ব করবে যে HTML প্রয়োজন. আমাদের ক্ষেত্রে, এটি পৃষ্ঠার ডান দিকের উপাদান, যা হালকা সবুজ গ্রিড প্রদর্শন করবে এবং বৃত্তগুলি আঁকবে। এই অঙ্কনটি HTML ক্যানভাস উপাদানের মাধ্যমে করা হয়।

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

আমরা মাউসডাউন ইভেন্টটি ধরতে একটি কৌণিক ইভেন্ট বাইন্ডিং যুক্ত করে বৃত্তের অঙ্কন শুরু এবং বন্ধ করি। যদি ব্যবহারকারী ক্যানভাস এলাকার ভিতরে যেকোন জায়গায় ক্লিক করেন, প্রক্রিয়াটি ইতিমধ্যে শুরু না হলে চেনাশোনাগুলি আঁকা শুরু হবে। যদি প্রক্রিয়াটি ইতিমধ্যেই শুরু হয়ে থাকে, তাহলে টগলটাইমার পদ্ধতি ( circ.component.ts এ পাওয়া যায়) গ্রিড পরিষ্কার করে এবং চেনাশোনা আঁকা বন্ধ করে।

টগলটাইমার প্রতি 100 মিলিসেকেন্ডে (10 বৃত্ত/সেকেন্ডে) এলোমেলোভাবে নির্বাচিত রঙের সাথে একটি এলোমেলো অবস্থানে একটি বৃত্ত আঁকতে সেটইন্টারভাল ব্যবহার করে।

 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>

যখন পৃষ্ঠা লোড হবে, চেনাশোনা আঁকা শুরু হবে। যখন আমরা [Start Long Process] বোতামে ক্লিক করি, তখন আমরা অঙ্কন পজ দেখতে পাব। কারণ সব কাজ একই থ্রেডে করা হচ্ছে।

আসুন একজন ওয়েব ওয়ার্কার যোগ করে সেই সমস্যার সমাধান করি।

একটি কৌণিক ওয়েব কর্মী যোগ করা হচ্ছে

CLI ব্যবহার করে একটি নতুন ওয়েব ওয়ার্কার যোগ করতে, আমরা কেবল আমাদের প্রকল্প ফোল্ডারে যাই এবং নিম্নলিখিত কমান্ডটি চালাই:

 ng generate web-worker 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 কম্পোনেন্টের উল্লেখ করে যা কমান্ডটিও যোগ করেছে। এই সময়ে, কোড:

1. ব্রাউজারটি ওয়েব ওয়ার্কারদের সমর্থন করে তা নিশ্চিত করে।
2. নতুন কর্মী তৈরি করে।
3. কর্মীকে একটি বার্তা পোস্ট করে ( app.worker.ts এ পাওয়া যায়)।
4. যখন কর্মী "হ্যালো" বার্তা পাবেন, ইভেন্টলিসনার ফায়ার করবে (নিম্নলিখিত কোড স্নিপেটে দেখানো হয়েছে)।
5. যখন EventListener ফায়ার করে ( app.worker.ts এ), এটি একটি প্রতিক্রিয়া বস্তু তৈরি করবে এবং এটিকে আবার কলারে পোস্ট করবে।

এখানে app.worker.ts- এর সম্পূর্ণ বিষয়বস্তু রয়েছে:

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

এই পদক্ষেপগুলির ফলে আমরা কনসোলে বার্তাগুলি দেখতে পাব, যা নিম্নলিখিত কনসোল আউটপুটের শেষ লাইনের মতো দেখাবে:

এটি হল console.log যা ইভেন্টহ্যান্ডলারে ঘটে যা আসল ওয়ার্কার অবজেক্টে তৈরি করা হয়েছিল:

 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) কল করবে তখন সেই কোডটি চলবে। প্রতিবার পোস্টমেসেজ পদ্ধতিটি কল করা হলে, লংপ্রসেস আউটপুট (টেক্সটেরিয়াতে আবদ্ধ মডেল) ডেটা এবং একটি ক্যারেজ রিটার্ন (“\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(){ 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..."); }

যখন বার্তাটি কর্মীর কাছে পোস্ট করা হয়, তখন ইভেন্টলিসনার আমাদের আসল লংলুপ থেকে কোডটি ফায়ার করে এবং চালায় যা আমরা সেখানে রেখেছি।

ওয়েব ওয়ার্কারদের সাথে কৌণিক অ্যাপ র্যাপিং

আপনি যখন অ্যাপটি চালাবেন, আপনি দেখতে পাবেন যে [Start Long Process] বোতামে ক্লিক করলে বৃত্তের অঙ্কনটি আর বিরতি দেয় না। এছাড়াও আপনি বৃত্ত-আঁকানো ক্যানভাস উপাদানের সাথে সরাসরি যোগাযোগ করতে সক্ষম হবেন যাতে লংলুপ চালু থাকা অবস্থায় আপনি এটিতে ক্লিক করলে, ক্যানভাস অবিলম্বে পুনরায় আঁকা হবে। পূর্বে, অ্যাপটি এমন আচরণ করত যেন এটি হিমায়িত হয়ে যায় যদি আপনি এটি করেন।

এখন, আপনি আপনার দীর্ঘ-চলমান প্রক্রিয়াগুলি একটি কৌণিক ওয়েব ওয়ার্কারে যুক্ত করতে পারেন এবং এমন একটি অ্যাপের সমস্ত সুবিধা পেতে পারেন যা হিমায়িত হয় না।

আপনি যদি জাভাস্ক্রিপ্ট ওয়েব ওয়ার্কার্সের সাথে সমাধান করা একটি উদাহরণ দেখতে চান তবে আপনি এটি প্লাঙ্কারে দেখতে পারেন।

আপনি কি ফ্রেমওয়ার্ক-অজ্ঞেয়বাদী UI উপাদান খুঁজছেন? ডাটা গ্রিড, চার্ট, গেজ এবং ইনপুট নিয়ন্ত্রণ সহ MESCIUS-এর JavaScript UI উপাদানগুলির একটি সম্পূর্ণ সেট রয়েছে। এছাড়াও আমরা শক্তিশালী স্প্রেডশীট উপাদান , রিপোর্টিং নিয়ন্ত্রণ , এবং উন্নত উপস্থাপনা দৃশ্য অফার করি।

আমরা কৌণিক (পাশাপাশি প্রতিক্রিয়া এবং Vue) এর জন্য গভীর সমর্থন পেয়েছি এবং আধুনিক জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলিতে ব্যবহারের জন্য আমাদের উপাদানগুলিকে প্রসারিত করতে নিবেদিত।