跳到主要内容

主进程与渲染进程通信

IPC 通信模块​

Electron 提供了 IPC 通信模块，主进程的 ipcMain 和 渲染进程的 ipcRenderer

ipcMain、ipcRenderer 都是 EventEmitter 对象

ipcMain​

当在主进程中使用时，它处理从渲染器进程(网页)发送出来的异步和同步信息,当然也有可能从主进程向渲染进程发送消息。

ipcRenderer​

使用它提供的一些方法从渲染进程 (web 页面) 发送同步或异步的消息到主进程。 也可以接收主进程回复的消息

进程间通信​

从渲染进程到主进程​

Callback 写法：

  • ipcRenderer.send
  • ipcMain.on

Promise 写法 (Electron 7.0 之后，处理请求 + 响应模式)

  • ipcRenderer.invoke
  • ipcMain.handle

从主进程到渲染进程​

webContents负责渲染和控制网页, 是 BrowserWindow 对象的一个属性, 我们使用send方法向渲染器进程发送异步消息。

  • ipcRenderer.on
  • webContents.send

主进程到渲染进程通信实例​

渲染进程发送消息​

// src/render/ipcRender.js
//渲染进程

let send = document.querySelector('#send');
const { ipcRenderer } = require('electron');

send.onclick = function () {
    // 传递消息给主进程
    // 异步
    ipcRenderer.send('sendMsg', {name:'poetries', age: 23})
}

主进程收到消息处理并广播反馈通知渲染进程​

// src/main/ipcMain.js

//主进程

const { ipcMain }  = require('electron')

// 主进程处理渲染进程广播数据
ipcMain.on('sendMsg', (event, data)=> {
    console.log('data\n ', data)
    console.log('event\n ', event)
})

主进程接收消息并反馈​

// src/main/ipcMain.js
ipcMain.on('sendMsg', (event, data)=> {
    
    // 主进程给渲染进程广播数据
    event.sender.send('backToRender', '来自主进程的反馈')
})
// src/render/ipcRender.js
// 向主进程发送消息后，接收主进程广播的事件
ipcRenderer.on('backToRender', (e, data)=>{
    console.log('event\n ', e)
    console.log('data\n ', data)
})

event - IpcRendererEvent IpcRendererEvent对象继承Event sender IpcRenderer - IpcRenderer实例是事件发起的源头 senderId整型 - 发送信息的 webContents.id，可以通过调用 event.sender.sendTo(event.senderId, ...)来回复此信息，更多信息参考 ipcRenderer.sendTo。 仅适用于从不同renderer发来的信息。 从主进程直接发来的信息的 event.senderId是设置为0的。 ports MessagePort[] - A list of MessagePorts that were transferred with this message

同步通信​

ipcRenderer.sendSync('sendsync', {name:'poetries', age: 23})

渲染进程间通信​

通知事件​

  • 通过主进程转发（Electron 5之前） 
// In the main process.
ipcMain.on('ping-event', (event, arg) => {
  yourWindow.webContents.send('pong-event', 'something');
}

// In renderer process 1
ipcRenderer.send('ping-event', (event, arg) => {
    // do something
  }
)

// // In renderer process 2
ipcRenderer.on('pong-event', (event, arg) => {
    // do something
  }
)

  • ipcRenderer.sendTo (Electron 5之后) 
ipcRenderer.sendTo(webContentsId, channel, [, arg1][, arg2][, ...])
ipcRenderer.sendTo(windowId, 'ping', 'someThing')
//webContentsId : Number
//channel : String
//...args : any[]

数据共享​

  • Web 技术（localStorage、sessionStorage、indexedDB）
  • 使用 remote

remote数据共享

// main
global.sharedObject = {
    someProperty: 'default value'
}

// render1
require('electron').remote.getGlobal('sharedObject').someProperty = 'new value'

// render2

console.log(require('electron').remote.getGlobal('sharedObject').someProperty) // new value

利用 remote 接口直接获取渲染进程发送消息

// renderer process
// get Window by ID
remote.BrowserWindow.fromId(winId).webContents.send('ping', 'someThing');