搜索

有思俱乐部学习园地

Electron进阶

1.主进程与渲染进程

            在 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 操作。
            
            

2.主进程与渲染进程之间的通信


            在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') 但是有缓存

            

工作人员

 
                    
作者:ZJINH
信息录入:ZJINH
文案编辑:XXX
视频录制:XXX
视频编辑:XXX
图片编辑:XXX