本文中,苏南大叔和大家继续探讨electron的数据通信问题。在这里,就不得不提一下:ipcMainipcRenderer。这两项可以通过不同的事件来传递不同的数据。如果不考虑事件的因素的话,仅仅考虑单纯传递数据的话,其实有个更简单的方案,那就是global中的sharedObject。它可以用于主进程和渲染进程通信,同时也可以用于渲染进程之间相互传递数据。

global.sharedObjectglobal这个词儿是固定不变的。而sharedObject,只不过是大家约定俗成的叫法罢了。实际上您可以换成您喜欢的任何词儿,都不会报错的。

苏南大叔:electron主进程渲染进程,如何利用sharedObject共享数据? - electron-shared-object
electron主进程渲染进程,如何利用sharedObject共享数据?(图5-1)

本文测试环境:win10/electron@3.x,基于electron-quick-start项目。

数据存储方案对比

当然,sharedObject这个数据存储功能是electron独家提供的,并不是网页的原有特性。如果考虑到网页自身的技术方案的话,渲染进程之间的通信方案还有很多。不过,网页原生的数据存储方案(cookie/localstorage等)就照顾不到主进程和渲染进程之间的通信了,对吧?

所以,对于electron来说,sharedObject的主要应用场景是主进程和渲染进程的通信。而渲染进程之间的通信,其实也是经过了主进程进行中转的。如果您选择localstorage等其他方案的话,就是基于传统的网页技术了。

主进程定义sharedObject

不需要引入什么包,直接写就可以。唯一需要注意的是:在渲染进程中用到的key都要先在主进程中定义好。否则,在渲染进程中直接使用的话,就会看到undefined之类的字样。要点就一个:先定义好渲染进程所需要的key

main.js:

global.sharedObject = {
  argv: process.argv,
  site:"newsn.net",
  name:"苏南大叔"
}

那么,从上面可以看到,sharedObject里面有三个值,分别是:argv/site/name。那么这三个键值就是在渲染进程里面可以使用的key了。

在主进程中,直接添加新的key也是可以的。比如:

global.sharedObject.extra="附加值";

但是在渲染进程中,做类似的直接定义新的key操作的话,虽然不会报错,但是并不会生效。

苏南大叔:electron主进程渲染进程,如何利用sharedObject共享数据? - main-js-shared-object
electron主进程渲染进程,如何利用sharedObject共享数据?(图5-2)

渲染进程读取或修改

读取数据:

var remote = require('electron').remote;
var arguments = remote.getGlobal('sharedObject').argv;
console.log(arguments);

修改数据:

var remote = require('electron').remote;
remote.getGlobal('sharedObject').site="www.newsn.net";

苏南大叔:electron主进程渲染进程,如何利用sharedObject共享数据? - renderer-js-shared-object
electron主进程渲染进程,如何利用sharedObject共享数据?(图5-3)

那么对于两个及以上,渲染进程交换数据来说,就是一个渲染进程修改,另外一个渲染进程去读取了,套路和上面是一样的。

注意事项一

如果所操纵的key在主进程中,没有被定义的话,并不会报错。但是试图读取的时候,就会读取到个undefined

苏南大叔:electron主进程渲染进程,如何利用sharedObject共享数据? - renderer-js-shared-object2
electron主进程渲染进程,如何利用sharedObject共享数据?(图5-4)

在渲染进程中,读取sharedObject的时候,如果读取到了undefined。那么,请检查在主进程中的相关定义数据。

注意事项二

正确的使用范例:

 mainWindow = new BrowserWindow({
    webPreferences:{
      nodeIntegration:true
    }
  })

如果主进程中,把渲染进程的node能力给禁用掉的话,本文所说的80%内容都没有用了。所以,如果想正常使用sharedObject。那么,请开启nodeIntegration

错误的范例:

 mainWindow = new BrowserWindow({
    webPreferences:{
      nodeIntegration:false
    }
  })

否则,您可能会看到如下错误提示:

index.html:22 Uncaught ReferenceError: require is not defined
index.html:86 Uncaught ReferenceError: process is not defined

苏南大叔:electron主进程渲染进程,如何利用sharedObject共享数据? - nodeIntegration-shared-object
electron主进程渲染进程,如何利用sharedObject共享数据?(图5-5)

相关文章

总结

sharedObject,还是比较好用的。在多个页面之间可以相互交换数据。当然,最重要的是,可以用于主进程和渲染进程交换数据。看起来,挺方便的吧?

更多electron的相关经验文章,请点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   electron

本站的忠实读者小伙伴,正在阅读下面这些文章: