使用 Electron 在兩個進程 (主進程和渲染進程) 之間進行通信

時間 2020-01-11

標籤使用 electron 兩個進程渲染之間進行通信简体版

原文原文鏈接

使用 Electron 在兩個進程 (主進程和渲染進程) 之間進行通信

此係列文章的應用示例已發佈於 GitHub: electron-api-demos-Zh_CN. 能夠 Clone 或下載後運行查看. 歡迎 Star .javascript

經過 ipc（進程間通訊）模塊容許您在主進程和渲染進程之間發送和接收同步和異步消息.html

這個模塊有一個版本可用於這兩個進程: ipcMain 和 ipcRenderer.java

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

異步消息

支持: Win, macOS, Linux | 進程: Bothgithub

使用 ipc 以異步方式在進程之間發送消息是首選方法, 由於它會在完成時返回, 而不會阻止同一進程中的其餘操做.web

此示例將今後進程（渲染器）發送異步消息 "Ping" 到主進程, 而後主進程回答 "Pong".api

渲染器進程瀏覽器

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 = `異步消息回覆: ${arg}`
  document.getElementById('async-reply').innerHTML = message
})

主進程併發

const ipc = require('electron').ipcMain

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

同步消息

支持: Win, macOS, Linux | 進程: Both異步

您能夠使用 ipc 模塊在進程之間發送同步消息. 但請注意, 此方法的同步特性意味着它在完成任務時會阻止其餘操做.

此示例將今後進程（渲染器）發送同步消息 "Ping" 到主進程, 而後主進程回答 "Pong".

渲染器進程

const ipc = require('electron').ipcRenderer

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

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

主進程

const ipc = require('electron').ipcMain

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

與隱藏窗口通訊

支持: Win, macOS, Linux | 進程: Both

一般的作法是建立一個新的不可見瀏覽器窗口（渲染器進程）, 以便在不影響主應用程序窗口中的性能的狀況下運行任務.

在這個示例中, 咱們使用 remote 模塊從這個渲染器進程建立一個新的不可見的瀏覽器窗口. 當新頁面加載時, 咱們用 ipc 發送一個消息給正在監聽的新窗口.

而後新窗口計算階乘併發送要由此接收的結果到原始窗口並添加到上面的頁面中.

渲染器進程

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

<html>
  <script type="text/javascript">
    const ipc = require('electron').ipcRenderer
    const BrowserWindow = require('electron').remote.BrowserWindow

    ipc.on('compute-factorial', function (event, number, fromWindowId) {
      const result = factorial(number)
      const fromWindow = BrowserWindow.fromId(fromWindowId)
      fromWindow.webContents.send('factorial-computed', number, result)
      window.close()
    })

    function factorial (num) {
      if (num === 0) return 1
      return num * factorial(num - 1)
    }
  </script>
</html>

若是這邊文章對您有幫助, 感謝下方點贊或 Star GitHub: electron-api-demos-Zh_CN 支持, 謝謝.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。