使用 Electron 在兩個(gè)進(jìn)程 (主進(jìn)程和渲染進(jìn)程) 之間進(jìn)行通訊

novo 發(fā)布于2019-08-21 16:58 / 3256人閱讀

摘要：使用在兩個(gè)進(jìn)程主進(jìn)程和渲染進(jìn)程之間進(jìn)行通訊此系列文章的應(yīng)用示例已發(fā)布于可以或下載后運(yùn)行查看歡迎通過進(jìn)程間通信模塊允許您在主進(jìn)程和渲染進(jìn)程之間發(fā)送和接收同步和異步消息這個(gè)模塊有一個(gè)版本可用于這兩個(gè)進(jìn)程和在瀏覽器中查看和的完整文檔異步消息

使用 Electron 在兩個(gè)進(jìn)程 (主進(jìn)程和渲染進(jìn)程) 之間進(jìn)行通訊

此系列文章的應(yīng)用示例已發(fā)布于 GitHub: electron-api-demos-Zh_CN. 可以 Clone 或下載后運(yùn)行查看. 歡迎 Star .

通過 ipc（進(jìn)程間通信）模塊允許您在主進(jìn)程和渲染進(jìn)程之間發(fā)送和接收同步和異步消息.

這個(gè)模塊有一個(gè)版本可用于這兩個(gè)進(jìn)程: ipcMain 和 ipcRenderer.

在瀏覽器中查看 main process 和 renderer proces 的完整 API 文檔.

異步消息

支持: Win, macOS, Linux | 進(jìn)程: Both

使用 ipc 以異步方式在進(jìn)程之間發(fā)送消息是首選方法, 因?yàn)樗鼤?huì)在完成時(shí)返回, 而不會(huì)阻止同一進(jìn)程中的其他操作.

此示例將從此進(jìn)程（渲染器）發(fā)送異步消息 "Ping" 到主進(jìn)程, 然后主進(jìn)程回答 "Pong".

渲染器進(jìn)程

const ipc = require("electron").ipcRenderer

const asyncMsgBtn = document.getElementById("async-msg")

asyncMsgBtn.addEventListener("click", function () {
  ipc.send("asynchronous-message", "ping")
})

ipc.on("asynchronous-reply", function (event, arg) {
  const message = `異步消息回復(fù): ${arg}`
  document.getElementById("async-reply").innerHTML = message
})

主進(jìn)程

const ipc = require("electron").ipcMain

ipc.on("asynchronous-message", function (event, arg) {
  event.sender.send("asynchronous-reply", "pong")
})

同步消息

支持: Win, macOS, Linux | 進(jìn)程: Both

您可以使用 ipc 模塊在進(jìn)程之間發(fā)送同步消息. 但請注意, 此方法的同步特性意味著它在完成任務(wù)時(shí)會(huì)阻止其他操作.

此示例將從此進(jìn)程（渲染器）發(fā)送同步消息 "Ping" 到主進(jìn)程, 然后主進(jìn)程回答 "Pong".

渲染器進(jìn)程

const ipc = require("electron").ipcRenderer

const syncMsgBtn = document.getElementById("sync-msg")

syncMsgBtn.addEventListener("click", function () {
  const reply = ipc.sendSync("synchronous-message", "ping")
  const message = `同步消息回復(fù): ${reply}`
  document.getElementById("sync-reply").innerHTML = message
})

主進(jìn)程

const ipc = require("electron").ipcMain

ipc.on("synchronous-message", function (event, arg) {
  event.returnValue = "pong"
})

與隱藏窗口通信

支持: Win, macOS, Linux | 進(jìn)程: Both

通常的做法是創(chuàng)建一個(gè)新的不可見瀏覽器窗口（渲染器進(jìn)程）, 以便在不影響主應(yīng)用程序窗口中的性能的情況下運(yùn)行任務(wù).

在這個(gè)示例中, 我們使用 remote 模塊從這個(gè)渲染器進(jìn)程創(chuàng)建一個(gè)新的不可見的瀏覽器窗口. 當(dāng)新頁面加載時(shí), 我們用 ipc 發(fā)送一個(gè)消息給正在監(jiān)聽的新窗口.

然后新窗口計(jì)算階乘并發(fā)送要由此接收的結(jié)果到原始窗口并添加到上面的頁面中.

渲染器進(jìn)程

const BrowserWindow = require("electron").remote.BrowserWindow
const ipcRenderer = require("electron").ipcRenderer
const path = require("path")

const invisMsgBtn = document.getElementById("invis-msg")
const invisReply = document.getElementById("invis-reply")

invisMsgBtn.addEventListener("click", function (clickEvent) {
  const windowID = BrowserWindow.getFocusedWindow().id
  const invisPath = "file://" + path.join(__dirname, "../../sections/communication/invisible.html")
  let win = new BrowserWindow({ width: 400, height: 400, show: false })
  win.loadURL(invisPath)

  win.webContents.on("did-finish-load", function () {
    const input = 100
    win.webContents.send("compute-factorial", input, windowID)
  })
})

ipcRenderer.on("factorial-computed", function (event, input, output) {
  const message = `${input} 的階乘是 ${output}`
  invisReply.textContent = message
})

隱藏窗口頁面的HTML

如果這邊文章對您有幫助, 感謝下方點(diǎn)贊或 Star GitHub: electron-api-demos-Zh_CN 支持, 謝謝.