目标：

  • IPC 是什么意思？
  • 为何需要 IPC？
  • Electron 将主进程和渲染进程分开有什么好处？

IPC 通信是什么？

在 Electron 中，IPC（Inter-Process Communication）进程间通信是一种机制，它允许主进程（Main Process）和渲染进程（Renderer Process）互相发送和接收消息，以实现信息交换和协同工作。

为什么需要 IPC 通信？

因为主进程和渲染进程有各自的职责和权限，IPC 允许这两种进程进行信息交换和协同工作，以实现应用的完整功能。

  • 有些事儿，主进程能做，但是渲染进程不能做
  • 有些事儿，主进程不能做，但是渲染进程能做

为什么 Electron 要将主进程和渲染进程分开呢？

From 极客时间

因为这么设计，可以保证每个浏览器窗口（渲染进程、页面）的独立性和稳定性，同时也有利于提高应用程序的安全性（因为 只有主进程才能访问系统级别的资源和操作）。

Electron 架构中主进程对系统级别的资源和操作的独特访问权限主要是出于安全和稳定性的考虑：

  1. 安全性：限制对系统级别资源和操作的访问可以防止恶意代码或者攻击对系统级别资源造成破坏。例如，如果一个 Electron 应用的渲染进程被某种形式的恶意代码利用，那么该恶意代码的破坏范围将被限制在该渲染进程内，而无法直接对系统级资源造成更大的影响。
  2. 稳定性：将系统级操作限制在主进程中，可以防止渲染进程由于运行错误或者崩溃而影响到系统级别的操作。例如，如果一个渲染进程因为某种原因崩溃了，那么主进程和其他渲染进程可以继续运行，应用程序的其他部分不会受到影响。

实现 Electron 中的 IPC 通信

参考资料：

IPC 模式 1：渲染进程到主进程（单向）

  • 了解 ipcRenderer.send、ipcMain.on 方法
  • 掌握 ipcRenderer.invoke、ipcMain.handle 方法

开始介绍的是 👉🏻 ipcRenderer.send，它出现得更早，是一种比较传统的用于实现 Electron 中进程间通信的方式。

重点掌握好 👉🏻 ipcRenderer.invoke，实际开发中主要使用的是新版的 ipcRenderer.invoke API 来实现进程间通信的。

（1）ipcRenderer.send

本节介绍的 ipcRenderer.send，它出现得更早，是一种比较传统的用于实现 Electron 中进程间通信的方式。并不是很重要，实际开发中用得相对较少，不过我们还是有必要了解一下这种通信方式，起码要能够读懂程序。

源码 👉🏻 codes.zip

目标：掌握使用 ipcRenderer.send、ipcMain.on 实现从渲染进程到主进程的单向通信

electron 进程间的 IPC 通信 - 图2

  1. {
  2.   "name": "0000",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1",
  8.     "start": "electron ."
  9.   },
  10.   "keywords": [],
  11.   "author": "",
  12.   "license": "ISC",
  13.   "dependencies": {
  14.     "electron": "^24.3.1"
  15.   }
  16. }

"start": "electron ."
简单配置一下启动命令，以便后续启动 electron 应用程序

"electron": "^24.3.1"
image.png 当前时间安装的默认最新版 Electro 是 v24

  1. const {app, BrowserWindow, ipcMain} = require('electron')
  3. let win
  4. function createWindow() {
  5.   win = new BrowserWindow({
  6.     webPreferences: {
  7.       nodeIntegration: true,
  8.       contextIsolation: false
  9.     }
  10.   })
  12.   win.webContents.openDevTools()
  14.   win.loadFile("./index.html")
  15. }
  17. function handleIPC() {
  18.   ipcMain.on('event1', (event, ...args) => {
  19.     console.log('receive message from renderer process', ...args)
  20.   })
  21. }
  23. app.on('ready', () => {
  24.   createWindow()
  25.   handleIPC()
  26. })

