Electron -- 进程间通信（四）

1. ipcMain 和 ipcRenderer 模块

• ipcMain：在主进程中使用，用于监听渲染进程发送的消息，并处理这些消息。
• ipcRenderer：在渲染进程中使用，用于向主进程发送消息。

渲染进程（发送消息）：

// 在渲染进程中，使用 ipcRenderer 发送消息
const { ipcRenderer } = require('electron');
ipcRenderer.send('message-to-main', 'Hello from Renderer');

主进程（接收消息）： 

// 在主进程中，使用 ipcMain 监听消息
const { ipcMain } = require('electron');
ipcMain.on('message-to-main', (event, message) => {
  console.log(message); // 输出：Hello from Renderer
});

2. invoke 方法（基于 Promise 的 IPC） 

• 使用 invoke 方法可以实现基于 Promise 的 IPC 通信，适用于需要等待主进程响应的场景。

渲染进程（使用 invoke 发送异步消息）： 

// 渲染进程中使用 invoke 发送异步消息
const { ipcRenderer } = require('electron');
ipcRenderer.invoke('async-message').then((result) => {
  console.log(result); // 处理结果
});

主进程（处理异步消息）： 

// 主进程中处理异步消息
const { ipcMain } = require('electron');
ipcMain.handle('async-message', async () => {
  return 'Async response from main';
});

 3. sendSync 方法（同步 IPC）

• sendSync 方法允许渲染进程同步地向主进程发送消息，并等待响应。

渲染进程（发送同步消息）： 

// 渲染进程中发送同步消息
const { ipcRenderer } = require('electron');
const response = ipcRenderer.sendSync('sync-message', 'Hello Sync');

主进程（处理同步消息）： 

// 主进程中处理同步消息
const { ipcMain } = require('electron');
ipcMain.on('sync-message', (event, message) => {
  event.returnValue = `Sync response: ${message}`;
});

4. 通过预加载脚本通信

• 预加载脚本（preload.js）可以在渲染进程中注入全局对象，用于与主进程通信。

预加载脚本（暴露 IPC 方法）： 

// preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
  openUrlByDefaultBrowser: () => ipcRenderer.invoke('openUrlByDefaultBrowser', 'https://www.baidu.com')
});

渲染进程（调用预加载脚本暴露的方法）：  

// 在渲染进程中调用预加载脚本暴露的方法
window.electronAPI.openUrlByDefaultBrowser();

主进程（监听并处理预加载脚本的消息）：

// 主进程中监听并处理预加载脚本的消息
const { ipcMain } = require('electron');
const { shell } = require('electron');
ipcMain.handle('openUrlByDefaultBrowser', (event, url) => {
  shell.openExternal(url);
});

5. 不同渲染进程之间的通信 

• Electron 没有直接的方法可以在渲染进程之间发送消息，但可以通过主进程转发消息。

渲染进程1（发送消息）： 

// 渲染进程1发送消息给主进程
const { ipcRenderer } = require('electron');
ipcRenderer.send('forward-message', 'Hello from Renderer 1');

 渲染进程2（接收消息）：

// 渲染进程2监听接收消息
const { ipcRenderer } = require('electron');
ipcRenderer.on('received-message', (event, message) => {
  console.log(message); // 输出：Hello from Renderer 1
});

END.