استفاده از WebWorker در Angular

استفاده از Angular به همراه Web Workers می تواند به طور قابل توجهی عملکرد و پاسخگویی برنامه های وب را افزایش دهد . انگولار یک چارچوب قدرتمند برای ساخت برنامه های پیچیده است، در حالی که Web Workers به ​​شما اجازه می دهد تا وظایف محاسباتی فشرده را برای جدا کردن thread ها بارگذاری کنید و از مسدود کردن thread UI اصلی جلوگیری کنید. در این مقاله، نحوه استفاده از Angular با Web Workers را همراه با یک مثال دقیق بررسی خواهیم کرد.

در این مقاله، فرآیند راه‌اندازی Angular را با Web Workers پوشش دادیم، از جمله ایجاد یک فایل Web Worker، پیاده‌سازی یک سرویس Angular برای ارتباط، و استفاده از سرویس در یک کامپوننت. با استفاده از Web Workers، می‌توانید برنامه‌های Angular خود را بهینه کنید و با واگذاری وظایف محاسباتی سنگین به threadهای جداگانه، عملکرد را افزایش دهید.

وب ورکر ( Web Worker ) چیست؟

وب ورکر یکی از ویژگی‌های مرورگرهای مدرن است که اجرای کد جاوا اسکریپت را در پس‌زمینه، جدا از thread اصلی مرورگر، امکان‌پذیر می‌کند. با استفاده از Web Workers، می توانید کارهای وقت گیر مانند محاسبات پیچیده، پردازش داده ها یا محاسبات سنگین را بدون مسدود کردن thread UI اصلی انجام دهید. این رویکرد تضمین می کند که برنامه پاسخگو باقی می ماند و تجربه کاربری روانی را ارائه می دهد.

راه اندازی پروژه Angular

برای شروع، اجازه دهید یک پروژه Angular راه اندازی کنیم که از Web Workers استفاده می کند. ترمینال یا خط فرمان خود را باز کنید و مراحل زیر را دنبال کنید:

1. ابزار Angular CLI را به صورت سراسری با اجرای دستور زیر نصب کنید:

npm install -g @angular/cli

۲. یک پروژه Angular جدید ایجاد کنید:

ng new angular-web-worker-example

۳. به دایرکتوری پروژه وارد شوید:

cd angular-web-worker

۴. سرور توسعه Angular را اجرا کنید:

ng serve

این دستور سرور توسعه را راه اندازی می کند و شما می توانید با رفتن به آدرسlocalhost:4200در مرورگر خود برنامه را مشاهده کنید.

ایجاد Web Worker

برای استفاده از Web Worker در یک پروژه Angular، باید یک فایل جداگانه ایجاد کنیم که حاوی کدهایی باشد که باید در Web Worker اجرا شوند. برای ایجاد Web Worker مراحل زیر را دنبال کنید:

1. در پوشهsrcپروژه Angular خود، یک فایل جدید به نامfactorial.worker.tsایجاد کنید.
2. در داخل فایلfactorial.worker.ts، کدی را بنویسید که در Web Worker اجرا می شود. برای مثال، بیایید worker ایجاد کنیم که فاکتوریل یک عدد را محاسبه کند:

// factorial.worker.ts
self.addEventListener('message', (event) => {
   const number = event.data;
   const result = calculateFactorial(number);
   self.postMessage(result);
});

function calculateFactorial(number: number): number {
   let factorial = 1;
   for (let i = 2; i <= number; i++) {
      factorial *= i;
   }
   return factorial;
}

ایجاد یک سرویس برای Web Worker

برای برقراری ارتباط با Web Worker، یک سرویس ایجاد می کنیم. این سرویس تعامل با Web Worker را مدیریت می‌کند و رابطی را برای استفاده سایر کامپوننت ها فراهم می‌کند. این مراحل را دنبال کنید:

1. در پوشهsrc/app، یک سرویس جدید با استفاده از Angular CLI ایجاد کنید:

ng generate service factorial

این دستور یک فایل جدید به نامfactorial.service.tsایجاد می کند و فایلapp.module.tsرا با import و provider لازم به روز می کند.

۲. فایل factorial.service.tsرا در پوشهsrc/appباز کنید و محتوای آن را با کد زیر جایگزین کنید:

