Electron ipcMain & ipcRenderer 无法相互通信

Question

I'm writing a desktop app with electron js and I wanna both send data from my main process to my renderer process and the other way around.我正在用 electron js 编写一个桌面应用程序，我想将数据从我的主进程发送到我的渲染器进程，反之亦然。 For that I'm using the ipcMain and ipcRenderer , yet weirdly enough, while being able to send data via my renderer with ipcRenderer.send() , I cannot receive any data from my main process with ipcRenderer.on() .为此，我正在使用ipcMain和ipcRenderer ，但奇怪的是，虽然能够使用ipcRenderer.send() ipcRenderer.on()我的主进程接收任何数据。 It just doesn't work for some reason.它只是由于某种原因不起作用。

Afterwards I tried to find the bug by writing a test, following electron's documentation.之后，我尝试按照电子的文档编写测试来查找错误。 The test however doesn't work at all, since neither process seems able to send something to the other process.然而，该测试根本不起作用，因为两个进程似乎都无法向另一个进程发送一些东西。 This is the code that I wrote for my test:这是我为测试编写的代码：

main.js :主.js ：

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

const createWin = async () => {
    const win = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        },
    });
    win.loadFile('./index.html');
    return new Promise((resolve, reject) => {
        win.once('ready-to-show', () => {
            resolve();
        });
    });
};

app.whenReady().then(async () => {
    const win = await createWin();
    console.log('Ready to show');

    ipcMain.on('asynchronous-message', (event, arg) => {
        console.log(arg); // prints "ping"
        event.reply('asynchronous-reply', 'pong');
    });

    ipcMain.on('synchronous-message', (event, arg) => {
        console.log(arg); // prints "ping"
        event.returnValue = 'pong';
    });
});

index.html :索引.html ：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test, please work</title>
    </head>
    <body>
        <script src="./app.js"></script>
    </body>
</html>

app.js:应用程序.js：

const { ipcRenderer } = require('electron');

console.log(ipcRenderer.sendSync('synchronous-message', 'ping')); // prints "pong"

ipcRenderer.on('asynchronous-reply', (event, arg) => {
    console.log(arg); // prints "pong"
});
ipcRenderer.send('asynchronous-message', 'ping');

Here's what the Renderer logs:以下是渲染器记录的内容：

{ error: "reply was never sent" }

Here's the link to the documentation where I have the code from: https://www.electronjs.org/docs/api/ipc-main#sending-messages这是我从中获取代码的文档的链接： https://www.electronjs.org/docs/api/ipc-main#sending-messages

Answer 1

This is happening because you're hooking up your event handlers too late.发生这种情况是因为您连接事件处理程序太晚了。

You're only adding ipcMain.on after the page has loaded and ready-to-show has fired.您仅在页面加载并ready-to-show触发后添加ipcMain.on 。 You should either set them up earlier, like before you create the window, or just remove the await in await createWin() .您应该更早地设置它们，就像在创建 window 之前一样，或者只是删除await await createWin()中的等待。

For reference, Electron throws the error here作为参考， Electron 在这里抛出错误

Electron ipcMain & ipcRenderer 无法相互通信

问题描述

1 个解决方案

解决方案1
2 已采纳 2021-05-01 14:56:18

Electron ipcMain &amp; ipcRenderer 无法相互通信

问题描述

1 个解决方案

解决方案1 2 已采纳 2021-05-01 14:56:18

Electron ipcMain & ipcRenderer 无法相互通信

解决方案1
2 已采纳 2021-05-01 14:56:18