electron 內主進程與渲染進程,webview之間的通訊

   這裏先插個題外話,什麼是進程,爲何要分主進程子進程?首先進程是資源分配的單位,是運行的程序,一個進程天然只能表明一個程序,多道程序天然而然就產生了多進程的概念。進程中經過CreateProcess()函數去建立一個子進程,子進程在所有處理過程當中只對父進程地址空間中的相關數據進行訪問,從而能夠保護父進程地址空間中與當前子進程執行任務無關的所有數據。對於這種狀況,子進程所體現出來的做用同函數和線程比較類似,能夠當作是父進程在運行期間的一個過程爲此,須要由父進程來掌握子進程的啓動、執行和退出。建立子進程才能多道程序併發執行。同一個進程之間的資源是共享的,子進程可使用主進程共享的數據。javascript

在electron中分主進程(ipcMain)與渲染進程(ipcRenderer),渲染進程主要負責渲染頁面,html

一、從主進程到渲染進程的異步通訊。java

// 在主進程中
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')//向主進程請求事件,攜帶參數  

該種通信必須渲染進程先請求主進程,不然主進程沒法主動響應渲染竟成數據;node

​二、頁面嵌入webview,頁面與webview裏面的頁面之間的通訊git

使用 webview 標籤在Electron 應用中嵌入 "外來" 內容 (如 網頁)。外來"內容包含在 webview 容器中顯示,src所傳入的地址能夠是本程序內的也能夠本程序的外的。github

與 iframe 不一樣, webview 在與應用程序不一樣的進程中運行。它與您的網頁沒有相同的權限, 應用程序和嵌入內容之間的全部交互都將是異步的。web

這將保證你的應用對於嵌入的內容的安全性。api

<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的使用

相關文章
相關標籤/搜索