2

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

我尝试过使用 Redux 持久存储，但它似乎不符合我的需求。我发现的最佳解决方案是 Shared Workers。

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

当我用谷歌搜索时，我没有找到任何在 React 应用程序中使用 Shared Worker 的示例（有或没有 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);}); 
}

应用程序.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;
4

1 回答 1

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);
于 2019-08-21T05:17:16.897 回答