ng 命令解析之webWorker(实现多线程)

ng  g  webWorker webWorkerName 用于创建一个Worker 线程,不知道Worker的同学可以看看阮一峰老师的解释

 先创建一个webWorker

/// <reference lib="webworker" />
//监听事件
addEventListener('message', ({ data }) => {
  const response = `worker response to ${data.type}`;
  // 回应事件
  postMessage(response);
});

再来看看在angular文件中怎么使用

//app.component.ts
import { Component,OnInit,OnDestroy } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit,OnDestroy {
  //定义一个worker
  private worker?:Worker = undefined;

  //向worker线程发送数据
  getMessage(){
    this.worker.postMessage({type:'get'});
  }
  ngOnInit(): void {
    this.startWorker();
  }
  ngOnDestroy(): void {
    this.stopWorker();
  }
  //新建线程
  startWorker():void{
    if(typeof Worker !== 'undefined'){
      this.worker = new Worker('./webworker/count.worker',{ type: 'module' });//不加type会找不到文件

      // 监听worker线程发送过来的数据
      this.worker.onmessage = (event) =>{
        console.log(event.data);
      }
      // 抓取worker线程的报错
      this.worker.onerror = (error) =>{
        console.error(error);
      }
    } else {
      console.warn('do not support worker!');
    }
  }
  stopWorker():void{
    if(this.worker){
      this.worker.postMessage({type:'stopAll'});
      // 关闭主线程
      this.worker.terminate();
      this.worker = undefined;
    }
  }
}

主线程：浏览器原生提供Worker()构造函数，用来供主线程生成 Worker 线程。

Worker()构造函数返回一个 Worker 线程对象，用来供主线程操作 Worker。Worker 线程对象的属性和方法如下。

• Worker.onerror：指定 error 事件的监听函数。
• Worker.onmessage：指定 message 事件的监听函数，发送过来的数据在Event.data属性中。
• Worker.onmessageerror：指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时，会触发这个事件。
• Worker.postMessage()：向 Worker 线程发送消息。
• Worker.terminate()：立即终止 Worker 线程。

Worker 线程有一些自己的全局属性和方法。（可以用self,this,或者什么都不用）

• self.name： Worker 的名字。该属性只读，由构造函数指定。
• self.onmessage：指定message事件的监听函数。
• self.onmessageerror：指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时，会触发这个事件。
• self.close()：关闭 Worker 线程。
• self.postMessage()：向产生这个 Worker 线程发送消息。
• self.importScripts()：加载 JS 脚本。