خواندن ۳ دقیقه·۱ سال پیش

Web Worker در Angular

سلام، امیدوارم دلتون شاد و لبتون پرخنده باشه.
امروز می خوام درباره راه اندازی Web Workerتوی پروژه انگولار صحبت کنم، اما قبل از اینکه این آموزش شروع کنیم ببینیم اصلا Web Workerچی هست؟
Web Worker یک API مرورگر است که به برنامه‌نویسان اجازه می‌دهد کدهای جاوااسکریپت را در یک نخ جداگانه و پس‌زمینه اجرا کنند. با استفاده از Web Worker، می‌توانید عملیات‌های سنگین و زمان‌بر را در پس‌زمینه انجام داده و رابط کاربری را پاسخگو نگه دارید.

وقتی یک Web Worker ایجاد می‌شود، یک نخ جداگانه ایجاد می‌شود که کدهای جاوااسکریپت را اجرا می‌کند. این نخ مستقل از نخ اصلی مرورگر است و به طور موازی با آن اجرا می‌شود. این به معنی این است که عملیاتی که به طور معمول در نخ اصلی مرورگر اجرا می‌شوند و رابط کاربری را مسدود می‌کنند، می‌توانند در Web Worker اجرا شده و بدون تأثیر منفی بر روی رابط کاربری اصلی انجام شوند. Web Worker ها دارای دو جزء اصلی هستند: نخ کارگر (Worker) و ایونت‌ها (Events). نخ کارگر مسئول اجرای کدها در پس‌زمینه است و ایونت‌ها برای تبادل پیام بین نخ اصلی و نخ کارگر استفاده می‌شوند. با استفاده از متدهای postMessage و ، می‌توانید پیام‌ها را بین نخ اصلی و Web Worker ارسال و دریافت کنید.

از Web Worker می‌توان در محیط‌های وب متنوعی استفاده کرد، از جمله پروژه‌های Angular. با استفاده از Web Worker، می‌توانید عملیات‌های پردازشی سنگین را به پس‌زمینه منتقل کنید و رابط کاربری را به طور پاسخگو نگه دارید، به خصوص در مواردی که نیاز به محاسبات پیچیده، پردازش تصاویر، پارس کردن داده‌های بزرگ و ... دارید.

حالا نوبت به پیاده سازی webworker اونم به صورت قدم به قدم در انگولار رسیده:
قدم 1: ng generate web-worker worker-name
بعد از اینکه پروژتون ساختین این دستور توی command Editor خودتون وارد می کنید. حالا این دستور چی کار میکنه: میاد اول از همه یه فایل به نام tsconfig.worker.json توی root اصلی پروژه شما ایجاد می کنه که تنظیمات Web Worker اعلام می کنه. بعد به سراغ فایل angular.json میره و اونجا توی شاخه های build , serve و test یه فیلد با مقدارهای

&quotoptions&quot: {
       &quotwebWorkerTsConfig&quot: &quottsconfig.worker.json&quot
}

قرار میده. تا اینجا که همه چیز با یه خط کد پیش رفت!

قدم 2: به سراغ فایل worker-name.worker.ts برید!
بعد از اینکه قدم اول طی کردید یه فایل در کنار app.module با نامی که برای web worker لحاظ کردید ایجاد می کنه اینجا اونجایی که شما باید کارهای خودتون برای پردازش پشت زمینه ای بنویسید ( برای آشنایی بهتر من یه طریقه ساخت فاکتوریل براتون مثال می زنم)


/// <reference lib=&quotwebworker&quot />
addEventListener('message', ({ data }) => {
  const number = data;
  const result = calculateFactorial(number);
  self.postMessage(result);
});

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

خب اینجا addEventListener به فراخوانی درخواست شما گوش میده و postMessage جواب پردازش به کد شما اعلام می کنه.

قدم 3: web worker صدا بزنید!
حالا میریم سراغ اون کامپوننتی که می خوایم web worker صدا بزنیم و این طور می نویسیم:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  result: number = 0;
  calculateFactorial(): void {
    if (typeof Worker !== 'undefined') {
      // Create a new
     const worker = new Worker(new URL('./worker-test.worker', import.meta.url));
      worker. = ({ data }) => {
        this.result = data;
      };
      worker.postMessage(5);
    } else {
      // Web workers are not supported in this environment.
      // You should add a fallback so that your program still executes correctly.
    }
  }
}

برای اینکه web worker ما صدا بزنیم متغیر با این مقدار ایجاد کردیم:

const worker = new Worker(new URL('./worker-test.worker', import.meta.url));

موقعی که جواب برسه :

worker. = ({ data }) => { this.result = data; };

وقتی هم بخوایم داده ای به web worker ارسال کنیم می نویسیم :

worker.postMessage(5);

فقط مونده کد HTML ما :

<button (click)=&quotcalculateFactorial()&quot>محاسبه فاکتوریل</button> 
<p *ngIf=&quotresult&quot>نتیجه: {{ result }}</p>

به همین سادگی!

یه web worker توی سه قدم با هم پیاده سازی کردیم. امیدوارم ای مقاله مورد پسندتون بوده باشه و مقالات منو توی ویرگول دنبال کنید.
موفق باشید.

:))

web worker angular javascript

فرید ذوالقدر

شاید از این پست‌ها خوشتان بیاید