Diferentemente de NW.js que compartilha o contexto do navegador e de node no mesmo processo o que permite executar pacotes npm e acessar API's do navegador no mesmo arquivo .js
, Electron faz diferente, em Electron cada contexto é executado em um processo isolado, a maneira como node e o código de "front-end" se comunicam é através de mensagens.
Mensagens:
Tanto o código no processo principal como no processo de renderização utilizam uma instância de EventEmitter para trocar mensagens ... no processo principal utiliza-se o módule ipcMan ou a propriedade "webContents" de "BrowserWindow":
// use ipcMain no processo principal (sync/async) ----------------
const {ipcMain} = require('electron')
// ouvinte, resposta assíncrona
ipcMain.on('iniciar-player', (event, arg) => {
// sua lógica aqui ...
event.sender.send('player-reply', 'started-async')
})
// ouvinte, resposta síncrona
ipcMain.on('iniciar-player', (event, arg) => {
// sua lógica aqui ...
event.returnValue = 'started-sync'
})
// no processo de renderização (página web) ----------------------
const {ipcRenderer} = require('electron')
// ouvinte assíncrono (ouvinte antes do envio)
ipcRenderer.on('player-reply', (event, arg) => {
console.log(arg) // "started-async"
})
// enviar
ipcRenderer.send('iniciar-player', 'argumento-ou-configuração')
// ouvinte síncrono
let response = ipcRenderer.sendSync('iniciar-player', 'argumento-ou-configuração')
console.log(response) // "started-sync"
No processo principal execute a lógica de seu módulo. O próximo exemplo usa "webContents" no processo principal (assincronamente):
// no processo principal (async) ---------------------------------
const {app, BrowserWindow} = require('electron')
let win = null
app.on('ready', () => {
win = new BrowserWindow({width: 800, height: 600})
win.loadURL(`file://${__dirname}/app/public/index.html`)
// ouvinte
win.webContents.on('iniciar-player', (/*parametros serializados em JSON por padrão*/) => {
// sua lógica ...
win.webContents.send('player-reply', 'started-async') // responda
})
})
// no processo de renderização (página web) ----------------------
const {ipcRenderer} = require('electron')
// ouvinte assíncrono (ouvinte antes do envio)
ipcRenderer.on('player-reply', (event, arg) => {
console.log(arg) // "started-async"
})
// enviar
ipcRenderer.send('iniciar-player', 'argumento-ou-configuração')
Isto é o básico sobre troca de mensagens entre o código executado na página (render) e o processo principal (main).
Nota: você pode ainda se abstrair destas mensagens usando o módulo remote caso deseje apenas acessar o módulo sem passar pelo processo principal
Remote:
Você pode acessar no processo de renderização um módulo ou arquivo (.js
) em especifico através do módulo remote:
// no processo de renderização (página web)
const player = require('electron').remote.require('play-sound')
// abrir player
const audio = player.play('nomedoarquivo.mp3', {/*efeitos*/}, (err) => {
if (err) throw err
});
// simulando a iteração do usuário para encerrar o player
document.getElementById('btn-fechar-player').addEventListener('click', () => {
audio.kill()
}, false)
Usar remote parece bem mais simples más, leia a documentação ... "algumas coisas" não são recomendadas fazer ao usar remote.
Fontes: