TNotes.electron

Appearance

0035. 使用 ipcRenderer.invoke、ipcMain.handle 实现从渲染进程到主进程的单向 IPC 通信

0035. 使用 ipcRenderer.invoke、ipcMain.handle 实现从渲染进程到主进程的单向 IPC 通信 ​

1. 📝 概述 ​

  • 通过一个简单的 demo 介绍 ipcRenderer.invoke、ipcMain.handle 的基本使用。

2. 💻 demos.1 - 使用 ipcRenderer.invoke、ipcMain.handle 实现从渲染进程到主进程的单向 IPC 通信 ​

js
const { ipcRenderer } = require('electron')
const now = () =>
  new Date().toLocaleTimeString('en-US', {
    hour12: false,
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  })

btn.onclick = async () => {
  console.log(
    now(),
    '按钮被点击了，向主进程发起 message-from-renderer 请求，并传入请求参数 1、2、3'
  )

  await ipcRenderer.invoke('message-from-renderer', 1, 2, 3)

  console.log(now(), 'after call invoke')
}
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')
}

const now = () =>
  new Date().toLocaleTimeString('en-US', {
    hour12: false,
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  })
const sleep = (duration) =>
  new Promise((resolve) => setTimeout(resolve, duration))

function handleIPC() {
  ipcMain.handle('message-from-renderer', async (event, ...args) => {
    console.log(now(), '【ipcMain.handle】触发了……')
    await sleep(3000)
    console.log('主进程收到了来自渲染进程的消息')
    console.log('渲染进程在发送 message-from-renderer 请求时，传递的参数如下：')
    console.log(...args)
    console.log(now(), '【ipcMain.handle】结束了……')
  })
}

app.on('ready', () => {
  createWindow()
  handleIPC()
})
  • 最终效果
    • 渲染进程通过 ipcRenderer.invoke 方法向主进程发送消息，主进程通过 ipcMain.handle 方法监听来自渲染进程的消息。实现从渲染进程到主进程的单向通信。
    • 图 0

Discussions