electron 渲染进程（web 页面）和主进程 通信 之（ipcMain,ipcRenderer）

Electron 中的两种进程通信方式，分别为：

• 使用 ipcMain 和 ipcRenderer 两个模块
• 使用 remote 模块

一、 ipcRenderer

从渲染器进程到主进程的异步通信。
ipcRenderer 是一个 EventEmitter 的实例。 你可以使用它提供的一些方法从渲染进程 (web 页面) 发送同步或异步的消息到主进程。 也可以接收主进程回复的消息。

1.1 方法

ipcRenderer.send(channel, ...args)

通过channel向主进程发送异步消息，可以发送任意参数。

ipcRenderer.on(channel, listener)

• channel String
• listener Function
  • event IpcRendererEvent
  • ...args any[]

监听 channel，当接收到新的消息时 listener 会以 listener(event, args...) 的形式被调用。

二、ipcMain

从主进程到渲染进程的异步通信。
也可以从主进程向渲染进程发送消息，查阅ebContents.send获取更多信息。

• 发送消息时，事件名称为channel。
• 回复同步信息时，需要设置event.returnValue。
• 可以使用event.reply(...)将异步消息发送回发送者。 This helper method will automatically handle messages coming from frames that aren't the main frame (e.g. iframes) whereas event.sender.send(...) will always send to the main frame.

2.1方法

ipcMain.on(channel, listener)

• channel String
• listener Function
  • event IpcMainEvent
  • ...args any[]

监听 channel，当接收到新的消息时 listener 会以 listener(event, args...) 的形式被调用。

异步通信示例：

ipcRenderer 代码：

import { ipcRenderer } from 'electron'
ipcRenderer.send('toMain', data) // 向主进程发送消息
ipcRenderer.on('fromMain', (event, ...args) => func(...args))  // 监听

ipcMain 代码：

import {  ipcMain} from 'electron'
ipcMain.on('toMain', function (event, arg) { // 监听渲染进程，传递的数据
  // 逻辑处理
  event.reply('fromMain', arg); // 返回给渲染进程处理好的数据

});

同步通信示例：

ipcRenderer代码

ipcRenderer.sendSync(channel, data)

ipcMain 代码

ipcMain.on('syncGetLocalServer', function (event, arg) {
  // 读入文件，同步返回数据
  fs.readFile("./localServer.xml", { encoding: "utf-8" }, (err, data) => {
    event.returnValue=data; // 返回给渲染进程
  })
});