9.5 渲染进程间通信：主进程中转、BroadcastChannel、MessagePort

在 Electron 应用中，界面由多个渲染进程组成（每个 BrowserWindow 一个渲染进程）。当应用需要在一个窗口触发动作、另一个窗口即时响应时，就涉及渲染进程之间的通信。Electron 提供了三种主要方式来处理这种场景：通过主进程中转、使用 BroadcastChannel、以及利用 MessagePort 建立直接通道。

9.5.1 通过主进程中转

这是最基础也最常见的方式。渲染进程之间不能直接互发消息，但都可以通过 IPC 与主进程通信。因此，主进程可以充当消息中转站：渲染进程 A 发送消息给主进程，主进程再转发给渲染进程 B。

优点：安全可控，主进程可以对消息进行过滤、鉴权和集中管理；支持跨窗口任意类型的通信。
缺点：会增加主进程的负担，如果消息量大或频率高，可能影响主进程的响应能力。

实现步骤：

渲染进程 A 使用 ipcRenderer.send 或 ipcRenderer.invoke 发送消息给主进程，约定一个频道。
主进程在 ipcMain.on 中监听该频道，获取目标窗口（通常通过 webContents 引用）。
主进程调用目标窗口的 webContents.send 将消息转发过去。
渲染进程 B 通过 ipcRenderer.on 接收消息。

代码示例：

主进程（main.js）

const { ipcMain, BrowserWindow } = require('electron');

// 存储对窗口的引用
let windowA, windowB;

ipcMain.on('forward-to-b', (event, data) => {
  // 转发给窗口B
  if (windowB && !windowB.isDestroyed()) {
    windowB.webContents.send('message-from-a', data);
  }
});

渲染进程 A（preload 暴露的 send 方法）

// preload.js 已通过 contextBridge 暴露 sendToMain
window.api.sendToMain('forward-to-b', { text: 'Hello from A' });

渲染进程 B（接收）

// preload.js 已暴露 onMessage
window.api.onMessage('message-from-a', (data) => {
  console.log('B received:', data.text);
});

这种方式在实际项目中非常普遍，尤其适合多窗口协作的大型应用（如 VS Code 的编辑器分屏间的同步），主进程还能顺便完成权限检查和持久化等工作。

9.5.2 使用 BroadcastChannel

如果两个渲染进程同源（即 HTML 文件的协议、域名、端口完全相同），可以直接使用浏览器原生的 BroadcastChannel API，完全绕过主进程。

优点：无主进程参与，速度更快；API 简单，和传统 Web 开发一致；适合轻量级的事件广播。
缺点：仅限同源渲染进程；无法享受主进程的集中控制和安全管理；必须启用 contextIsolation 时仍可通过预加载脚本暴露该 API。

适用场景：同一个 Electron 应用中的多个窗口加载的是同一个本地页面（例如 file:// 协议下的页面），或者多个窗口在同一个自定义协议（如通过 protocol 模块注册的协议）下运行。比如，一个窗口用于控制播放列表，另一个窗口用于显示视频，它们可以通过 BroadcastChannel 发送播放指令。

示例：

窗口 1 和窗口 2 均加载自同一个 file:// 路径或相同协议的页面，HTML 中可直接：

// 渲染进程 A
const channel = new BroadcastChannel('app-events');
channel.postMessage({ action: 'pause' });

// 渲染进程 B
const channel = new BroadcastChannel('app-events');
channel.onmessage = (event) => {
  if (event.data.action === 'pause') {
    // 暂停播放
  }
};

如果你启用了上下文隔离，可以在预加载脚本中暴露 BroadcastChannel 给渲染进程：

// preload.js
contextBridge.exposeInMainWorld('broadcast', {
  send: (ch, msg) => new BroadcastChannel(ch).postMessage(msg),
  listen: (ch, cb) => {
    const bc = new BroadcastChannel(ch);
    bc.onmessage = (e) => cb(e.data);
  }
});

9.5.3 使用 MessagePort

MessagePort 是 Chromium 提供的一种更底层的点对点通信通道，沟通更直接，无需主进程中转，也不受同源策略限制。Electron 在主进程和渲染进程之间可以通过 MessageChannelMain 创建端口对，然后分别传递给两个渲染进程，使它们之间建立起类似“直接管道”的连接。

优点：完全绕过主进程，没有同源限制，适合高频、低延迟的数据交换。
缺点：需要主进程介入建立连接（一次性工作）；使用相对复杂，比前两种方案多了一些步骤；端口需要手动管理（关闭、转移等）。

使用步骤：

主进程中创建一对 MessageChannelMain 端口（port1 和 port2）。
通过 window.webContents.postMessage 或其他方式将 port1 传给窗口 A，将 port2 传给窗口 B。
在渲染进程中（通过预加载暴露的接收接口），使用 ipcRenderer.postMessage 监听端口消息，或者使用 port.onmessage 进行通信。

实际代码：

主进程：

const { app, BrowserWindow, ipcMain, MessageChannelMain } = require('electron');

let winA, winB;

function createWindows() {
  winA = new BrowserWindow({ /* ... */ });
  winB = new BrowserWindow({ /* ... */ });

  // 创建端口对
  const { port1, port2 } = new MessageChannelMain();

  // 将端口1交给窗口A
  winA.webContents.postMessage('port', null, [port1]);
  // 将端口2交给窗口B
  winB.webContents.postMessage('port', null, [port2]);

  winA.loadFile('index.html');
  winB.loadFile('index.html');
}

渲染进程需要监听主进程发送的端口（需在预加载中设置）。预加载脚本（preload.js）：

const { contextBridge, ipcRenderer } = require('electron');

let port;

ipcRenderer.on('port', (e) => {
  // e.ports[0] 就是传递过来的 MessagePort
  port = e.ports[0];
  port.onmessage = (event) => {
    // 收到另一个窗口发来的消息
    console.log('Received via MessagePort:', event.data);
  };
});

contextBridge.exposeInMainWorld('portAPI', {
  sendMessage: (msg) => {
    if (port) port.postMessage(msg);
  }
});

在两个渲染进程的 HTML 中，一个可以调用 window.portAPI.sendMessage('hello')，另一个就会在 port.onmessage 中接收到 'hello'。

注意：MessagePort 一旦被转移给渲染进程，主进程就不再持有，无法再监听或介入。这也意味着你必须妥善处理窗口关闭时关闭端口的逻辑，避免内存泄漏。

9.5.4 如何选择

主进程中转：最通用、最安全，适合绝大多数场景，特别是需要主进程验证或记录通信内容时。
BroadcastChannel：最轻量，适合同源窗口间的简单广播（如主题切换、全局状态同步）。如果有同源限制，注意协议配置。
MessagePort：性能最优，适合高频数据同步或需要实时协作的低延迟场景，但使用复杂度稍高，适合有经验的开发者。

这三种方式可以混用，不存在绝对的优劣。实际项目里，大量应用都采用“主进程中转 + 对于同源窗口辅以 BroadcastChannel”的组合，既保证了安全性，又兼顾了部分场景的性能与便利。