这段代码主要包含了使用 Electron 创建一个新的浏览器窗口并处理来自渲染进程的 IPC 事件的过程：

  1. const {app, BrowserWindow, ipcMain} = require('electron')：这行代码首先引入了 Electron 模块，并解构了其中的 app、BrowserWindow 和 ipcMain 对象。
  2. let win：声明一个 win 变量，这个变量将用于保存创建的浏览器窗口实例。
  3. function createWindow() {...}：这是一个创建新窗口的函数。
    • win = new BrowserWindow({ webPreferences: { nodeIntegration: true, contextIsolation: false }})：创建一个新的 BrowserWindow 实例，设置 nodeIntegration 为 true，使得在渲染进程中可以使用 Node.js 的 API；contextIsolation 设置为 false，表示主进程和渲染进程共享同一个全局上下文。
    • win.webContents.openDevTools()：打开开发者工具。
    • win.loadFile("./index.html")：加载指定的 HTML 文件作为窗口的内容。
  4. function handleIPC() {...}：这是一个处理 IPC 事件的函数。
    • ipcMain.on('event1', (event, ...args) => {...})：使用 ipcMain 对象监听 event1 事件，当这个事件被触发时，输出从渲染进程接收到的消息。
  5. app.on('ready', () => {...})：当 Electron 完成初始化时，调用 createWindow 和 handleIPC 函数，创建新的窗口并开始处理 IPC 事件。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>230519</title>
  8. </head>
  9. <body>
  10.   <h1>renderer process</h1>
  11.   <button id="btn">ipcRenderer.send('event1', 1, 2, 3)</button>
  12.   <script>
  13.     const { ipcRenderer } = require('electron')
  14.     document.getElementById('btn').addEventListener('click', () => {
  15.       console.log('123')
  16.       ipcRenderer.send('event1', 1, 2, 3)
  17.     })
  18.   </script>
  19. </body>
  20. </html>

这是一个简单的 HTML 页面，其中包含了一个标题（h1）和一个按钮（button）。这个 HTML 页面主要用于在 Electron 渲染进程中运行。

在页面的 <script> 标签中，有以下操作：

  1. const { ipcRenderer } = require('electron')：这行代码首先引入了 Electron 模块，并解构出其中的 ipcRenderer 对象。ipcRenderer 是 Electron 提供的一个模块，它用于在渲染进程（即 Web 页面）中发送同步或异步消息给主进程，或者接收主进程的响应。
  2. document.getElementById('btn').addEventListener('click', () => {...})：这行代码给页面上 id 为 ‘btn’ 的按钮元素添加了一个点击事件监听器。当用户点击这个按钮时，就会执行该事件监听器中的回调函数。
  3. console.log('123')：在回调函数中，首先会输出 ‘123’ 到控制台。
  4. ipcRenderer.send('event1', 1, 2, 3)：然后使用 ipcRenderer 的 send 方法向主进程发送一个名为 ‘event1’ 的消息，并传递了几个参数（1, 2, 3）。主进程可以监听这个事件，并在事件触发时获取这些参数。

总的来说，这个 HTML 页面主要是用来体验 Electron 中渲染进程和主进程之间的通信的。用户点击按钮后，渲染进程会向主进程发送一个 ‘event1’ 事件，主进程在收到这个事件后，可以进行相应的处理。

（2）ipcRenderer.invoke

基于上节的 demo 做了些许细微的修改，使用 ipcRenderer.invoke 实现单向的从渲染进程到主进程之间的单向 IPC 通信。ipcRenderer.invoke 是新版的 API，是比较重要的内容，目前大部分 Electron 应用中的 IPC 通信，都是使用它来实现的，并且官方也推荐我们使用新版的 API，尽量放弃旧版的 API。

源码：codes.zip

目标：掌握使用 ipcRenderer.send、ipcMain.on 实现从渲染进程到主进程的单向通信

