0

我在我的 React 应用程序中使用 Web Worker，它有一个如下所示的辅助类：

export class WebWorker {
constructor(worker) {
    const code = worker.toString();
    const blob = new Blob(["(" + code + ")()"]);
    return new Worker(URL.createObjectURL(blob));
}}

工人看起来像：

export default () => {
self.addEventListener('message', function (e) {
    switch (e.data.event) {
        case 'start':
            // Start back ground task
            break;
        case 'stop':
            // Stop background task
            break;
    }
}, false);

然后我可以使用创建工人

let sessionWorker = new WebWorker(SessionWorker);
sessionWorker.postMessage({event: "start"})

这工作正常，但是我现在需要使用 SharedWorker 并且我无法让它工作。我发现的所有资源都显示了普通的网络工作者。有这个 SO Question Using Shared Worker in React但它对我不起作用。它实际上看起来与我的常规 WebWorker 代码相同，但这不起作用，因为 SharedWorkers 要求您实现一个 onconnect 函数，而我不明白该怎么做。我发现的非反应示例将工作脚本显示为：

onconnect = function(e) {
   var port = e.ports[0];
   port.onmessage = function(e) {
     var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
     port.postMessage(workerResult);
   }
}

但是如果我把它放在我的 worker js 文件中并使用 WebWorker 帮助程序遵循相同的模式，worker.toString() 只会返回 [object Window] 并且它永远不会被执行。我不明白如何创建一个将被调用的“onconnect”函数。我尝试过这样的变体：

import React from 'react';

self.onconnect = (e) => {
    var port = e.ports[0];
    console.log("test log");
    port.onmessage = function(e) {
        console.log("Message received ", e)
        port.postMessage("test");
    }
}
export default self;

最终没有什么对我有用。显然我根本不懂 Javascript 中的导出。如果我只是导出一个名为 onconnect 的函数，它永远不会被调用，显然 onconnect 必须属于某种类上下文（如 Window 或 Self），但我不明白需要什么

谢谢你，特洛伊。

4

0 回答 0