从 Main 到 Renderer 的信号未到达 contextBridge？

Question

当应用程序启动时，我尝试将一些数据从

main.js

发送到

renderer.js

，以便

renderer.js

可以开始渲染一些元素。我不知道出了什么问题，但沟通似乎在

preload.js

中断了。我检查了 Electron 的文档，我的代码看起来不错。我从

renderer.js

到

main.js

到

renderer.js

的通信没有问题，但是从

main.js

到

renderer.js

的通信不想工作。任何帮助将非常感激。

按照@elichen的指示，我在

ipcRenderer.on('data:dataList',()=>console.log('called'))

顶部测试了

preload.js

，这正在记录......这里到底发生了什么？

// main.js

async function readJSON(filePath) {
  try {
    const data = await fs.readFile(filePath, 'utf-8')
    return JSON.parse(data)
  } catch (error) {
    if (error.code === 'ENOENT') return []
    else throw error
  }
}

async function loadData() {
  try {
    const
      configFilePath = path.join(app.getPath('userData'), 'List of Data Points.json'),
      dataList = await readJSON(configFilePath)
    if (dataList.length) {
      console.log(dataList.length) //## THIS LOGS CORRECTLY ##//
      mainWindow.webContents.send('data:dataList', dataList)
      console.log('Sent data from main.js') //## THIS LOGS TO MAIN.JS CONSOLE ##//
    }
  } catch (error) {
    console.error('Error reading configuration file:', error)
  }
}

app.whenReady().then(()=>{
  createWindow()
  loadData()
  ...

// preload.js

ipcRenderer.on('data:dataList',()=>console.log('called')) //## THIS LOGS ##//

contextBridge.exposeInMainWorld('myAPI',
  {
    onDataListReady: (callback) => ipcRenderer.on('data:dataList', (_event, value) => {
      console.log('Why does this not work?') //## THIS DOES NOT LOG ##//
      return callback(value)
    }),
    ...

// renderer.js

window.myAPI.onDataListReady((value) => {
  console.log(value) //## THIS DOES NOT LOG TO BROWSER CONSOLE ##//
  try {
    dataList.forEach(it=>console.log(it))
  } catch (error) {
    console.error('Error in onDataListReady:', error)
  }
})

Answer 1

之所以

ipcRenderer.on('data:dataList',...

没有被调用是因为事物的顺序

1. createWindow()

   在此步骤中，预加载正在加载，但尚未创建

   data:dataList

   的侦听器。 （它是通过调用

   onDataListReady

   创建的，稍后调用）

2. loadData()

   在这一步，主要发送预加载事件，但没有人监听该事件

3. 名为

   onDataListReady

   的渲染现在才创建侦听器。

该问题的解决通常取决于应用程序的实施。一个小修复可以是在加载所有 dom 和 js 之后调用

loadData

，例如使用如下所示的

did-finish-load

事件

createWindow(){
...
mywin.webContents.on('did-finish-load',()=>loadData())
...
}