electron 进程间的 IPC 通信 - 图4

  1. const {
  2.   app,
  3.   BrowserWindow,
  4.   ipcMain
  5. } = require('electron')
  7. let win
  9. function createWindow() {
  10.   win = new BrowserWindow({
  11.     webPreferences: {
  12.       nodeIntegration: true,
  13.       contextIsolation: false
  14.     }
  15.   })
  17.   win.webContents.openDevTools()
  19.   win.loadFile("./index.html")
  20. }
  22. const sleep = (duration) => new Promise((resolve) => setTimeout(resolve, duration))
  24. function handleIPC() {
  25.   // ipcMain.on('event1', async (event, ...args) => {
  26.   //   await sleep(3000)
  27.   //   console.log('receive message from renderer process', ...args)
  28.   // })
  30.   ipcMain.handle('event1', async (event, ...args) => {
  31.     await sleep(3000)
  32.     console.log('receive message from renderer process', ...args)
  33.   })
  34. }
  36. app.on('ready', () => {
  37.   createWindow()
  38.   handleIPC()
  39. })
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>230519</title>
  8.   <style>
  9.     button {
  10.       font-size: 3rem;
  11.     }
  12.   </style>
  13. </head>
  14. <body>
  15.   <h1>renderer process</h1>
  16.   <button id="btn">ipcRenderer.send('event1', 1, 2, 3)</button>
  17.   <script>
  18.     const { ipcRenderer } = require('electron')
  19.     // document.getElementById('btn').addEventListener('click', () => {
  20.     //   console.log('123')
  21.     //   ipcRenderer.send('event1', 1, 2, 3)
  22.     //   console.log('after call send')
  23.     // })
  25.     btn.onclick = () => {
  26.       console.log('btn clicked')
  27.       ipcRenderer.invoke('event1', 1, 2, 3)
  28.       console.log('after call invoke')
  29.     }
  30.   </script>
  31. </body>
  32. </html>

IPC 模式 2：渲染进程到主进程（双向）

  • 理解在通信时，同步、异步之间的差异，同步的 ipcRenderer.sendSync 会导致渲染进程直接阻塞
  • 认识 ipcRender.send、ipcRendere.sendSync、ipcRenderer.sendSync 之间的一些差异
  • 掌握好使用 ipcRenderer.invoke、ipcMain.handle 实现渲染进程和主进程之间的双向通信

（1）ipcRenderer.send

源码：

codes.zip

electron 进程间的 IPC 通信 - 图5

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>230521</title>
  8.   <style>
  9.     button {
  10.       font-size: 3rem;
  11.     }
  12.   </style>
  13. </head>
  14. <body>
  15.   <h1>renderer process</h1>
  16.   <button id="btn">send</button>
  17.   <script>
  18.     const { ipcRenderer } = require('electron')
  20.     btn.onclick = () => {
  21.       ipcRenderer.send('message-from-renderer', 1, 2, 3)
  22.     }
  24.     ipcRenderer.on('message-from-main', (_, res) => {
  25.       console.log('receive message from main process', res)
  26.     })
  27.   </script>
  28. </body>
  29. </html>
  1. const {app, BrowserWindow, ipcMain} = require('electron')
  3. let win
  4. function createWindow() {
  5.   win = new BrowserWindow({
  6.     webPreferences: {
  7.       nodeIntegration: true,
  8.       contextIsolation: false
  9.     }
  10.   })
  12.   win.webContents.openDevTools()
  14.   win.loadFile("./index.html")
  15. }
  17. function handleIPC() {
  18.   ipcMain.on('message-from-renderer', (event, ...args) => {
  19.     console.log('receive message from renderer process', ...args)
  21.     const sum = args.reduce((a, b) => a + b, 0)
  23.     // win.webContents.send('message-from-main', sum)
  24.     // event.sender.send('message-from-main', sum)
  26.     // console.log('win.webContents === event.sender', win.webContents === event.sender)
  28.     event.reply('message-from-main', sum)
  29.   })
  30. }
  32. app.on('ready', () => {
  33.   createWindow()
  34.   handleIPC()
  35. })
  1. {
  2.   "name": "0000",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1",
  8.     "start": "electron ."
  9.   },
  10.   "keywords": [],
  11.   "author": "",
  12.   "license": "ISC",
  13.   "dependencies": {
  14.     "electron": "^24.3.1"
  15.   }
  16. }

