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

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

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

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

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

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

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

worker.js

import React from 'react';

export const startCounter = () => {
  window.self.addEventListener("message", event => {
    console.info(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 < обычно означает, что вы указали неверный путь, и рабочий получает страницу 404 html вместо скрипта.
Bergi 31.08.2018 22:50

Проблема с Webpack в CRA (github.com/facebook/create-react-app/issues/3660). Кроме того, я не уверен, как должен выглядеть worker.js (тот, который передается в конструктор SharedWorker ()). Во всех старых примерах сразу вызывается функция (function () {} ()), и я сомневаюсь, что это правильный путь в React.

Hisagr 31.08.2018 22:58

Обычно это происходит, когда вы не импортируете React в файл, в котором пытаетесь использовать jsx.

trixn 31.08.2018 22:59

добавил код

Hisagr 31.08.2018 23:09

После Component отсутствует скобка начального класса.

trixn 31.08.2018 23:51
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
5
1 625
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);

Другие вопросы по теме