electron的渲染进程与渲染进程之间的通信

在 Electron 中,渲染进程之间无法直接通信,必须通过主进程作为中介。以下是详细的步骤和示例:

通信步骤

  1. 渲染进程A ‌ 发送消息至 ‌主进程‌。
  2. 主进程 ‌ 接收消息并转发至 ‌渲染进程B‌。
  3. 渲染进程B‌ 接收并处理消息。

示例代码

主进程(main.js)

javascript 复制代码
const { app, BrowserWindow, ipcMain } = require('electron');

let mainWindow, secondaryWindow;

app.whenReady().then(() => {
  // 创建主窗口
  mainWindow = new BrowserWindow({ webPreferences: { nodeIntegration: true, contextIsolation: false } });
  mainWindow.loadFile('main.html');

  // 创建次窗口
  secondaryWindow = new BrowserWindow({ webPreferences: { nodeIntegration: true, contextIsolation: false } });
  secondaryWindow.loadFile('secondary.html');

  // 监听来自主窗口的消息
  ipcMain.on('message-from-main', (event, data) => {
    // 转发给次窗口
    secondaryWindow.webContents.send('message-to-secondary', data);
  });

  // 监听来自次窗口的消息
  ipcMain.on('message-from-secondary', (event, data) => {
    // 转发给主窗口
    mainWindow.webContents.send('message-to-main', data);
  });
});

主窗口渲染进程(main.html/main.js)

xml 复制代码
<button id="sendBtn">发送消息到次窗口</button>
<script>
  const { ipcRenderer } = require('electron');

  document.getElementById('sendBtn').addEventListener('click', () => {
    const data = { text: '来自主窗口的消息' };
    ipcRenderer.send('message-from-main', data); // 发送到主进程
  });

  // 接收来自次窗口的消息
  ipcRenderer.on('message-to-main', (event, data) => {
    console.log('主窗口收到:', data.text);
  });
</script>

次窗口渲染进程(secondary.html/secondary.js)

xml 复制代码
<button id="sendBtn">发送消息到主窗口</button>
<script>
  const { ipcRenderer } = require('electron');

  document.getElementById('sendBtn').addEventListener('click', () => {
    const data = { text: '来自次窗口的消息' };
    ipcRenderer.send('message-from-secondary', data); // 发送到主进程
  });

  // 接收来自主窗口的消息
  ipcRenderer.on('message-to-secondary', (event, data) => {
    console.log('次窗口收到:', data.text);
  });
</script>

动态管理多个窗口

若需处理多个动态窗口,主进程需维护窗口引用:

主进程优化(main.js)

csharp 复制代码
const windows = new Map(); // 存储窗口ID和WebContents

function createWindow() {
  const win = new BrowserWindow({ webPreferences: { nodeIntegration: true, contextIsolation: false } });
  windows.set(win.id, win.webContents); // 保存窗口ID和WebContents

  win.on('closed', () => {
    windows.delete(win.id); // 窗口关闭时移除
  });

  return win;
}

// 监听任意渲染进程的消息并动态转发
ipcMain.on('send-to-window', (event, { targetId, data }) => {
  const target = windows.get(targetId);
  if (target) target.send('direct-message', data);
});

渲染进程发送消息

javascript 复制代码
// 获取当前窗口ID(需主进程在创建窗口时传递)
const windowId = require('electron').remote.getCurrentWindow().id;

// 发送到目标窗口(如ID为2的窗口)
ipcRenderer.send('send-to-window', {
  targetId: 2,
  data: { text: '动态路由消息' }
});

// 接收其他窗口的消息
ipcRenderer.on('direct-message', (event, data) => {
  console.log('收到来自窗口', event.sender.id, '的消息:', data.text);
});

关键点总结

  1. 主进程中介‌:所有渲染进程通信必须通过主进程转发。
  2. IPC 通道 ‌:使用 ipcMainipcRenderer 监听和发送消息。
  3. WebContents 引用 ‌:主进程通过 webContents.send() 向指定窗口发送消息。
  4. 动态窗口管理 ‌:使用 MapSet 存储窗口引用,实现灵活的路由。
相关推荐
涔溪6 分钟前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾6 分钟前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的7 分钟前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句10 分钟前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq66611 分钟前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞21 分钟前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀22 分钟前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
冰菓Neko23 分钟前
HTML 常用标签速查表
前端·html
倔强青铜三40 分钟前
为什么 self 与 super() 成了 Python 的永恒痛点?
人工智能·python·面试
gis收藏家1 小时前
从稀疏数据(CSV)创建非常大的 GeoTIFF(和 WMS)
前端