package.json 的内容都是一样的，后续保持不变

（2）ipcRenderer.sendSync

electron 进程间的 IPC 通信 - 图6

  1. const {app, BrowserWindow, ipcMain} = require('electron')
  3. let win
  4. function createWindow() {
  5.   win = new BrowserWindow({
  6.     webPreferences: {
  7.       nodeIntegration: true,
  8.       contextIsolation: false
  9.     }
  10.   })
  12.   win.webContents.openDevTools()
  14.   win.loadFile("./index.html")
  15. }
  17. const sleep = (duration) => new Promise((resolve) => setTimeout(resolve, duration))
  19. function handleIPC() {
  20.   ipcMain.on('send-message', async (event, ...args) => {
  22.     await sleep(3000)
  24.     console.log('主进程收到了来自渲染进程的 ipcRenderer.send 方法发送的消息', ...args)
  26.     const sum = args.reduce((a, b) => a + b, 0)
  28.     event.reply('message-from-main', sum)
  29.   })
  31.   ipcMain.on('sendSync-message', async (event, ...args) => {
  33.     await sleep(3000)
  35.     console.log('主进程收到了来自渲染进程的 ipcRenderer.sendSync 方法发送的消息', ...args)
  37.     const sum = args.reduce((a, b) => a + b, 0)
  39.     event.returnValue = sum
  40.   })
  41. }
  43. app.on('ready', () => {
  44.   createWindow()
  45.   handleIPC()
  46. })
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>230521</title>
  9.   <style>
  10.     button {
  11.       font-size: 3rem;
  12.     }
  13.   </style>
  14. </head>
  16. <body>
  17.   <h1>renderer process</h1>
  18.   <button id="btn1">send</button>
  19.   <button id="btn2">sendSync</button>
  20.   <script>
  21.     const {
  22.       ipcRenderer
  23.     } = require('electron')
  25.     btn1.onclick = () => {
  26.       const res = ipcRenderer.send('send-message', 1, 2, 3)
  27.       console.log('ipcRenderer.send 方法收到的返回结果：', res)
  28.     }
  30.     btn2.onclick = () => {
  31.       const res = ipcRenderer.sendSync('sendSync-message', 1, 2, 3)
  32.       console.log('收到了主进程的消息 event.returnValue:', res)
  33.     }
  35.     ipcRenderer.on('message-from-main', (_, res) => {
  36.       console.log('receive message from main process', res)
  37.     })
  38.   </script>
  39. </body>
  41. </html>

对比 send 和 sendSync：

ipcRenderer.send 和 ipcRenderer.sendSync 都是 Electron 的 ipcRenderer 模块中用于发送消息到主进程的方法。但是它们在发送消息的方式上有一些差异：

同步 vs 异步：

ipcRenderer.send 是一个 异步 方法，它会 立即返回，不会阻塞渲染进程。
当主进程接收到消息并处理完后，如果需要回复消息，主进程会再发送一个消息给渲染进程，渲染进程需要另外设置监听来接收。
ipcRenderer.sendSync 是一个 同步 方法，它会 阻塞渲染进程，等待主进程接收消息并返回结果。当这个方法返回时，返回的就是主进程处理的结果。
在主进程返回结果之前，渲染进程将始终处于阻塞状态。

由于 ipcRenderer.send 是非阻塞的，所以在性能上通常优于 ipcRenderer.sendSync。因为 ipcRenderer.sendSync 会阻塞渲染进程，直到主进程返回结果，这可能会导致渲染进程界面的暂停或卡顿，影响用户体验。

