<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>renderer2</title>
  </head>
  <body>
    <h1>renderer2</h1>
    <script src="renderer2.js"></script>
  </body>
</html>

const { ipcRenderer } = require('electron')

ipcRenderer.on('message-to-renderer2', (event, ...args) => {
  console.log('message-to-renderer2', ...args)
  ipcRenderer.send(
    'message-from-renderer2',
    args.reduce((a, b) => a + b, 0),
  )
})

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>renderer1</title>
  </head>
  <body>
    <h1>renderer1</h1>

    <!-- <script src="renderer1.1.js"></script> -->

    <!-- 错误测试用例示范 -->
    <script src="renderer1.2.js"></script>
  </body>
</html>

const { ipcRenderer } = require('electron')

async function test() {
  console.log(
    '1 + 2 =',
    await ipcRenderer.invoke('message-from-renderer1', 1, 2),
  )
}

test() // => 1 + 2 = 3

const { app, BrowserWindow, ipcMain } = require('electron')
const { v4: uuidv4 } = require('uuid')

let win1, win2

function createWin() {
  win1 = new BrowserWindow({
    webPreferences: { nodeIntegration: true, contextIsolation: false },
  })
  win2 = new BrowserWindow({
    webPreferences: { nodeIntegration: true, contextIsolation: false },
  })

  win1.webContents.openDevTools()
  win2.webContents.openDevTools()

  win1.loadFile('./index1.html')
  win2.loadFile('./index2.html')
}

function handleIPC() {
  const promises = new Map()

  ipcMain.on('message-from-renderer2', (_, { id, result }) => {
    const { resolve } = promises.get(id) // [!code highlight]
    promises.delete(id) // [!code highlight]

    resolve(result) // [!code highlight]
  })

  ipcMain.handle('message-from-renderer1', async (_, ...args) => {
    console.log('main process received message from renderer1 with args:', args)
    return await sendRequestToRenderer2(...args)
  })

  function sendRequestToRenderer2(...args) {
    return new Promise((resolve, reject) => {
      const id = uuidv4()

      promises.set(id, { resolve, reject }) // [!code highlight]

      // 主进程在转发的时候，给每个转发的任务加上 id。
      win2.webContents.send('message-to-renderer2', id, ...args) // [!code highlight]
    })
  }
}

app.whenReady().then(() => {
  createWin()
  handleIPC()
})

const { ipcRenderer } = require('electron')

async function test1() {
  console.log(
    '1 + 2 =',
    await ipcRenderer.invoke('message-from-renderer1', 1, 2),
  )
}

async function test2() {
  console.log(
    '1 + 2 + 3 =',
    await ipcRenderer.invoke('message-from-renderer1', 1, 2, 3),
  )
}

test1() // => 1 + 2 = 3
test2() // => 1 + 2 + 3 = 6

const { ipcRenderer } = require('electron')

ipcRenderer.on('message-to-renderer2', async (event, id, ...args) => {
  console.log('message-to-renderer2', id, ...args)

  const result = args.reduce((a, b) => a + b, 0)

  // 渲染进程处理任务的时候，会收到主进程传递过来的对应任务 id，任务处理完之后，再将 id 一并携带上，丢给主进程。
  ipcRenderer.send('message-from-renderer2', { id, result }) // [!code highlight]
})