i have a project with react, typescript , webpack 5 and just for practice reasons, i try in a custom hook to create a shared-worker and receive some mock data from it. Even though i see in browser task manager Share Worker: http://localhost:300/src_webWorkers_mySharedWorker_ts.index.js file, i cant see either from useSharedWorker.tsx file or mySharedWorker.ts file the console log messages. which means that self.onconnect method never runs, right?.
At this point I should mention that I have been able to set web worker with react, typescript , webpack 5, successfully web worker example
Any ideas how I can solve that problem (any alternative solutions or any possible shared worker improvements) and where the problem is?
// hooks/useSharedWorker.tsx file
import { useEffect, useState } from 'react';
const useSharedWorker = (): any => {
const [data, setData] = useState(null);
useEffect(() => {
const worker = new SharedWorker(new URL('../webWorkers/mySharedWorker.ts', import.meta.url));
worker.port.onmessage = event => {
console.log('onmessage', event.data);
setData(event.data);
};
worker.port.start();
worker.port.postMessage({ msg: 'Hi, i am useSharedWorker' });
worker.port.onmessageerror = event => {
console.log('onmessageerror', event.data);
};
return () => {
console.log('close on unmount');
worker.port.close();
};
}, []);
return data;
};
export default useSharedWorker;
// webWorkers/mySharedWorker.ts file
function doSomething(port: MessagePort): void {
const data = {};
// some code ...
port.postMessage(data);
}
self.onconnect = (e: MessageEvent): void => {
console.log('[Worker] onconnect');
const port = e.ports[0];
port.onmessage = (event: MessageEvent): void => {
const { msg } = event.data;
console.log('[Worker] onmessage', msg);
doSomething(port);
};
};
