Question

我有一个后端应用程序，该应用程序通过Web套接字不断向我的React应用程序提供事件。收到特定事件后，应打开一个新的浏览器选项卡。该应用程序将由用户在多个选项卡中运行，因此我只需要打开一个新选项卡，并防止所有正在运行的实例将其打开。

我尝试使用Redux持久性存储，但是它似乎与我的需求不符。我发现最好的解决方案是共享工作者。

我已经尝试在我的React应用程序中使用Shared Worker，但是我无法正确设置它。导入错误或Webpack无法加载 Uncaught SyntaxError: Unexpected token <

当我用Google搜索时，我还没有找到在React应用程序中使用共享工作器（带有或不带有CRA）的任何示例，目前，我什至不确定是否可行。我确实找到了一些Web Workers示例，但是它们具有完全不同的配置。

任何人都可以分享在React中运行Shared Worker的一些细节吗？否则任何可以为我提供类似功能的想法也将不胜感激。

编辑：添加我尝试过的最新代码。忽略计数器逻辑，只考虑设置：

worker.js

import React from 'react';

export const startCounter = () => {
  window.self.addEventListener("message", event => {
    console.log(event.data, self);
    let initial = event.data;
    setInterval(() => this.postMessage(initial++), 1000);}); 
}

App.js

import React, { Component } from 'react';
import {startCounter} from './worker';

class App extends Component {

  componentDidMount() {
    const worker = new SharedWorker(startCounter);
    worker.port.start()
    // worker.postMessage(this.state.counter);
    // worker.addEventListener('message', event => this.setState({counter: event.data}));
  }

  render() {
    return (
      <div className="App">
      </div>
    );
  }
}

export default App;

Answer 1

制作一个名为WebWorker.js的文件，如下所示：

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

并将其导入您的主文件，然后执行以下操作：

const workers = new WebWorker(worker);
 workers.postMessage(some message);

在React中使用Shared Worker

1 个答案: