ipcRenderer 数据未发送到 Electron 中的 ipcMain

Question

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

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

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

在索引中。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 );
});

Answer 1

在使用new BrowserWindow(options)在 electron 中创建浏览器 window时，其中options是 object。 将 object 定义为：

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;

在您的代码段中，您添加了const { app }...应该以这种方式使用 object 中的preload属性注入 javascript。

现在在创建浏览器 window 的主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>

如果您是第一次这样做，这有点困难。 我添加了更多文章，可以帮助您消除困惑：
StackOverflow 上的相关答案
NodeJS 中与 socket.io 通信的关系

Answer 2

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

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
    }
});

反应组件.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>
    )
}