web workers ใน angular

Angular
Created At :
Views 👀 :

Web workers เป็นกระบวนการที่ทำงานในเบื้องหลังแยกจากเบราว์เซอร์หลัก

Web workers สามารถใช้ในการทำงานที่ต้องใช้ทรัพยากรมาก เช่น การประมวลผลข้อมูลขนาดใหญ่ หรือทำงานที่ไม่จำเป็นต้องมีการโต้ตอบกับผู้ใช้

Angular รองรับ web workers ผ่าน WorkerModule

การติดตั้ง WorkerModule

ในการเริ่มต้นใช้งาน web workers ใน Angular เราต้องติดตั้ง @angular/platform-webworker ลงในแอปพลิเคชันของเรา

1
npm install @angular/platform-webworker

การสร้าง web worker

เราสามารถสร้าง web worker โดยใช้คลาส Worker

1
2
3
4
5
6
7
8
9
10
11
12
import { Worker } from '@angular/platform-webworker';

class MyWorker extends Worker {
  constructor(scriptUrl: string) {
    super(scriptUrl);
  }

  // ทำงานบางอย่างในเบื้องหลัง
  async doSomething() {
    // ...
  }
}

การลงทะเบียน web worker

เราสามารถลงทะเบียน web worker โดยใช้ WorkerModule

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { WorkerModule } from '@angular/platform-webworker';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    WorkerModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

การใช้ web worker

เราสามารถใช้ web worker ได้จากแอปพลิเคชันหลักโดยใช้ WorkerService

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Component, OnInit } from '@angular/core';
import { WorkerService } from './worker.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor(private workerService: WorkerService) {}

  ngOnInit() {
    // เรียกใช้ฟังก์ชัน `doSomething()` ใน web worker
    this.workerService.doSomething();
  }

}

ตัวอย่างการใช้งาน web workers

ต่อไปนี้เป็นตัวอย่างการใช้งาน web workers

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import { Component, OnInit } from '@angular/core';
import { WorkerService } from './worker.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor(private workerService: WorkerService) {}

  ngOnInit() {
    // เรียกใช้ฟังก์ชัน `doSomething()` ใน web worker
    this.workerService.doSomething().subscribe((result) => {
      // แสดงผลลัพธ์ของฟังก์ชัน `doSomething()`
      console.log(result);
    });
  }

}

// Worker class
import { Worker } from '@angular/platform-webworker';

class MyWorker extends Worker {
  constructor(scriptUrl: string) {
    super(scriptUrl);
  }

  // ทำงานบางอย่างในเบื้องหลัง
  async doSomething() {
    // ...
    return 'Hello, world!';
  }
}

// Worker service
import { Injectable } from '@angular/core';
import { Worker } from '@angular/platform-webworker';

@Injectable({
  providedIn: 'root'
})
export class WorkerService {

  constructor(private worker: Worker) {}

  // เรียกใช้ฟังก์ชัน `doSomething()` ใน web worker
  public doSomething() {
    return this.worker.doSomething();
  }

}

สรุป

Web workers เป็นเครื่องมือที่มีประโยชน์สำหรับแอปพลิเคชันที่ต้องการทำงานที่ต้องใช้ทรัพยากรมาก เช่น การประมวลผลข้อมูลขนาดใหญ่ หรือทำงานที่ไม่จำเป็นต้องมีการโต้ตอบกับผู้ใช้

Angular รองรับ web workers ผ่าน WorkerModule ซึ่งช่วยให้เราสามารถสร้างและลงทะเบียน web workers ได้อย่างง่ายดาย

©2023 Love Computer