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



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


создайте файл с именем 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);
Unexpected token <обычно означает, что вы указали неверный путь, и рабочий получает страницу 404 html вместо скрипта.