ipcRenderer 数据未发送到 Electron 中的 ipcMain答案

【问题标题】：ipcRenderer data not sent to ipcMain in ElectronipcRenderer 数据未发送到 Electron 中的 ipcMain
【发布时间】：2021-08-01 03:04:26
【问题描述】：

我最近开始使用 electron 开发桌面应用程序。

我想在按钮单击事件中从 index.html 向 main.js 发送表单详细信息。我在 index.js 中的按钮上添加了一个监听器。网上搜索，发现我在main.js中必须使用ipcMain，在index.js中使用ipcRenderer，但是数据没有发送到ipcMain。

如何在 main.js 中获取表单数据？

在 index.html 中

<div class="btn-div fld">
         <button id="loginButton" class="btn btn-primary st-btn" type="submit" name="button">Login</button>
</div> 
<script src="index.js" charset="utf-8"></script>

在 index.js 中

document.querySelector("#loginButton").addEventListener('click', function(){
  userDetails = document.getElementById('login');
  username = userDetails.username.value;
  password = userDetails.password.value;
  console.log("Hello");
  const {ipcRenderer} = require('electron');
  ipcRenderer.send('asynchronous-message', username);
})

在 main.js 中

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

ipcMain.on('asynchronous-message', (event, arg) => {
  console.log( arg );
});

【问题讨论】：

请注意，它是ipcRenderer（还有一个er）。因此，您可能会在 DevTools 控制台中遇到错误。未来：请发布所有信息，包括此类错误输出。
我已经改成了ipcRenderer，但是进程之间还是没有通信。关于错误，我可以在终端上看到 main.js 中生成的错误，但 index.js 抛出的错误没有显示出来。那么是否有一个设置我必须更改才能查看错误，因为当我在浏览器上运行它时，开发人员控制台不会显示任何错误

标签： javascript node.js electron

【解决方案1】：

而creating a browser window 在电子中使用new BrowserWindow(options)，其中options 是一个对象。将对象定义为：

options = {
    webPreferences: {
         preload: preload.js, //You need to create a file named preload.js (or any name) in your code
         nodeIntegration: true,
         contextIsolation: false,
    }
}

现在在一个名为 preload.js 的新文件中：

window.ipcRenderer = require('electron').ipcRenderer;

在您的 sn-p 中，您添加了 const { app } ...，应该这样做以使用对象中的 preload 属性注入 javascript。

现在在您创建浏览器窗口的主 app.js 文件（无论您命名为 index.js）中：

const ipc = require('electron').ipcMain; //Add to your pre-existing code
ipc.on("close-app", (event, message) => { //"close-app" can be anything but, you need to use the same key in the send message side (later in this answer)
    browserWindow.close(); //If you named the browserwindow as browserWindow
});

现在在您的 HTML 中（即发送消息端）

...
<script>
    window.ipcRenderer("close-app", ""); //Second parameter is used if you want to send some extra message. The extra message can be viewed in the server side from the message parameter in the app.js code (just above this paragraph)
</script>

如果您是第一次这样做，这有点困难。我添加了更多文章，可以帮助您消除困惑：
A related answer at StackOverflow
Relation with socket.io communication in NodeJS

【讨论】：

【解决方案2】：

虽然我已经看到这个问题的另一个答案可能对其他人有用，但它对我不起作用......我正在使用 webpack，并且，对于我的生活，即使添加ExternalsPlugin commonjs 和电子。以下方法改为：

main.js

ipcMain.on("download", (event, info) => {
info.properties.onProgress = status => win.webContents.send("downloadProgress", status);
  });

preload.js

contextBridge.exposeInMainWorld('electron', {
  api: {
    //receiving message from main.js
    responseProgress: (channel, func) => {
        let validChannels = ["downloadProgress"];
        if (validChannels.includes(channel)) { 
            ipcRenderer.on(channel, (event, ...args) => func(...args));
        }
    },
    process: (channel) => {
    //example for process that is called by button in reactjs etc
    }
});

ReactComponent.js

  function ReactComponent() {
  useEffect(() => {
        //retrieving information from preload.js originally sent from main.js
        window.electron.api.responseProgress("downloadProgress", (progress) => {
        console.log(progress);
        console.log(progress.percent);
        });
          }, []);
  return (
    //example of calling api on button click
    <button onClick={() => {
      window.electron.api.process("toMain");
    }}>Download</button>
    )
}

【讨论】：