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 脚本。