我们如何在 Electron 中将消息从主进程发送到渲染器进程

Question

我是第一次玩电子。尝试创建文本编辑器

在渲染中，我正在发送一条消息，指示内容已更改并需要保存：

document.getElementById('content').onkeyup = e => {
ipcRenderer.send('SAVE_NEEDED', {
content: e.target.innerHTML,
fileDir
})
}

然后ipcMain收到它没有问题。在菜单上，我有这个：

{
label: 'Save',
click: _ => {
saveFile(message)
// trying:
// ipcMain.send('SAVED', 'File Saved')
},
accelerator: 'cmd+S', // shortcut
}

以便用户知道文件有。但这似乎行不通。还有其他方法可以做到这一点吗？我本以为"保存"将是一个预先创建的角色(有点(

Answer 1

要将消息发送回渲染器，您可以使用：

win.webContents.send('asynchronous-message', {'SAVED': 'File Saved'});

并像这样接收它：

ipcRenderer.on('asynchronous-message', function (evt, message) {
console.log(message); // Returns: {'SAVED': 'File Saved'}
});

asynchronous-message只是您要将其发送到的渠道。从字面上看，它可以是任何东西。

webContents.send文档

Answer 2

或者- 当你想响应从渲染器进程收到的事件时，你可以做这样的事情：

ipcMain.on("eventFromRenderer", (event) => {
event.sender.send("eventFromMain", someReply);
}

来源： https://electronjs.org/docs/api/ipc-main

Answer 3

这是我修补的内容(使用contextBridge的新方法(，我的用途只是在我的 React 代码中让 menuItem 调用导航事件：

// preload.js
const exposedAPI = {
// `(customData: string) => void` is just the typing here
onMenuNav: (cb: (customData: string) => void) => {
// Deliberately strip event as it includes `sender` (note: Not sure about that, I partly pasted it from somewhere)
// Note: The first argument is always event, but you can have as many arguments as you like, one is enough for me.
ipcRenderer.on('your-event', (event, customData) => cb(customData));
}
};
contextBridge.exposeInMainWorld("electron", exposedAPI);

// typing for curious peoples
onMenuNav(cb: ((customData: string) => void)): void;

// renderer.tsx
// Call it in the renderer process, in my case it is called once at the end of renderer.tsx.
window.electron.onMenuNav(customData => {
console.log(customData); // 'something'
});

// in main process
const customData = 'something';
mainWindow.webContents.send('your-event', customData);

Answer 4

老问题，但我找到了新的好解决方案;

// on main process index.js
ipcMain.on('event-name', (event, data) => {
const value = 'return value';
event.reply(data.waitingEventName, value);
});
// on render frame index.html
const send =(callback)=>{
const waitingEventName = 'event-name-reply';
ipcRenderer.once(waitingEventName, (event, data) => {
callback(data);
});
ipcRenderer.send('event-name', {waitingEventName});
};
send((value)=>{
console.log(value);
});

Answer 5

从@raksa答案

您可以将请求发送到 main 并获得响应，而不是发送可能无法送达的响应。

使用此示例

//render process
ipcRenderer.send('hello', ['one', 'two', 'three']);
ipcRenderer.once('nice', (e, data) => {
console.log(data); //['one','two','three']
}) 
//main process
ipcMain.on('hello', (e, data) => {
e.reply('nice', data)
})