Использование Shared Worker в React - PullRequest
Новая
       30

Использование Shared Worker в React

0 голосов
/ 31 августа 2018

У меня есть внутреннее приложение, которое постоянно передает события в мое приложение React через веб-сокеты. При получении определенного события должна быть открыта новая вкладка браузера. Приложение будет запускаться пользователем на нескольких вкладках, поэтому мне нужно открыть новую вкладку только один раз и предотвратить ее открытие всеми запущенными экземплярами.

Я пытался использовать постоянное хранилище Redux, но оно не соответствует моим потребностям. Лучшее решение, которое я нашел, это Shared Workers.

Я пытался использовать Shared Worker в своем приложении React, но не могу его правильно настроить. Он либо импортируется неправильно, либо Webpack не может его загрузить Uncaught SyntaxError: Unexpected token <

Когда я гуглил, я не нашел примеров использования Shared Worker в приложении React (с или без CRA), и на данный момент я даже не уверен, что это возможно. Я нашел несколько примеров Web Workers, но у них совершенно разные конфиги.

Может кто-нибудь поделиться некоторыми особенностями запуска Shared Worker в React? Или любые другие идеи, которые могут предоставить мне подобную функциональность, также будут высоко оценены.

Редактировать: Добавление последнего кода из того, что я пробовал. Не обращайте внимания на логику счетчика, рассмотрите только настройку:

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;
...