为什么我的 IPC 通信无法正常工作？答案

【问题标题】：Why my IPC communication doesn't work properly?为什么我的 IPC 通信无法正常工作？
【发布时间】：2020-06-27 03:02:32
【问题描述】：

这是一个使用 Electron 构建的简单视频时长检查程序。但是，它没有按预期工作；我也尝试在其他项目中使用 Electron IPC 通信，但总是失败。我可以成功上传视频并提交，然后什么都没有发生，任何错误或建议。调试器也没有显示任何内容。我从零开始构建了一个新项目并且遇到了同样的问题。路径值也不会显示在控制台上

main.js:

const electron = require('electron'),
app = electron.app,
BrowserWindow = electron.BrowserWindow
const ffmpeg = require('fluent-ffmpeg')
const ipc = require('electron').ipcMain

let mainWindow

app.on('ready', () => {
    mainWindow = new BrowserWindow({})
    mainWindow.loadFile('./index.html')
})

ipc.on('video:submit', (event, path) => {
    ffmpeg.ffprobe(path, (metadata) => {
        event.returnValue = metadata.format.duration
    })
})

index.html:

<html>
    <head>
    </head>
    <body>
        <form id="form">
            <h1>Video Info</h1>
            <div>
                <label>Select a video</label>
                <input type="file" accept="video/*" id="input">
            </div>
            <button type="submit" id="sb">Get info</button>
            <div id="result"></div>
        </form>
    </body>
    <script>
        require('./renderer.js')
    </script>
</html>

renderer.js：

const ipc = require('electron').ipcRenderer,

form = document.querySelector('#form')

let result = document.querySelector('#result')

console.log(path)

form.addEventListener('submit', () => {
    const path = document.querySelector('#input').files[0].path
    let reply = ipc.sendSync('video:submit', path)
    result.innerHTML = 'Video is' + reply + 'seconds!'
})

编辑

我对 main 和 renderer 进行了一些更改以使用异步发送和回复。我没有得到我想要的，但是在提交一些内容后，它的名称被替换为“未选择文件”。路径值仍未打印。

main.js 的变化：

ipc.on('video:submit', (event, path) => {
    ffmpeg.ffprobe(path, (metadata) => {
        let duration = metadata.format.duration
        event.reply('duration', duration)
    })
})

renderer.js 的变化：

form.addEventListener('submit', () => {
    const path = document.querySelector('#input').files[0].path
    ipc.on('duration', (event, duration) => {
        console.log(duration)
    })
    ipc.send('video:submit', path)
    result.innerHTML = 'Video is' + duration + 'seconds!'
})

【问题讨论】：

不是renderer.js 的问题我的意思是当脚本加载时，path 只会计算一次，所以你总是会发送undefined，你试过吗在箭头函数内移动路径评估？
请添加更多信息，只写“它失败”没有帮助；）
嗨，Mdsp，请尽量使您的帖子标题更明确:)
查看这个答案stackoverflow.com/questions/60227586/…
Take_Care 我将路径评估移到箭头函数之外仅用于测试，没有任何变化，但正确的位置在里面！

标签： javascript electron ipc

【解决方案1】：

代码看起来不错，但我想问题在于您的表单提交。该页面应在提交时重新加载，并且未到达 IPC 发送称呼。尝试阻止表单的默认操作。

form.addEventListener('submit', (e) => {
  e.preventDefault()
  const path = document.querySelector('#input').files[0].path
    ipc.on('duration', (event, duration) => {
        console.log(duration)
    })
   ipc.send('video:submit', path)
    result.innerHTML = 'Video is' + duration + 'seconds!'
  })

【讨论】：

剧照什么都没有发生......结果没有更多变化

【解决方案2】：

解决了！有3个主要错误，所以我不知道到底发生了什么。但这里是他们：

1 - ipc 函数的创建方式错误。这是正确的（异步回复）：

renderer.js：

ipc.on('duration', (event, duration) => {
    result.innerHTML = `Video is ${duration} seconds!`    
})
ipc.send('video:submit', path)

main.js:

ipc.on('video:submit', (event, path) => {
    ffmpeg.ffprobe(path, (err, metadata) => {
        let duration = metadata.format.duration
        console.log(duration)
        event.reply('duration', duration)
    })
 })

2 - DOM 没有获得提交按钮或事件，因此“addEventListiner”变得空...我将提交按钮更改为具有相同 ID 的输入按钮，然后将提交事件更改为简单的单击事件。我查询选择了输入按钮而不是表单。这就是我最终得到的：

renderer.js：

const ipc = require('electron').ipcRenderer,

suBtn = document.querySelector('input#sb')

let result = document.querySelector('div#result')

suBtn.addEventListener('click', (event) => {
    event.preventDefault()
    const path = document.querySelector('input#file').files[0].path
    ipc.on('duration', (event, duration) => {
        result.innerHTML = `Video is ${duration} seconds!`    
    })
    ipc.send('video:submit', path)

})

3 - 在 main.js 上的 ffprobe 进程中，我使用错误的参数调用方法。需要先传 err 参数，再传 data 参数，这样：

main.js:

ffmpeg.ffprobe(path, (err, metadata) => {
    let duration = metadata.format.duration
    console.log(duration)
    event.reply('duration', duration)
})

【讨论】：