0Pricing
JavaScript Academy · 课时

使用 postMessage 进行消息传递

在主线程和工作线程之间通信。

使用 postMessage 进行消息传递 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

使用消息进行通信

由于主线程和工作线程拥有独立的内存，它们通过传递消息进行通信。postMessage 方法用于发送数据；message 事件用于接收数据。

向工作线程发送消息

在主线程中调用 worker.postMessage(data)。数据几乎可以是任何值：数字、字符串、对象或数组。

const worker = new Worker('worker.js');
worker.postMessage({ task: 'sum', numbers: [1, 2, 3, 4] });

在 worker 中接收

在 worker 内处理 message 事件。发送的值会出现在 event.data 中。

// worker.js
self.onmessage = (event) => {
  const { task, numbers } = event.data;
  console.log('worker received task:', task);
};

发送回复

worker 计算出结果后，使用自己的 postMessage 将结果发回（使用 self 或隐式全局对象）。

// worker.js
self.onmessage = (event) => {
  const { numbers } = event.data;
  const total = numbers.reduce((a, b) => a + b, 0);
  self.postMessage(total); // send result back
};

接收回复

回到主线程后，监听 worker 对象上的 message，以获取结果。

worker.onmessage = (event) => {
  console.log('result from worker:', event.data);
};

addEventListener 用法

您可以使用 addEventListener('message', ...)，而不是使用 onmessage 属性。这样可以添加多个监听器。

worker.addEventListener('message', (event) => {
  console.log('got:', event.data);
});

结构化克隆

消息使用结构化克隆算法进行复制，而不是共享。它可以处理对象、数组、映射、集合、日期对象和类型化数组，但不能处理函数、DOM 节点或类方法。

// OK to send: numbers, strings, plain objects, arrays,
// Map, Set, Date, ArrayBuffer, typed arrays.
// NOT cloneable: functions, DOM nodes, Error stacks lost.

消息协议

对于多种操作，请发送一个 type 字段，让 worker 知道要执行什么操作。这样可以让单个 worker 保持灵活性。

// main:
worker.postMessage({ type: 'multiply', a: 6, b: 7 });

// worker.js:
self.onmessage = (e) => {
  if (e.data.type === 'multiply') {
    self.postMessage(e.data.a * e.data.b);
  }
};

关联请求

发送多条消息时，请附加一个 id，以便将回复与对应的请求匹配起来。worker 会将该 id 原样返回。

// main: worker.postMessage({ id: 42, value: 'x' });
// worker: self.postMessage({ id: e.data.id, done: true });
// main can now match reply id 42 to its request.

双向通信

消息传递是双向且异步的。页面可以持续发送任务，同时 worker 持续返回部分结果，整个过程不会阻塞用户界面。

// Worker can report progress repeatedly:
// self.postMessage({ type: 'progress', percent: 50 });
// self.postMessage({ type: 'done', result: data });

清理监听器

不再需要 worker 时，请移除监听器并终止它，以避免内存泄漏；对于反复创建 worker 的单页应用尤其如此。

worker.onmessage = null;
worker.terminate();

快速检查

请测试您对 worker 消息传递的理解。

回顾

您已经学会了 worker 消息传递：

  • postMessage(data) 用于发送；message 事件用于接收。
  • 数据会出现在 event.data 中。
  • 两端都可以发送消息，因此通信是双向的。
  • 数据通过结构化克隆进行复制，而不是共享。
  • 对于多个任务，请使用 type/id 协议。

接下来将学习用于零拷贝数据传输的可转移对象。

常见问题解答

「使用 postMessage 进行消息传递」课时是免费的吗？

是的 — 「使用 postMessage 进行消息传递」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「使用 postMessage 进行消息传递」这节课中我会学到什么？

在主线程和工作线程之间通信。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。

「使用 postMessage 进行消息传递」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 创建 Web Worker
  2. 使用 postMessage 进行消息传递
  3. 可转移对象
  4. 应用场景与限制
← 返回 JavaScript Academy