0038. 使用 send、on 实现主进程和渲染进程之间的双向 IPC 通信

• 📺 bilibili 👉 TNotes 合集
  • bilibili.TNotes.electron.0038.1
• 1. 📝 概述
• 2. 💻 demos.1 - 使用 send、on 实现主进程和渲染进程之间的双向 IPC 通信

1. 📝 概述

• 主进程 <-> 渲染进程
  • 使用 send、on 实现主进程和渲染进程之间的双向 IPC 通信
  • 

2. 💻 demos.1 - 使用 send、on 实现主进程和渲染进程之间的双向 IPC 通信

• 源码实现

renderer.js

const { ipcRenderer } = require('electron')

// 1. 按钮被点击
btn.onclick = () => {
  // 2. 渲染进程主动给主进程发 'message-from-renderer' 消息
  ipcRenderer.send('message-from-renderer', 1, 2, 3)
}

// 3. 渲染进程被动监听来自主进程的 'message-from-main' 消息
ipcRenderer.on('message-from-main', (_, res) => {
  console.log('receive message from main process', res)
})

index.js

const { app, BrowserWindow, ipcMain } = require('electron')

let win
function createWindow() {
  win = new BrowserWindow({
    webPreferences: { nodeIntegration: true, contextIsolation: false },
  })

  win.webContents.openDevTools()

  win.loadFile('./index.html')
}

function handleIPC() {
  // 1. 主进程被动监听来自渲染进程的 'message-from-renderer' 消息
  ipcMain.on('message-from-renderer', (event, ...args) => {
    console.log('receive message from renderer process', ...args)

    // 2. 执行求和功能
    const sum = args.reduce((a, b) => a + b, 0)

    // 3. 主进程处理完相应任务后，给渲染进程响应一个结果，主动给渲染进程发 'message-from-main' 消息。

    // A.
    // win.webContents.send('message-from-main', sum)

    // B.
    // event.sender.send('message-from-main', sum)

    // C.
    event.reply('message-from-main', sum)

    // console.log(win.webContents === event.sender) // true
    // console.log(win.webContents.send === event.sender.send) // true

    // A B C 3 种写法都是等效的，都可以给渲染进程响应一个结果。
  })
}

app.on('ready', () => {
  createWindow()
  handleIPC()
})

• 最终效果
  • 渲染进程通过 ipcRenderer.send 方法给主进程发消息，主进程通过 ipcMain.on 方法监听来自渲染进程的消息。
  • 主进程收到消息之后，通过 win.webContents.send、e.senderer.send、e.replay 其中一个方法给渲染进程回复消息，渲染进程通过 ipcRenderer.on 来接受来自主进程的消息。
  • 
• 主进程日志

receive message from renderer process 1 2 3