javascriptelectronipcipcrenderer

communication between 2 browser windows in electron

I need to build an app that will span across multiple monitor screens, something like this: multiple windows on different monitors Electron supports multiple windows but how do I communicate between them?

Solution

  • The main thing to remember is that in Electron, interProcess communication is done by ipcMain (in the main process) and ipcRenderer(in all the created windows). Like below: enter image description here From what i've seen in the GitHub comments - direct communication between the Renderer instances is not allowed. Everything must pass trough the mainProcess.

    the code: mainProcess.js:

    function createWindow1 () {
  window1 = new BrowserWindow({width: 800,height: 600})
  window1.loadURL(`file://${__dirname}/window1.html`)
  window1.webContents.openDevTools()
  window1.on('closed', function () {
     window1 = null
  })
  return window1
}
function createWindow2 () {
  window2 = new BrowserWindow({width: 1000, height: 600})
  window2.loadURL(`file://${__dirname}/window2.html`)
  window2.webContents.openDevTools()
  window2.on('closed', function () {
    window2 = null
  })
  return window2
}

app.on('ready', () => {
  window1 = createWindow1();
  window2 = createWindow2();

  ipcMain.on('nameMsg', (event, arg) => {
  console.log("name inside main process is: ", arg); // this comes form within window 1 -> and into the mainProcess
  event.sender.send('nameReply', { not_right: false }) // sends back/replies to window 1 - "event" is a reference to this chanel.
  window2.webContents.send( 'forWin2', arg ); // sends the stuff from Window1 to Window2.
});

    window1.html:

    <body>
    <input type="text" id="name" value="" placeholder="Enter your name">
    <button type="button" id="sendName" >Send the name! </button>
</body>
<script>
   // You can also require other files to run in this process
   require('./window1.js')
</script>

    window1.js:

    const ipcRenderer = require('electron').ipcRenderer

let name = document.getElementById('name');

ButtonSendName = document.getElementById('sendName');
ButtonSendName.addEventListener('click', (event) => {
  ipcRenderer.send('nameMsg', name.value);
})

ipcRenderer.on('nameReply', (event, arg) => {
  console.log(arg) // why/what is not right..
});

    window2.html:

    <body>
  <p id = "showName"></p>
</body>

<script>
  require('./window2.js')
</script>

    window2.js:

    const { ipcRenderer } = require('electron')

showName = document.getElementById('showName')
ipcRenderer.on('forWin2', function (event, arg){
  console.log(arg);
  showName.innerHTML = arg;
});
console.log("I'm Window2");

    A demo would be better, but I don't know how to build an electron CodeBin app. This image gives you an idea: enter image description here

    Enjoy the power of Electron !