在 React 中使用共享 Worker

Question

I have a backend app that constantly serves events to my React app via Web Sockets. When a specific event is received a new browser tab should be opened. The application will be run by a user in multiple tabs, so I need to open a new tab only once and prevent it from being opened by all running instances.

I've tried using Redux persistent storage, but it doesn't seem to correspond my needs. The best solution that I've found is Shared Workers.

I've tried using Shared Worker in my React app, but I can't set up it properly. It's either being imported incorrectly or Webpack is unable to load it Uncaught SyntaxError: Unexpected token <

When I googled I haven't found any examples of using Shared Worker in React app (with or without CRA) and at this point, I'm not even sure it's possible. I did found some Web Workers examples, but they have totally different configs.

Can anyone please share some specifics of running Shared Worker in React? Or any other ideas that can provide me with similar functionality will be also greatly appreciated.

Edit: Adding lastest code of what I've tried. Disregard the counter logic, consider just the setup:

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

make a file called WebWorker.js which looks like this:

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

and import it to your main file and do this:

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

Answer 2

Clarifying @Birat's answer: The SharedWorker constructor is looking for a URL , but here you're passing it a function:

    const worker = new SharedWorker(startCounter);

Give this a try instead:

    const worker = new SharedWorker(new URL('./worker', import.meta.url));