Electron: 渲染器进程到主进程（双向）

双向IPC的一个常见应用：从渲染器进程代码调用主进程模块并等待结果
【ipcRenderer.invoke】《==============》【ipcMain.handle()】

main.js

 const { app, BrowserWindow, ipcMain, dialog } = require('electron/main')
const path = require('node:path')
 
async function handleFileOpen () {
  const { canceled, filePaths } = await dialog.showOpenDialog()
  if (!canceled) {
    return filePaths[0]
  }
}
 
function createWindow () {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  mainWindow.loadFile('index.html')
}
 
app.whenReady().then(() => {
 
  // 🥑 ipcMain.handle监听事件
  // 创建handleFileOpen()函数，调用dialog.showOpenDialog并返回用户选择的文件路径之
  // 当渲染器进程通过dialog:openFile通道发送ipcRender.invoke消息时，此函数被用作一个回调
  // 返回值将作为一个Promise返回到最初的invoke调用
  // 🔺IPC 通道名称上的 dialog: 前缀对代码没有影响。 它仅用作命名空间以帮助提高代码的可读性。
  ipcMain.handle('dialog:openFile', handleFileOpen)
  createWindow()
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
 
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

preload.js

 const { contextBridge, ipcRenderer } = require('electron/renderer')
 
// 🥑 通过预加载脚本暴露ipcRenderer.invoke
// 预加载脚本中暴露一个单行的openFile函数，调用并返回ipcRenderer.invoke('dialog:openFile')的值
contextBridge.exposeInMainWorld('electronAPI', {
// 🔺 不会直接暴露整个ipcRenderer.invoke
  openFile: () => ipcRenderer.invoke('dialog:openFile')
})

renderer.js

 const btn = document.getElementById('btn')
const filePathElement = document.getElementById('filePath')
 
btn.addEventListener('click', async () => {
   // window.electronAPI.openFile() API来激活原生的打开文件对话框
  const filePath = await window.electronAPI.openFile()
  filePathElement.innerText = filePath
})

index.html

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Dialog</title>
  </head>
  <body>
    // 构建渲染器进程UI 
    <button type="button" id="btn">Open a File</button>
    File path: <strong id="filePath"></strong>
    <script src='./renderer.js'></script>
  </body>
</html>

使用ipcRenderer.sendSync API向主进程发送消息并同步等待响应

 * main.js(Main Process)
 
ipcMain.on('synchronous-message', (event, arg) => {
  console.log(arg) // 在Node控制台中打印"ping"
  event.returnValue = 'pong'
})
 
* preload.js(Preload Script)
const { ipcRenderer } = require('electron')
const result = ipcRenderer.sendSync('synchronous-message', 'ping')
console.log(result)

posted @ 2024-11-04 18:14 Felix_Openmind 阅读(71) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Electron：渲染器进程到主进程（单向）

· Electron: 主进程到渲染器进程

· electron主进程与渲染进程通讯

· 20、electron 主进程与渲染进程之间的通讯ipcMain

· electron | ipc通信

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）

历史上的今天：
2020-11-04 Linux下的Tomcat安装
2020-11-04 Linux下的Java安装
2020-11-04 Linux下的MySQL安装+相关配置

2025年3月

日

一

二

三

四

五

六

Felix_Openmind

https://github.com/serendipitywzz

Electron: 渲染器进程到主进程（双向）

main.js

preload.js

renderer.js

index.html

使用ipcRenderer.sendSync API向主进程发送消息并同步等待响应

最新随笔

随笔分类 (404)

随笔档案 (410)

文章分类 (66)

文章档案 (99)

软件开发

阅读排行榜

	const { app, BrowserWindow, ipcMain, dialog } = require('electron/main')
	const path = require('node:path')

	async function handleFileOpen () {
	const { canceled, filePaths } = await dialog.showOpenDialog()
	if (!canceled) {
	return filePaths[0]
	}
	}

	function createWindow () {
	const mainWindow = new BrowserWindow({
	webPreferences: {
	preload: path.join(__dirname, 'preload.js')
	}
	})
	mainWindow.loadFile('index.html')
	}

	app.whenReady().then(() => {

	// 🥑 ipcMain.handle监听事件
	// 创建handleFileOpen()函数，调用dialog.showOpenDialog并返回用户选择的文件路径之
	// 当渲染器进程通过dialog:openFile通道发送ipcRender.invoke消息时，此函数被用作一个回调
	// 返回值将作为一个Promise返回到最初的invoke调用
	// 🔺IPC 通道名称上的 dialog: 前缀对代码没有影响。它仅用作命名空间以帮助提高代码的可读性。
	ipcMain.handle('dialog:openFile', handleFileOpen)
	createWindow()
	app.on('activate', function () {
	if (BrowserWindow.getAllWindows().length === 0) createWindow()
	})
	})

	app.on('window-all-closed', function () {
	if (process.platform !== 'darwin') app.quit()
	})

	const { contextBridge, ipcRenderer } = require('electron/renderer')

	// 🥑 通过预加载脚本暴露ipcRenderer.invoke
	// 预加载脚本中暴露一个单行的openFile函数，调用并返回ipcRenderer.invoke('dialog:openFile')的值
	contextBridge.exposeInMainWorld('electronAPI', {
	// 🔺 不会直接暴露整个ipcRenderer.invoke
	openFile: () => ipcRenderer.invoke('dialog:openFile')
	})

	const btn = document.getElementById('btn')
	const filePathElement = document.getElementById('filePath')

	btn.addEventListener('click', async () => {
	// window.electronAPI.openFile() API来激活原生的打开文件对话框
	const filePath = await window.electronAPI.openFile()
	filePathElement.innerText = filePath
	})

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
	<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
	<title>Dialog</title>
	</head>
	<body>
	// 构建渲染器进程UI
	<button type="button" id="btn">Open a File</button>
	File path: <strong id="filePath"></strong>
	<script src='./renderer.js'></script>
	</body>
	</html>

	* main.js(Main Process)

	ipcMain.on('synchronous-message', (event, arg) => {
	console.log(arg) // 在Node控制台中打印"ping"
	event.returnValue = 'pong'
	})

	* preload.js(Preload Script)
	const { ipcRenderer } = require('electron')
	const result = ipcRenderer.sendSync('synchronous-message', 'ping')
	console.log(result)