HTML5中通过MessageChannel实现多个Worker间直接通信

MessageChannel支持Worker间直接通信无需主线程中转需配对端口、传输后调用start()可构建点对点或中心辐射型通信模型。HTML5 中的 MessageChannel 确实支持多个 Worker 之间的**直接通信**无需经过主线程中转。关键在于正确创建和分发通道端口port1 和 port2并确保每个 Worker 持有对应端口后调用 start() 启动监听。核心机制端口配对与独立传输MessageChannel 实例包含两个单向、双向可通信的 MessagePort 对象port1 和 port2。它们构成一条私有通道消息只在这一对端口间流动不经过主线程事件循环。只要把其中一个端口传给 Worker另一个留在本方可以是主线程也可以是另一个 Worker即可建立直连。端口一旦被传递通过 postMessage(..., [port])原持有方就失去对该端口的引用无法再使用它 接收方必须显式调用 port.start()或监听 message 事件时自动启动才能开始收取消息 多个 Worker 可以两两配对形成网状通信也可由一个“中介 Worker”持有多对端口实现广播或路由Worker ? Worker 直连示例无主线程参与假设 Worker A 需要直接向 Worker B 发送数据Worker A 创建 new MessageChannel()得到 port1 和 port2 Worker A 将 port2 通过 postMessage({type: connect, port: port2}, [port2]) 发送给 Worker B注意第二个参数为 transfer list Worker B 在 onmessage 中接收到该消息后提取 event.ports[0]即传来的 port2并调用 event.ports[0].start() 此后Worker A 可用 port1.postMessage(...)Worker B 用 event.ports[0].onmessage 接收——全程不经过主线程注意事项与常见陷阱实际使用中容易忽略几个关键点 Cleanup.pictures 智能移除图片中的物体、文本、污迹、人物或任何不想要的东西