ipcRenderer 数据未发送到 Electron 中的 ipcMain

Question

我最近开始使用 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 );
});

Answer 1

而 creating a browser window 在 electron 中使用 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;

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

现在在创建浏览器的主要 app.js 文件中（无论您命名什么 index.js）window:

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>

如果你是第一次做，这有点困难。我添加了更多文章来帮助您消除困惑：

Relation with socket.io communication in NodeJS

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

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

ipcRenderer 数据未发送到 Electron 中的 ipcMain

ipcRenderer data not sent to ipcMain in Electron

javascript

node.js

electron