最近在开发一个小工具,需要将主进程处理的结果发送给渲染进程让用户可以实时看到进度。
node环境版本
v16.20.0
electron版本
"electron": "^21.4.4",
效果截图
动态效果
在 Electron 中,你可以使用主进程的 ipcMain
模块与渲染进程的 ipcRenderer
模块来实现主进程向渲染进程发送信息。以下是一个如何实现这一功能的示例:
1. 在主进程中设置监听和发送消息
首先,你需要在主进程中设置监听,以便在接收到特定的事件后向渲染进程发送消息。
const { ipcMain, BrowserWindow } = require('electron');
ipcMain.on('request-data', (event, args) => {
// 你的逻辑代码,例如获取数据
const dataToSend = 'Hello from main process!';
// 获取所有窗口或特定窗口
const windows = BrowserWindow.getAllWindows();
windows.forEach(win => {
win.webContents.send('data-response', dataToSend);
});
});
以上代码监听名为 'request-data'
的事件,并在该事件被触发时向所有打开的窗口发送名为 'data-response'
的消息。
2. 在预加载脚本中暴露方法
你可以在预加载脚本中暴露一个方法,使渲染进程能够触发上述的 'request-data'
事件。
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electron', {
requestData: () => {
ipcRenderer.send('request-data');
}
});
ipcRenderer.on('data-response', (event, data) => {
// 在此处处理从主进程接收的数据
console.log(data); // 输出:Hello from main process!
});
3. 在渲染进程中调用方法
最后,在渲染进程的 JavaScript 文件中,你可以调用暴露的 requestData
方法来触发主进程的监听,并通过预加载脚本中的 ipcRenderer.on
来接收数据。
function fetchData() {
window.electron.requestData();
}
通过以上步骤,你可以实现主进程主动向渲染进程发送信息,并在渲染进程中处理这些信息。这一功能在构建复杂的 Electron 应用程序时非常有用,允许不同的进程之间进行协作和通信。
相关项目
实例代码下载
项目运行环境v16.20.0