主线程和Worker之间的通信——postMessage方法

在JavaScript中，postMessage 方法是用于在不同上下文之间（如主线程和Web Workers或Service
Workers）传递消息的一种机制。

以下是如何使用 postMessage 在主线程和Worker之间通信的示例：

从Worker向主线程发送消息：

1. 在Worker中发送消息：

   self.postMessage('Hello from worker!');
   

   或者发送一个对象：

   self.postMessage({ data: 'Some data' });
   

2. 在主线程中接收消息：
   首先，你需要在创建Worker时监听其消息事件：

   const worker = new Worker('worker.js');
   worker.addEventListener('message', (event) => {
       console.log('Received message from worker:', event.data);
   });
   

从主线程向Worker发送消息：

1. 在主线程中发送消息：

   worker.postMessage('Hello from main thread!');
   

   或者发送一个对象：

   worker.postMessage({ command: 'start' });
   

2. 在Worker中接收消息：
   在Worker脚本中，你需要监听消息事件来接收来自主线程的消息：

   self.addEventListener('message', (event) => {
       console.log('Received message from main thread:', event.data);
   });
   

注意事项：

• postMessage 方法可以传递任何可以被序列化的数据，包括字符串、数字、布尔值、对象等。
• 当传递对象时，数据是通过结构化克隆算法进行复制的，这意味着原始对象不会被修改。
• 为了确保安全，postMessage 方法还可以接受第二个参数，用于指定哪些窗口或Worker可以接收此消息。例如：

  worker.postMessage('Some message', '*'); // 允许任何接收者
  worker.postMessage('Some message', 'https://example.com'); // 只允许来自特定源的接收者
  

通过这种方式，主线程和Worker可以安全地交换数据，而不会互相干扰或引入安全风险。这种通信机制是构建现代Web应用中复杂交互和并行处理的基础。