网络工作者是否有某种加载事件？

Question

I faced some problem when tried to use broadcast channel to communicate between main script and workers. I have code below in main script:

const channel = new BroadcastChannel('my_bus');
const worker = new Worker('worker.js');
const secondWorker = new Worker('second-worker.js');

channel.postMessage('1000');

and the similar code in both workers:

const bc = new BroadcastChannel('my_bus');

bc.onmessage = () => {
  console.log('worker get length');
}

The problem is when the message emitted from main script, workers are not loaded yet, so they skip the message. I am sure about it, because if I do something like this, it works fine:

setTimeout(() => {
  channel.postMessage('1000');
}, 100)

Is there some way to trigger callback after worker script has been loaded?

Answer 1

As per last comment, I'll wrote my suggestion as answer:

You can make the worker emit a message when they're loaded, and you listen to that message on main script. That usually what we do with web workers: they emit a message to the main thread to say "I'm ready to receive stuff".

A possible implementation could be:

// assumes the first `message` from workers is always the "loaded" ones
const loaded = w =>
  new Promise(r => w.addEventListener("message", r, { once: true }));

// Code runs inside async function, so we can use `await`
async function main() {
  const channel = new BroadcastChannel("my_bus");
  const worker = new Worker("worker.js");
  const secondWorker = new Worker("second-worker.js");

  await Promise.all([
    loaded(worker), 
    loaded(secondWorker)
  ]);

  // this will be post only once all the workers have been loaded
  channel.postMessage("1000");
}

// call the main function
main();

The workers' code will looks like:

const bc = new BroadcastChannel("my_bus");

bc.onmessage = () => {
  console.log("worker get length");
};

postMessage("loaded");

Answer 2

I found this Question/Answer trying to resolve an issue with web workers where it APPEARED that one cannot immediately post to an instantiated worker.

The solution was easier than implementing a loaded message for all the different workers. Simply pass in a name to define a scope for each worker.

const worker = new Worker("worker.js", { name: 'worker-type-1', type: 'module' );

The reason that this resolved the issue is that if all workers are a part of the same scope (''), if you immediately post to the worker after instantiating it, that post will be listened to by the first available worker of the same scope. Naming the new worker prevents this issue.