8. Electron 进程间通信_Electron 入门教程

Electron为我们提供了2个IPC（进程间通信）模块，称为ipcMain和ipcRenderer 。

ipcMain 模块用于从主进程异步通信到渲染器进程。在主进程中使用时，模块处理从渲染器进程（网页）发送的异步和同步消息。从渲染器发送的消息将发送到此模块。

ipcRenderer 模块用于从呈现器进程异步通信到主进程。它提供了一些方法，因此您可以将同步和异步消息从渲染器进程（网页）发送到主进程。您还可以收到主流程的回复。

我们将创建一个主进程和一个渲染器进程，它将使用上述模块发送彼此的消息。

使用以下内容创建名为main_process.js 的新文件：

const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')
const {ipcMain} = require('electron')
let win
function createWindow() {
   win = new BrowserWindow({width: 800, height: 600})
   win.loadURL(url.format ({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
   }))
}
// Event handler for asynchronous incoming messages
ipcMain.on('asynchronous-message', (event, arg) => {
   console.log(arg)
   // Event emitter for sending asynchronous messages
   event.sender.send('asynchronous-reply', 'async pong')
})
// Event handler for synchronous incoming messages
ipcMain.on('synchronous-message', (event, arg) => {
   console.log(arg) 
   // Synchronous event emmision
   event.returnValue = 'sync pong'
})
app.on('ready', createWindow)

现在创建一个新的index.html 文件并在其中添加以下代码。

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>Hello World!</title>
   </head>
   <body>
      <script>
         const {ipcRenderer} = require('electron')
         // Synchronous message emmiter and handler
         console.log(ipcRenderer.sendSync('synchronous-message', 'sync ping')) 
         // Async message handler
         ipcRenderer.on('asynchronous-reply', (event, arg) => {
            console.log(arg)
         })
         // Async message sender
         ipcRenderer.send('asynchronous-message', 'async ping')
      </script>
   </body>
</html>

使用以下命令运行应用程序：

$ electron ./main_process.js

上面的命令将生成以下输出：

// On your app console
Sync Pong
Async Pong
// On your terminal where you ran the app
Sync Ping
Async Ping

建议不要在渲染器进程上执行重/阻塞任务的计算。始终使用IPC将这些任务委派给主进程。这有助于保持应用程序的节奏。

下一节：任何应用程序都是一个用户友好的非常重要。因此，您不应使用alert() 调用创建对话框。 Electron提供了一个非常好的界面来完成创建对话框的任务。我们来看看吧。