Messaging

const ch = new MessageChannel();

// 非 message 只是监听当前 target 的自定义事件
ch.port1.addEventListener('Ready', (e) => {
  console.debug(`port 1`, e.type, e.detail);
});
ch.port1.addEventListener('message', (e) => {
  console.debug(`port 1`, e.type, e.data);
});

ch.port2.addEventListener('Ready', (e) => {
  console.debug(`port 2`, e.type, e.detail);
});
ch.port2.addEventListener('message', (e) => {
  console.debug(`port 2`, e.type, e.data);
});

// 会直接触发
ch.port1.dispatchEvent(new CustomEvent('Ready', { detail: 'to port2' }));
ch.port2.dispatchEvent(new CustomEvent('Ready', { detail: 'to port1' }));

// 不会触发 - 没有 start
ch.port1.postMessage({ type: 'MessageReady', detail: 'to port2' });
ch.port2.postMessage({ type: 'MessageReady', detail: 'to port1' });

console.debug(`setup`);

// 使用 addEventListener 需要手动 start
ch.port1.start();
ch.port2.start();

const a = new BroadcastChannel('Auth');
const b = new BroadcastChannel('Auth');
const c = new BroadcastChannel('Auth');

a.addEventListener('message', (e) => console.log(`a got`, e.data));
b.addEventListener('message', (e) => console.log(`b got`, e.data));
c.addEventListener('message', (e) => console.log(`c got`, e.data));

a.postMessage({ by: 'a' });
b.postMessage({ by: 'b' });
c.postMessage({ by: 'c' });