⚠️ 阻塞 JavaScript 的执行线程是非常危险的

因为 JavaScript 本身就是单线程运行，一旦某个方法阻塞了这个仅有的线程，JavaScript 的运行就停滞了，只能等这个方法退出。假设此时预期需要有一个 setTimeout 事件或 setInterval 事件被执行，那么此预期也落空了。这可能使我们的业务处于不可知的异常中。

JavaScript 语言本身以“异步编程”著称，因此 我们应该尽量避免用它的同步方法和长耗时方法，避免造成执行线程阻塞。

PS：remote 模块不推荐使用的原因之一就是因为它底层的执行逻辑是同步的，玩不好很可能导致程序卡死。

返回值：

ipcRenderer.send 的返回值是 undefined，因为它只是发送消息，不关心主进程是否有返回结果。
ipcRenderer.sendSync 的返回值是主进程处理结果，因为它会等待主进程处理完消息并返回结果。

小结：

如果我们的应用对性能有较高要求，或者不需要即刻得到主进程处理的结果，那么应优先使用 ipcRenderer.send
如果我们的应用需要即刻得到主进程处理的结果，并且对可能的性能影响可以接受，那么可以使用 ipcRenderer.sendSync

⚠️ 官方建议

如果我们开发的应用所使用的 Electron 的版本高于 v7，那么推荐使用新版的 API ipcRenderer.invoke 来实现渲染进程到主进程之间的通信。放弃使用传统的 ipcRenderer.send、ipcRenderer.sendSync

image.png

（3）ipcRenderer.invoke

electron 进程间的 IPC 通信 - 图8

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>230521</title>
  9.   <style>
  10.     button {
  11.       font-size: 3rem;
  12.     }
  13.   </style>
  14. </head>
  16. <body>
  17.   <h1>renderer process</h1>
  18.   <button id="btn1">请求</button>
  19.   <button id="btn2">请求 + 响应</button>
  20.   <script>
  21.     const {
  22.       ipcRenderer
  23.     } = require('electron')
  25.     // 单向（请求）
  26.     btn1.onclick = () => {
  27.       ipcRenderer.invoke('invoke-message1', 1, 2, 3)
  28.     }
  30.     // 双向（请求 + 响应）
  31.     btn2.onclick = async () => {
  32.       const res = await ipcRenderer.invoke('invoke-message2', 4, 5, 6)
  33.       console.log('ipcRenderer.invoke 方法收到的返回结果：', res)
  34.     }
  35.   </script>
  36. </body>
  38. </html>
  1. const {app, BrowserWindow, ipcMain} = require('electron')
  3. let win
  4. function createWindow() {
  5.   win = new BrowserWindow({
  6.     webPreferences: {
  7.       nodeIntegration: true,
  8.       contextIsolation: false
  9.     }
  10.   })
  12.   win.webContents.openDevTools()
  14.   win.loadFile("./index.html")
  15. }
  17. function handleIPC() {
  18.   ipcMain.handle('invoke-message1', (_, ...args) => {
  20.     console.log('invoke-message1', ...args)
  22.     // ...
  23.   })
  25.   ipcMain.handle('invoke-message2', (_, ...args) => {
  26.     console.log('invoke-message2', ...args)
  27.     // ...
  28.     return args.reduce((a, b) => a + b, 0)
  29.   })
  30. }
  32. app.on('ready', () => {
  33.   createWindow()
  34.   handleIPC()
  35. })

对比 invoke 和 send：

invoke 更简洁，仅需要一个事件即可完成通信：

在渲染进程中，通过 ipcRenderer.invoke 将请求发送给主进程，在主进程的 ipcMain.handle 中，将处理完的结果直接 return 即可返回给我们的渲染进程。

send 更麻烦，因为需要绑定俩事件：

  • 事件 1：渲染进程发起请求，主进程接收请求
  • 事件 2：主进程发起响应，渲染进程接收响应

IPC 模式 3：主进程到渲染进程

