在SharedWorker中父子组件接收消息

Question

我使用这个脚本创建了一个sharedWorker

// sharedWorker.js
importScripts('https://cdn.socket.io/4.3.1/socket.io.min.js');
let socket
let browserInstances = []
let counter = 0

onconnect = function(e) {
  const port = e.ports[0]
  browserInstances.push(port)


  if (!socket) {
    socket = io('socket-url');

    socket.on('message', (message) => {
      const msg = JSON.parse(message)
      browserInstances.map(instance => {
        instance.postMessage({type: msg.type, data: msg.data});
      });
    });
  }

}

我从套接字接收两种类型的消息 一个是 {type: 'notification', data: '12345'} 另一个是 {type: 'event', data: '12345'}

现在有两个监听器，一个是我的主 App.tsx 组件，另一个是我的子组件。

这是我的 App.tsx 监听器

worker.port.onmessage = (event: any) => {
            console.log(event.data)
            if (event.data.type === 'notification') {
                console.log('Notification received:', event.data.data);
                // Handle notification logic here
              }
              // Do not consume the message, let it propagate to other components
              return true;
          }

这是我的 childComponent.tsx 监听器

worker.port.onmessage = (event: any) => {
        console.log(event)
        if (event.data.type === 'event') {
          console.log('Event received:', event.data.data);
          // Handle event logic here
        }      
      }

问题是它仅在 App.tsx 组件中接收消息，消息不会传递到 childComponent.tsx，但是当我删除 App.tsx 侦听器时，它会传递到 childComponent。如何根据数据类型将消息传递给App和childComponent？

Answer 1

worker.port.onmessage = ___

分配给

onmessage

属性，覆盖 之前的任何值（从而删除以相同方式设置的任何先前事件侦听器）。相反，请使用

worker.port.addEventListener("message", ___);

，这样您就可以为该事件拥有多个侦听器。