javascriptnode.jselectron

Child process opening unexpected electron windows


I'm with a problem after using electron-builder or electron-packager, I belive that the problem is at asar. If I execute the code with electron . it works nicely, but if I build an executable with electron-builder or electron-packager, when I call a child process it opens another instance of the program, and don't do what was expected.

With electron .

When I click on "Converter" button it starts to convert the .xml files to PDFs as expected.

Built version

before click

after click

Code

Click:

e.onclick = () => {

  let path = document.getElementById("pasta").files[0].path.replace(/\\/g, '/');

  let c1 = cp.spawn(process.execPath, [__dirname + '/child.js'], {
  stdio: ['inherit', 'inherit', 'inherit', 'ipc']
});

  c1.send(path);

  c1.on('message', m => {
    if(m.name === 'start') {
      document.getElementById("start").className += " disabled";
    }
    if(m.name === 'process') {
      document.getElementById("bar").style.width = m.data + "%";
    }
    if(m.name === 'end') {
      document.getElementById("start").className = document.getElementById("start").className.replace(" disabled", '');
      document.getElementById("bar").style.width = "0%";
      window.alert("Conversão relizada com sucesso!");
    }
  });
}

Child.js

'use strict';
const pdf = require('../pdfCreator.js');
const timer = require('timers');

process.on('message', m => {
  let path = m;
  process.send({name: 'start'});
  pdf.readDir(path, status => {
    let percent = parseInt((status.now/status.total) * 100);
    process.send({name: 'process', data: percent});
  }, () => {
    timer.setTimeout(() => {
      process.send({name:'end'});
    }, 1000);
  });
});

Solution

  • How I soved this

    I realised that is child process don't work at asar packages, so I changed the child process to a background window where I can run the functions without freeze the UI (that was the reason why I was trying to use child process), in the end it worked as a child process.

    Code

    Main.js

      win.loadURL(url.format({
        pathname: path.join(__dirname, 'app/index.html'),
        protocol: 'file:',
        slashes: true
      }));
    
      backgroundWin = new BrowserWindow({show: false});
    
      backgroundWin.loadURL(url.format({
        pathname: path.join(__dirname, 'app/process.html'),
        protocol: 'file:',
        slashes: true
      }));
    
      ipcMain.on('toUi', (e, m) => {
        win.webContents.send('message', m);
      });
    
      ipcMain.on('toProcessor', (e, m) => {
        backgroundWin.webContents.send('message', m);
      });
    

    Processor.js

    ipcRenderer.on('message', (e, m) => {
    
      if(m.type === 'start'){
        let path = m.data;
        ipcRenderer.send('toUi', {type: 'start'});
        pdf.readDir(path, status => {
          let percent = parseInt((status.now/status.total) * 100);
          ipcRenderer.send('toUi', {type: 'process', data: percent});
        }, () => {
          timer.setTimeout(() => {
            ipcRenderer.send('toUi', {type:'end'});
          }, 1000);
        });
      }
    
    });
    

    UI.js

    ipcRenderer.on('message', (e, m) => {
          console.log(m);
          if(m.type === 'start') {
            document.getElementById("start").className += " disabled";
          }
          if(m.type === 'process') {
            document.getElementById("bar").style.width = m.data + "%";
          }
          if(m.type === 'end') {
            document.getElementById("start").className = document.getElementById("start").className.replace(" disabled", '');
            document.getElementById("bar").style.width = "0%";
            window.alert("Conversão relizada com sucesso!");
          }
    });
    

    So I send a message to the main and the main sends to the UI or to the backgroud process and it work as magic.

    Git repo.