🤔 主进程向渲染进程发消息，是向页面发吗？

答：并不是，而是向具体的 BrowserWindow 实例发，具体得看这个实例加载的是哪个页面。所以说，如果一个页面被多个实例都引用了，只有对应的实例才能收到消息，虽然它们都是同一个页面。

IPC 模式 4：渲染进程到渲染进程

  1. const {
  2.   app,
  3.   BrowserWindow,
  4.   ipcMain
  5. } = require('electron')
  6. const {
  7.   v4: uuidv4
  8. } = require('uuid')
  10. let win1, win2
  12. function createWin() {
  13.   win1 = new BrowserWindow({
  14.     webPreferences: {
  15.       nodeIntegration: true,
  16.       contextIsolation: false
  17.     }
  18.   })
  20.   win2 = new BrowserWindow({
  21.     webPreferences: {
  22.       nodeIntegration: true,
  23.       contextIsolation: false
  24.     }
  25.   })
  27.   win1.webContents.openDevTools()
  28.   win2.webContents.openDevTools()
  30.   win1.loadFile('./index1.html')
  31.   win2.loadFile('./index2.html')
  32. }
  34. function handleIPC() {
  35.   const promises = new Map()
  37.   ipcMain.on('message-from-renderer2', (event, {
  38.     id,
  39.     result
  40.   }) => {
  41.     const {
  42.       resolve
  43.     } = promises.get(id)
  44.     promises.delete(id)
  46.     resolve(result)
  47.   })
  49.   ipcMain.handle('message-from-renderer1', async (event, ...args) => {
  50.     console.log('main process received message from renderer1 with args:', args)
  51.     return await sendRequestToRenderer2(...args)
  52.   })
  54.   function sendRequestToRenderer2(...args) {
  55.     return new Promise((resolve, reject) => {
  56.       const id = uuidv4()
  58.       promises.set(id, {
  59.         resolve,
  60.         reject
  61.       })
  63.       win2.webContents.send('message-to-renderer2', id,
  64.       ...args)
  65.     })
  66.   }
  67. }
  69. app.whenReady().then(() => {
  70.   console.log('app ready')
  72.   createWin()
  73.   handleIPC()
  74. })
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>renderer1</title>
  8. </head>
  9. <body>
  10.   <h1>renderer1</h1>
  11.   <script>
  12.     // import { ipcRenderer } from "electron"
  13.     const { ipcRenderer } = require('electron');
  15.     (async () => {
  16.       console.log('1 + 2 =', await ipcRenderer.invoke('message-from-renderer1', 1, 2))
  17.       console.log('1 + 2 + 3 =', await ipcRenderer.invoke('message-from-renderer1', 1, 2, 3))
  18.       console.log('1 + 2 + 3 + 4 =', await ipcRenderer.invoke('message-from-renderer1', 1, 2, 3, 4))
  19.     })()
  20.   </script>
  21. </body>
  22. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>renderer2</title>
  8. </head>
  9. <body>
  10.   <h1>renderer2</h1>
  11.   <script>
  12.     const { ipcRenderer } = require('electron')
  14.     const sleep = async (duration) => {
  15.       return new Promise(resolve => setTimeout(() => {
  16.         resolve()
  17.       }, duration))
  18.     }
  20.     ipcRenderer.on('message-to-renderer2', async (event, id, ...args) => {
  21.       console.log('message-to-renderer2', id, ...args)
  23.       await sleep(args.length * 1000)
  25.       ipcRenderer.send('message-from-renderer2', { id, result: args.reduce((a, b) => a + b, 0) })
  26.     })
  27.   </script>
  28. </body>
  29. </html>

渲染进程之间互相通信的方式：

  • 方式1：主进程作为中转站，渲染进程1给主进程发消息，主进程接收到消息后，主进程再给渲染进程2发消息；（2 次通信）