// factorial.service.ts
import { Injectable } from '@angular/core';

@Injectable({
   providedIn: 'root'
})
export class FactorialService {
   private worker: Worker;

 constructor() {
   this.worker = new Worker('./factorial.worker', { type: 'module' });
   this.worker.addEventListener('message', this.onWorkerMessage.bind(this));
 }

 calculateFactorial(number: number): void {
   this.worker.postMessage(number);
 }

 private onWorkerMessage(event: MessageEvent): void {
   const result = event.data;
   console.log(`Factorial: ${result}`);
 }
}

کلاس FactorialServiceبا استفاده از سازندهWorker یک Web Worker ایجاد می کند . messageرویداد را از worker گوش می دهد و نتیجه را ثبت می کند. این متدcalculateFactorialپیامی را به ورکر ارسال می کند و محاسبات فاکتوریل را آغاز می کند.

استفاده از Web Worker Service در یک کامپوننت

اکنون که سرویس Web Worker خود را راه اندازی کرده ایم، بیایید یک کامپوننت ایجاد کنیم که از سرویس برای محاسبه فاکتوریل یک عدد استفاده می کند. این مراحل را دنبال کنید:

1. فایلapp.component.ts را در پوشه src/appباز کنید .
2. محتوای آن را با کد زیر جایگزین کنید:

// app.component.ts
import { Component } from '@angular/core';
import { FactorialService } from './factorial.service';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h1>Calculate Factorial</h1>
      <input type=&quotnumber&quot [(ngModel)]=&quotnumber&quot placeholder=&quotEnter a number&quot>
      <button (click)=&quotcalculate()&quot>Calculate</button>
    </div>
  `
})
export class AppComponent {
  number: number;

 constructor(private factorialService: FactorialService) {}

 calculate(): void {
     this.factorialService.calculateFactorial(this.number);
 }
}

این کامپوننت شامل یک فیلد ورودی و یک دکمه است. هنگامی که دکمه کلیک می شود، متدcalculate فراخوانی می شود که متدcalculateFactorialرا درFactorialServiceفعال می کند.

به روز رسانی App Module

در نهایت، باید فایل app.module.tsرا به‌روزرسانی کنیم تا به عنوان ارائه‌دهنده actorialServiceباشد . فایل app.module.tsرا در پوشه src/appباز کرده و به صورت زیر آپدیت کنید:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { FactorialService } from './factorial.service';

@NgModule({
   declarations: [AppComponent],
   imports: [BrowserModule, FormsModule],
   providers: [FactorialService],
   bootstrap: [AppComponent]
})
export class AppModule {}

اجرای برنامه

اکنون که پروژه Angular خود را با اضافه کردن Web Worker راه‌اندازی کرده‌ایم، زمان اجرای برنامه و مشاهده آن در عمل فرا رسیده است. این مراحل را دنبال کنید:

1. در ترمینال خود، مطمئن شوید که در دایرکتوری ریشه پروژه Angular خود هستید.
2. سرور توسعه Angular را با اجرای دستور زیر راه اندازی کنید:

ng serve

این دستور برنامه را می سازد و آن را روی یک سرور توسعه محلی راه اندازی می کند.

۳. مرورگر خود را باز کرده و به http://localhost:4200بروید. شما باید یک فیلد ورودی را ببینید که در آن می توانید یک عدد و یک دکمه "محاسبه" وارد کنید.

۴. یک عدد را در فیلد ورودی وارد کنید و روی دکمه "Calculate" کلیک کنید. فاکتوریل عدد وارد شده با استفاده از Web Worker محاسبه می شود و نتیجه در کنسول مرورگر ثبت می شود.

تبریک می گویم! شما موفقیت Web Workers را با Angular ادغام کردید. محاسبه فاکتوریل در یک thread جداگانه بارگذاری می‌شود و از مسدود کردن رشته thread UI اصلی جلوگیری می‌کند و تجربه کاربری روان را تضمین می‌کند.

این مقاله برگردان شده یک مقاله معتبر درباره این موضوع است.برای دسترسی به مقاله منبع اینجا کلیک کنید.

برای مشاهده پست های بیشتر و ارتباط با من از طریق لینکدین اینجا کلیک کنید.

امیدوارم براتون مفید واقع شده باشه.