在 React 中使用 Shared Worker答案

【问题标题】：Using Shared Worker in React在 React 中使用 Shared Worker
【发布时间】：2018-08-31 20:44:56
【问题描述】：

我有一个后端应用程序，它通过 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);}); 
}

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;

【问题讨论】：

Unexpected token < 通常表示你设置路径错误，worker 得到的是 404 html 页面而不是脚本
CRA 中的 Webpack 存在问题 (github.com/facebook/create-react-app/issues/3660) 除此之外，我不确定 worker.js 应该是什么样子（传递给 SharedWorker() 构造函数的那个）。在所有旧示例中，它会立即调用函数 (function () {} ())，我怀疑这是否是 React 的方式。
当您没有在尝试使用jsx 的文件中导入React 时，通常会发生这种情况。
添加了一些代码
Component 后面缺少开头类括号。

标签： javascript reactjs shared-worker

【解决方案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);

【讨论】：