electron 进程间的 IPC 通信 - 图9

  • 方式2：主进程不做转发操作，仅提供对应渲染进程的 id，渲染进程1给主进程发消息，主进程接收到消息后，将需要和渲染进程1通信的其它渲染进程的id给返回，渲染进程1接收到主进程返回的其它渲染进程的id之后，由渲染进程1来发送消息；（3 次通信）

electron 进程间的 IPC 通信 - 图10

demo 渲染进程相互通信

  1. const { ipcMain, app, BrowserWindow } = require('electron')
  3. let win1, win2
  5. app.on('ready', () => {
  6.   createWindows()
  7.   handleIPC()
  8.   hanldeWinClosed()
  9. })
  11. app.on('window-all-closed', () => app.quit())
  13. function createWindows() {
  14.   win1 = new BrowserWindow({
  15.     webPreferences: {
  16.       nodeIntegration: true,
  17.       contextIsolation: false
  18.     }
  19.   })
  20.   win1.loadFile('./index1.html')
  21.   win1.webContents.openDevTools()
  23.   win2 = new BrowserWindow({
  24.     y: 0,
  25.     x: 0,
  26.     webPreferences: {
  27.       nodeIntegration: true,
  28.       contextIsolation: false
  29.     }
  30.   })
  31.   win2.loadFile('./index2.html')
  32.   win2.webContents.openDevTools()
  33. }
  35. function handleIPC() {
  36.   // 写法1
  37.   // ipcMain.handle('getWin2ID', async () => {
  38.   //   const res = await new Promise(resolve => resolve(win2.webContents.id))
  39.   //   return res
  40.   // })
  42.   // 写法2（如果仅仅是获取一个值的话，这种写法更简洁）
  43.   ipcMain.handle('getWin1ID', async () => win1.webContents.id)
  44. }
  46. function hanldeWinClosed() {
  47.   win1.on('closed', () => win1 = null)
  48.   win2.on('closed', () => win2 = null)
  49. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>3.4.3 渲染进程之间消息传递</title>
  9. </head>
  11. <body>
  12.   <h1>窗口1</h1>
  13.   <button id="btn">给窗口2发送消息</button>
  15.   <script>
  16.     const {
  17.       ipcRenderer
  18.     } = require('electron')
  19.     document.getElementById('btn').addEventListener('click', async () => {
  20.       const win2ID = await ipcRenderer.invoke('getWin2ID')
  21.       console.log('获取到窗口2的id：', win2ID, '并给它发送消息')
  22.       ipcRenderer.sendTo(win2ID, 'index1_to_index2', 1, 2)
  23.     })
  24.     ipcRenderer.on('index2_to_index1', (e, a, b) => {
  25.       console.log('窗口1 收到了 窗口2 发送来的消息')
  26.       console.log('发送者「窗口2」的 id 为：', e.senderId)
  27.       console.log('参数为：', a, b)
  28.     })
  29.   </script>
  30. </body>
  32. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>3.4.3 渲染进程之间消息传递</title>
  9.   </head>
  11.   <body>
  12.     <h1>窗口2</h1>
  13.     <button id="btn">给窗口1发送消息</button>
  15.     <script>
  16.       const {
  17.         ipcRenderer
  18.       } = require('electron')
  19.       document.getElementById('btn').addEventListener('click', async () => {
  20.         const win1ID = await ipcRenderer.invoke('getWin1ID')
  21.         console.log('获取到窗口1的id：', win1ID, '并给它发送消息')
  22.         ipcRenderer.sendTo(win1ID, 'index2_to_index1', 3, 4)
  23.       })
  24.       ipcRenderer.on('index1_to_index2', (e, a, b) => {
  25.         console.log('窗口2 收到了 窗口1 发送来的消息')
  26.         console.log('发送者「窗口1」的 id 为：', e.senderId)
  27.         console.log('参数为：', a, b)
  28.       })
  29.     </script>
  30.   </body>
  32. </html>

:::warning 注意：
在发送消息之前，应该先确保打开了 win1、win2 窗口 :::