在 electron 中,最重要的一个概念就是主进程和渲染进程。
1.1 主进程
main.js在启动应用后就创建了一个主进程-main process,它可以通过electron中的一些模块直接与原生GUI(在你的应用窗口)交互。
1.2 渲染进程
仅启动主进程并不能给你的应用创建应用窗口。窗口是通过main文件里的主进程调用叫BrowserWindow的模块创建的。 上述示例中的index.html页面,是主进程创建了一个渲染进程窗口所加载的Web页面,每个页面都是运行在自己的进程里,这些进程我们称之为渲染进程。 渲染进程会在窗口中渲染出web页面(引用了CSS,JavaScript,图片等的HTML文件)。web页面是Chromium渲染的,因为各系统下标准是统一的的,所以兼容性很好。
1.3 主进程与渲染进程的关系
主进程通过构造BrowserWindow实例来创建页面。每个 BrowserWindow实例都在自己的渲染进程里运行页面。当一个 BrowserWindow 实例被销毁后,相应的渲染进程也会被终止。 主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互隔离的,并且只知道运行在该进程里的页面。 在页面里调用本地GUI是不允许的,因为在Web页面里管理本地GUI资源是非常危险而且容易造成资源泄露。如果你想在网页里进行GUI操作,该页面的渲染进程必须与主进程进行通讯,请求主进程进行相关的 GUI 操作。
在electron中,主进程与渲染进程有很多通信的方法。比如ipcRenderer和ipcMain,还可以在渲染进程使用remote模块。
2.1 ipcMain & ipcRenderer
主进程:ipcMain 渲染进程:ipcRenderer ipcMain模块和ipcRenderer是类EventEmitter的实例。 在主进程中使用ipcMain接收渲染线程发送过来的异步或同步消息,发送过来的消息将触发事件。 在渲染进程中使用ipcRenderer向主进程发送同步或异步消息,也可以接收到主进程的消息。
发送消息,事件名为 channel . 回应同步消息, 你可以设置 event.returnValue . 回应异步消息, 你可以使用 event.sender.send(...)
下面给出一个简单例子:
// In main process. const ipcMain = require('electron').ipcMain; ipcMain.on('asynchronous-message', function(event, arg) { console.log(arg); // prints "ping" event.sender.send('asynchronous-reply', 'pong'); }); ipcMain.on('synchronous-message', function(event, arg) { console.log(arg); // prints "ping" event.returnValue = 'pong'; }); // In renderer process (web page). const ipcRenderer = require('electron').ipcRenderer; console.log(ipcRenderer.sendSync('synchronous-message', 'ping')); // prints "pong" ipcRenderer.on('asynchronous-reply', function(event, arg) { console.log(arg); // prints "pong" }); ipcRenderer.send('asynchronous-message', 'ping');
同样也可以从主进程向渲染进程发送消息,使用的是 webContents.send方法,下面是具体的例子:
// 主进程.main.js var window = null; app.on('ready', function() { window = new BrowserWindow({width: 800, height: 600}); window.loadURL('file://' + __dirname + '/index.html'); window.webContents.on('did-finish-load', function() { window.webContents.send('ping', 'whoooooooh!'); }); });
//渲染进程index.html require('electron').ipcRenderer.on('ping', function (event, message) { console.log(message); // Prints "whoooooooh!" });
2.2 remote模块
remote模块支持RPC风格的通信,在渲染进程中获取主进程创建的一些全局对象和应用信息,还可以调用主进程所提供的一些方法,如重启应用、操作渲染进程等。 remote 模块提供了一种在渲染进程( 网页) 和主进程之间进行进程间通讯( IPC) 的简便途径。使用remote 模块,可以调用主进程对象的方法,而无需显式地发送进程间消息,这类似于 Java 的 RMI。
下面是从渲染进程创建一个浏览器窗口的例子:
const remote = require('electron').remote; const BrowserWindow = remote.BrowserWindow; var win = new BrowserWindow({ width: 800, height: 600 }); win.loadURL('api.1473.cn');
注意: 反向操作( 从主进程访问渲染进程) ,可以使用webContents.executeJavascript.
远程对象
remote 模块返回的每个对象( 包括函数) 都代表了主进程中的一个对象(我们称之为远程对象或者远程函数)。当调用远程对象的方法、执行远程函数或者使用远程构造器( 函数) 创建新对象时,其实就是在发送同步的进程间消息。 在上面的例子中, BrowserWindow 和 win 都是远程对象,然而 new BrowserWindow 并没有在渲染进程中创建 BrowserWindow 对象。 而是在主进程中创建了BrowserWindow 对象,并在渲染进程中返回了对应的远程对象,即 win 对象。 请注意只有可枚举属性才能通过 remote 进行访问.
远程对象的生命周期
Electron 确保在渲染进程中的远程对象存在(换句话说,没有被垃圾收集),那主进程中的对应对象也不会被释放。当远程对象被垃圾收集之后,主进程中的对应对象才会被取消关联。如果远程对象在渲染进程泄露了(即,存在某个表中但永远不会释放),那么主进程中的对应对象也一样会泄露,所以你必须小心不要泄露了远程对象。 不过,主要的值类型如字符串和数字,是传递的副本。
给主进程传递回调函数
在主进程中的代码可以从渲染进程——remote模块——中接受回调函数,但是使用这个功能的时候必须非常非常小心。 首先,为了避免死锁,传递给主进程的回调函数会进行异步调用。所以不能期望主进程来获得传递过去的回调函数的返回值。 比如,你不能主进程中给 Array.map 传递来自渲染进程的函数。
// 主进程 mapNumbers.js exports.withRendererCallback = function(mapper) { return [1,2,3].map(mapper); } exports.withLocalCallback = function() { return exports.mapNumbers(function(x) { return x + 1; }); } // 渲染进程 var mapNumbers = require("remote").require("./mapNumbers"); var withRendererCb = mapNumbers.withRendererCallback(function(x) { return x + 1; }) var withLocalCb = mapNumbers.withLocalCallback() console.log(withRendererCb, withLocalCb) // [true, true, true], [2, 3, 4]
如你所见,渲染器回调函数的同步返回值没有按预期产生,与主进程中的一模一样的回调函 数的返回值不同。 其次,传递给主进程的函数会持续到主进程对他们进行垃圾回收。
例如,下面的代码第一眼看上去毫无问题。给远程对象的 close 事件绑定了一个回调函数:
remote.getCurrentWindow().on('close', function() { // blabla... });
但记住主进程会一直保持对这个回调函数的引用,除非明确的卸载它。如果不卸载,每次重新载入窗口都会再次绑定,这样每次重启就会泄露一个回调函数。 更严重的是,由于前面安装了回调函数的上下文已经被释放,所以当主进程的 close 事件触 发的时候,会抛出异常。 为了避免这个问题,要确保对传递给主进程的渲染器的回调函数进行清理。可以清理事件处 理器,或者明确告诉主进行取消来自已经退出的渲染器进程中的回调函数。
访问主进程中的内置模块
在主进程中的内置模块已经被添加为 remote 模块中的属性,所以可以直接像使 用 electron 模块一样直接使用它们。
const app = remote.app;
方法
remote 模块有以下方法: remote.require(module) module String 返回在主进程中执行 require(module) 所返回的对象。 remote.getCurrentWindow() 返回该网页所属的 BrowserWindow 对象。 remote.getCurrentWebContents() 返回该网页的 WebContents 对象 remote.getGlobal(name) name String 返回在主进程中名为 name 的全局变量(即 global[name] ) 。 remote.process 返回主进程中的 process 对象。等同于 remote.getGlobal('process') 但是有缓存
作者:信息录入:文案编辑:视频录制:视频编辑:图片编辑: