1. 程式人生 > >electron 內主程序與渲染程序,webview之間的通訊

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