Reactjs 如何使用Typescript在React中使用WebWorkers
我有一些沉重的画布代码，我想卸载到一个网络工作者。当我遵循中的示例并将worker typescript文件的路径传递到构造函数中时Reactjs 如何使用Typescript在React中使用WebWorkers,reactjs,typescript,webpack,web-worker,Reactjs,Typescript,Webpack,Web Worker,我有一些沉重的画布代码，我想卸载到一个网络工作者。当我遵循中的示例并将worker typescript文件的路径传递到构造函数中时 New Worker（“./PaintCanvas.ts”）代码已成功编译，但当它运行时，工作程序似乎未正确找到代码，因为它抛出一个错误，称为Uncaught SyntaxError:Unexpected token'canvas.width？window.innerWidth:canvas.width； canvas.height=window.innerHei
New Worker（“./PaintCanvas.ts”）Uncaught SyntaxError:Unexpected token'canvas.width？window.innerWidth:canvas.width；
canvas.height=window.innerHeight>canvas.height？window.innerHeight：canvas.height；
this.offscreen=canvas.transferControlToOffscreen（）；
this.worker=新工人（“/PaintCanvas.ts”）；
this.worker.postMessage（this.offscreen，[this.offscreen]）；
}
}
render（）{
返回(
);
}
}
导出默认画布；
export default class PaintCanvas extends Worker {
private canvas?: OffscreenCanvas;
private intervalId?: number;
private frame: number;
private frameSet: number;
private noiseData: ImageData[][];
private noiseNum: number[];
private overlayFrame: number[];
private overlayData: Uint8ClampedArray[][];
private overlayNum: number[];
private workers: (Worker|undefined)[];
constructor(stringUrl: string | URL) {
super(stringUrl);
this.frame = 0;
this.frameSet = 0;
this.noiseData = [[], [], []];
this.noiseNum = [0, 0, 0];
this.overlayFrame = [0, 0, 0];
this.overlayData = [[], [], []];
this.overlayNum = [0, 0, 0];
this.workers = [undefined, undefined, undefined];
}
onmessage = (event: MessageEvent) => {
this.canvas = event.data;
this.frame = 0;
this.frameSet = 0;
this.noiseData = [[], [], []];
this.noiseNum = [0, 0, 0];
this.overlayFrame = [0, 0, 0];
this.overlayData = [[], [], []];
this.overlayNum = [0, 0, 0];
if (this.workers[0]) {
this.workers[0].terminate();
}
if (this.workers[1]) {
this.workers[1].terminate();
}
if (this.workers[2]) {
this.workers[2].terminate();
}
this.makeNoise(0);
this.makeNoise(1);
this.makeNoise(2);
if (this.intervalId) {
window.clearInterval(this.intervalId);
}
this.intervalId = window.setInterval(this.paintNoise, 100);
}
makeNoise(index: number) {
if (this.canvas) {
const width = this.canvas.width;
const height = this.canvas.height;
this.workers[index] = new Worker("./FillCanvas.ts");
if (this.workers[index]) {
this.workers[index]!.onmessage = (event) => {
if (this.overlayNum[index] < 4 || !event.data[0]) {
this.overlayData[index].push(event.data);
this.overlayNum[index]++;
if (this.overlayNum[index] < 4) {
this.workers[index]!.postMessage([width, height]);
} else {
this.workers[index]!.postMessage([width, height, new Uint8ClampedArray(width * height * 4), this.overlayData[index][0]]);
this.overlayFrame[index]++;
}
} else {
if (event.data[0]) {
this.noiseData[index].push(new ImageData(event.data[0], width, height));
this.noiseNum[index]++;
if (this.noiseNum[index] < 30) {
this.workers[index]!.postMessage([width, height, event.data[1], this.overlayData[index][Math.ceil(this.overlayFrame[index] / 4) % 4]]);
this.overlayFrame[index]++;
} else {
this.workers[index] = undefined;
}
}
}
}
this.workers[index]!.postMessage([width, height]);
}
}
}
paintNoise() {
if (this.noiseNum[0] > 10) {
this.frame++;
if (this.frame % this.noiseNum[this.frameSet % 3] === 0) {
this.frameSet++;
}
if (this.canvas) {
let ctx = this.canvas.getContext("2d");
if (ctx) {
ctx.putImageData(this.noiseData[this.frameSet % 2][this.frame % this.noiseNum[this.frameSet % 2]], 0, 0);
}
}
}
}
}
导出默认类PaintCanvas扩展工作程序{
私人画布？：OffscreenCanvas；
专用有效期？：编号；
私有帧：数字；
私有框架集：编号；
private noiseData:ImageData[]；
私有noiseNum：编号[]；
私有覆盖帧：编号[]；
私有覆盖数据：uint8clampedaray[]]；
私有覆盖层：编号[]；
私人工人：（工人|未定义）[]；
构造函数（stringUrl:string | URL）{
super（stringUrl）；
此.frame=0；
this.frameSet=0；
this.noiseData=[]、[]、[]；
this.noiseNum=[0,0,0]；
this.overlayFrame=[0,0,0]；
this.overlydata=[]、[]、[]；
this.overlayNum=[0,0,0]；
this.workers=[未定义，未定义，未定义]；
}
onmessage=（事件：MessageEvent）=>{
this.canvas=event.data；
此.frame=0；
this.frameSet=0；
this.noiseData=[]、[]、[]；
this.noiseNum=[0,0,0]；
this.overlayFrame=[0,0,0]；
this.overlydata=[]、[]、[]；
this.overlayNum=[0,0,0]；
if（此.workers[0]）{
此.workers[0].terminate（）；
}
如果（此.workers[1]）{
this.workers[1].terminate（）；
}
如果（此.workers[2]）{
this.workers[2].terminate（）；
}
这是makeNoise（0）；
这就是制造噪音（1）；
这就是制造噪音（2）；
如果（本条有效）{
window.clearInterval（this.intervalId）；
}
this.intervalId=window.setInterval（this.paintNoise，100）；
}
makeNoise（索引：编号）{
if（this.canvas）{
const width=this.canvas.width；
const height=this.canvas.height；
this.workers[索引]=新的Worker（“./FillCanvas.ts”）；
if（this.workers[索引]）{
this.workers[index]！.onmessage=（事件）=>{
if（this.overlayNum[index]<4 | |！event.data[0]）{
this.overlydata[index].push（event.data）；
这个.overlayNum[索引]+；
if（此.overlayNum[索引]<4）{
this.workers[index]！.postMessage（[width，height]）；
}否则{
this.workers[index]！.postMessage（[width，height，new-uint8clampedaray（width*height*4），this.overlydata[index][0]）；
这个.overlayFrame[索引]+；
}
}否则{
if（事件数据[0]）{
this.noiseData[index].push（新的ImageData（event.data[0]，宽度，高度））；
this.noiseNum[index]++；
if（此.noiseNum[索引]<30）{
this.workers[index]！.postMessage（[width，height，event.data[1]，this.overlydata[index][Math.ceil（this.overlyframe[index]/4）%4]）；
这个.overlayFrame[索引]+；
}否则{
this.workers[索引]=未定义；
}
}
}
}
this.workers[index]！.postMessage（[width，height]）；
}
}
}
油漆噪音（）{
if（this.noiseNum[0]>10）{
这个.frame++；
if（this.frame%this.noiseum[this.frameSet%3]==0）{
这个.frameSet++；
}
if（this.canvas）{
设ctx=this.canvas.getContext（“2d”）；
如果（ctx）{
ctx.putImageData（this.noiseData[this.frameSet%2][this.frame%this.noiseNum[this.frameSet%2]]，0，0）；
}
}
}
}
}
您还应该注意顶部的workerPath导入。几年前，我尝试实现顶级答案，这确实使代码本身可见，但只要代码仍然是typescript模块，它就无法工作。相反，我尝试使用类的构造函数实例化worker，例如
new PaintCanvas（）我还尝试将worker文件放在react公共文件夹中，并使用公共url引用它。tsconfig文件自动注意到了这一点，并将该文件添加到“include”部分，我认为这看起来很有希望，但它仍然尝试执行index.html。
所以我的问题是，在react中是否有一种惯用的非黑客方式来实现typescript中的Web Workers，或者我应该使用我在别处见过的黑客方式之一？我知道Web Worker API是最新成熟的，所以我希望我在网上找到的很多答案都不再需要了<
export default class PaintCanvas extends Worker {
private canvas?: OffscreenCanvas;
private intervalId?: number;
private frame: number;
private frameSet: number;
private noiseData: ImageData[][];
private noiseNum: number[];
private overlayFrame: number[];
private overlayData: Uint8ClampedArray[][];
private overlayNum: number[];
private workers: (Worker|undefined)[];
constructor(stringUrl: string | URL) {
super(stringUrl);
this.frame = 0;
this.frameSet = 0;
this.noiseData = [[], [], []];
this.noiseNum = [0, 0, 0];
this.overlayFrame = [0, 0, 0];
this.overlayData = [[], [], []];
this.overlayNum = [0, 0, 0];
this.workers = [undefined, undefined, undefined];
}
onmessage = (event: MessageEvent) => {
this.canvas = event.data;
this.frame = 0;
this.frameSet = 0;
this.noiseData = [[], [], []];
this.noiseNum = [0, 0, 0];
this.overlayFrame = [0, 0, 0];
this.overlayData = [[], [], []];
this.overlayNum = [0, 0, 0];
if (this.workers[0]) {
this.workers[0].terminate();
}
if (this.workers[1]) {
this.workers[1].terminate();
}
if (this.workers[2]) {
this.workers[2].terminate();
}
this.makeNoise(0);
this.makeNoise(1);
this.makeNoise(2);
if (this.intervalId) {
window.clearInterval(this.intervalId);
}
this.intervalId = window.setInterval(this.paintNoise, 100);
}
makeNoise(index: number) {
if (this.canvas) {
const width = this.canvas.width;
const height = this.canvas.height;
this.workers[index] = new Worker("./FillCanvas.ts");
if (this.workers[index]) {
this.workers[index]!.onmessage = (event) => {
if (this.overlayNum[index] < 4 || !event.data[0]) {
this.overlayData[index].push(event.data);
this.overlayNum[index]++;
if (this.overlayNum[index] < 4) {
this.workers[index]!.postMessage([width, height]);
} else {
this.workers[index]!.postMessage([width, height, new Uint8ClampedArray(width * height * 4), this.overlayData[index][0]]);
this.overlayFrame[index]++;
}
} else {
if (event.data[0]) {
this.noiseData[index].push(new ImageData(event.data[0], width, height));
this.noiseNum[index]++;
if (this.noiseNum[index] < 30) {
this.workers[index]!.postMessage([width, height, event.data[1], this.overlayData[index][Math.ceil(this.overlayFrame[index] / 4) % 4]]);
this.overlayFrame[index]++;
} else {
this.workers[index] = undefined;
}
}
}
}
this.workers[index]!.postMessage([width, height]);
}
}
}
paintNoise() {
if (this.noiseNum[0] > 10) {
this.frame++;
if (this.frame % this.noiseNum[this.frameSet % 3] === 0) {
this.frameSet++;
}
if (this.canvas) {
let ctx = this.canvas.getContext("2d");
if (ctx) {
ctx.putImageData(this.noiseData[this.frameSet % 2][this.frame % this.noiseNum[this.frameSet % 2]], 0, 0);
}
}
}
}
}
import PaintCanvasWorker from 'worker-loader!./PaintCanvas';
// ... later ...
this.worker = new PaintCanvasWorker();