electron 内主进程与渲染进程,webview之间的通信

   这里先插个题外话,什么是进程,为什么要分主进程子进程?首先进程是资源分配的单位,是运行的程序,一个进程自然只能代表一个程序,多道程序自然而然就产生了多进程的概念。进程中通过CreateProcess()函数去创建一个子进程,子进程在全部处理过程中只对父进程地址空间中的相关数据进行访问,从而可以保护父进程地址空间中与当前子进程执行任务无关的全部数据。对于这种情况,子进程所体现出来的作用同函数和线程比较相似,可以看成是父进程在运行期间的一个过程为此,需要由父进程来掌握子进程的启动、执行和退出。创建子进程才能多道程序并发执行。同一个进程之间的资源是共享的,子进程可以使用主进程共享的数据。

在electron中分主进程(ipcMain)与渲染进程(ipcRenderer),渲染进程主要负责渲染页面,

1、从主进程到渲染进程的异步通信。

// 在主进程中
const {ipcMain} = require('electron') 
ipcMain.on('asynchronous-message', (event, arg) => { //主进程接收渲染进程的请求事件
 console.log(arg) // prints "ping" //获取参数
    ​    ​..... //处理事件的过程
 event.sender.send('asynchronous-reply', 'pong') //将事件处理结果在以另一个响应返给渲染进程
})

//在渲染器进程 (网页) 中
const {ipcRenderer} = require('electron')
ipcRenderer.on('asynchronous-reply', (event, arg) => {  //渲染进程接收主进程响应回来的处理结果
    ​console.log(arg) // prints "pong"
}) 
ipcRenderer.send('asynchronous-message', 'ping')//向主进程请求事件,携带参数  

该种通讯必须渲染进程先请求主进程,否则主进程无法主动响应渲染竟成数据;

​2、页面嵌入webview,页面与webview里面的页面之间的通信

使用 webview 标签在Electron 应用中嵌入 "外来" 内容 (如 网页)。外来"内容包含在 webview 容器中显示,src所传入的地址可以是本程序内的也可以本程序的外的。

与 iframe 不同, webview 在与应用程序不同的进程中运行。它与您的网页没有相同的权限, 应用程序和嵌入内容之间的所有交互都将是异步的。

这将保证你的应用对于嵌入的内容的安全性。

<webview id="foo" src="https://www.github.com/" nodeintegration style="display:inline-flex; width:640px; height:480px"></webview>

当有nodeintegration此属性时, webview 中的访客页(guest page)将具有Node集成, 并且可以使用像 require 和 process 这样的node APIs 去访问低层系统资源const webview = document.querySelector('webview')

webview.addEventListener('dom-ready', () => {
   webview.openDevTools()//webview加载完成,可以处理一些事件了
  webview.send('ping') //向webview嵌套的页面响应事件
})
webview.addEventListener('ipc-message', (event) => { 
  console.log(event.channel) // Prints "pong" 在此监听事件中接收webview嵌套页面所响应的事件
})

//嵌套页面
const {ipcRenderer} = require('electron') 
ipcRenderer.on('ping', (e) => { //接收响应
  console.log(e)
})
ipcRenderer.sendToHost('pong')//向webview所在页面的进程传达消息

这样两者之间就可以在本项目中之间相互嵌套资源了,webview也可以释放所嵌套页面占用的资源。

  友情链接,详情查看官网的webview的使用

posted @ 2018-11-08 23:12  苏氏之道  阅读(6068)  评论(1编辑  收藏  举报