Sent events in Preload Script

[ruudboon]

Not sure if this is a bug, this could easily me be me not understanding enough of electron.
I try to sent messages from the pre load script to the render.

I tried stuff like:

//option 1
ipcMain.emit('eventName', param1, param2)
//option 2
window.mainApi.send('eventName', param1, param2)
//option 3
ipcRenderer.send('eventName', param1, param2)

But somehow it doesn't get picked-up in the vue side.
Where I subscribed like:

window.mainApi.on('eventName', handleEvent)

Could you add some examples to the documentation how to achieve this?

[ruudboon]

I found a way that works but I assume there must be a better way to get the reference

webContents.getFocusedWebContents().send('eventName', param1, param2)

[jooy2]

Hello. Thank you for using Vutron template.

The preload script is basically a communication bridge that allows the renderer process to access the main process' API. It is not recommended to include the behavioral process logic of specific features.

In general, using the Node API is not recommended for security reasons in the renderer process and the main process will receive and process Node API requests.

Vutron runs in a context-isolated environment and there is a way to use the window's eventListener object to send messages from the preload script to the renderer process.

preload/index.ts

// Send to renderer from preload script
window.postMessage('ping')

renderer/screens/MainScreen.vue

onMounted((): void => {
  window.addEventListener('message', (data) => {
    console.log(data) // Returns 'ping'
    console.log('pong')
  })
})

NOTE: The eventListener must be removed before the component is unmounted, otherwise a memory leak will occur.
See: https://developer.mozilla.org/ko/docs/Web/API/Window/postMessage

If possible, it is preferable to use a method of sending messages from the main process to the renderer process rather than the preload script.

Please see below for more details:
https://www.electronjs.org/docs/latest/tutorial/ipc
https://www.electronjs.org/docs/latest/tutorial/tutorial-preload

Regards,

[ruudboon]

Thank you for the info. I would love to use the ipc methods.
In preload/index.ts I see 'mainApi' exposed. I think this part allow me to whitelist the allowed channels for render to main
But I don't see how I can use that for the other way around. Is there something for that like ipcMain.send()