• Electron 主进程和渲染进程通信
  • Artiely
  • #electron#nodejs
  • 2018-07-07
  • 195
  • 1 min read
  • loading...

Electron 主进程和渲染进程通信

有时候我们想在渲染进程中通过一个事件去执行主进程里面的方法。或者在渲染进程中通知 主进程处理事件,主进程处理完成后广播一个事件让渲染进程去处理一些事情。这个时候就 用到了主进程和渲染进程之间的相互通信。

Electron 主进程,和渲染进程的通信主要用到两个模块:ipcMain 和 ipcRenderer

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

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

场景 1:渲染进程给主进程发送异步消息:

//渲染进程 
const { ipcRenderer } = require('electron') 
ipcRenderer.send('msg',{name:'张三'}); //异步
复制成功
1
2
3
//主进程 
const { ipcMain } = require('electron'); 
ipcMain.on(''msg'',(event,arg) => { 
  // 处理业务
})
复制成功
1
2
3
4
5

场景 2:渲染进程给主进程发送异步消息,主进程接收到异步消息以后通知渲染进程:

//渲染进程
const { ipcRenderer } = require('electron')
ipcRenderer.send('msg', { name: '张三' })
//异步
//主进程
const { ipcMain } = require('electron')
ipcMain.on('msg', (event, arg) => {
  event.sender.send('reply', 'pong')
})
//渲染进程
const { ipcRenderer } = require('electron')
ipcRenderer.on('reply', function(event, arg) {
  console.log(arg)
  // prints "pong"
})
复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

场景 3:渲染进程给主进程发送同步消息:

//渲染进程
const { ipcRenderer } = require('electron')
const msg = ipcRenderer.sendSync('msg-a')
console.log(msg)
//主进程
ipcMain.on('msg-a', event => {
  event.returnValue = 'hello'
})
复制成功
1
2
3
4
5
6
7
8

Electron渲染进程通过 localstorage给另一个渲染进程传值

localStorage.setItem(key,value); 
localStorage.getItem(key)
复制成功
1
2

通过 BrowserWindow 和 webContents 模块实现渲染进程和渲染进程的通信。

webContents 是一个 事件发出者.它负责渲染并控制网页,也是 BrowserWindow 对象的属性。

需要了解的几个知识点:

1、获取当前窗口的 id:

const winId = BrowserWindow.getFocusedWindow().id;
复制成功
1

2、监听当前窗口加载完成的事件

win.webContents.on('did-finish-load',(event) => { })
复制成功
1

3、同一窗口之间广播数据

win.webContents.on('did-finish-load',(event) => { 
  win.webContents.send('msg',winId,'我是 index.html 的数据'); 
})
复制成功
1
2
3

4、通过 id 查找窗口

let win = BrowserWindow.fromId(winId);
复制成功
1