title: Electron IPC excessive messages
body: <p>I am experimenting on the Electron (atom shell) platform for building a desktop app, currently on mac os x.</p>
  
  <p>I am trying its IPC (inter processes communication) module for sending and receiving sync and async messages in between two main electron processes, main and the renderer processes.</p>
  
  <p>However with async messages I get more than expected replies for messages ı have sent from the renderer process to main process, where they are replied. I know this form the console output the replies from the main process should produce.</p>
  
  <p>For each of 2 components of DOM, I send 1 single message to main process, and it responds with a reply which logs to console. But for 2 components(react components) I get 4 console log lines and for 3 it is 9, and for 4 it is 16 console log messages lines.</p>
  
  <p>What is going on here? What am I missing about async messages and replies with IPC? no problem with sync messages and replies.</p>
  
  <p>main.js (main process code):</p>
  
  <pre><code>var app = require('app');  // Module to control application life.
  var BrowserWindow = require('browser-window');  // Module to create native browser window.
  var ipc = require('ipc');
  
  // Report crashes to our server.
  require('crash-reporter').start();
  
  // Keep a global reference of the window object, if you don't, the window will
  // be closed automatically when the JavaScript object is GCed.
  var mainAppWindow = null;
  var bookWindow = null;
  
  // Quit when all windows are closed.
  app.on('window-all-closed', function() {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    app.quit();
  });
  
  // This method will be called when Electron has finished
  // initialization and is ready to create browser windows.
  app.on('ready', function() {
    // Create the browser window.
    mainAppWindow = new BrowserWindow({width: 1200, height: 900, 'title-bar-style': 'hidden'});
  
    // and load the index.html of the app.
    mainAppWindow.loadUrl('file://' + __dirname + '/index.html');
  
    mainAppWindow.openDevTools();
    // Emitted when the window is closed.
    mainAppWindow.on('closed', function() {
      // Dereference the window object, usually you would store windows
      // in an array if your app supports multi windows, this is the time
      // when you should delete the corresponding element.
      mainAppWindow = null;
      app.quit();
    });
  
    ipc.on('asynchronous-message', function(event, arg) {
      console.log(arg);  // prints "ping"
      event.sender.send('asynchronous-reply', 'pong');
    });
  
  
    // listen for the messages from renderer process to close the mainwindow and open a readerwindow
    ipc.on('synchronous-message', function(event, arg) {
      console.log(arg);  // prints "ping"
      event.returnValue = 'pong';
    });
    // when all of the book reader windows are closed open the mainAppWindow
    // in main process listen for all bookreaderwindows are closed
    // and in each, checking an array of them formed when they are each created.
  });
  </code></pre>
  
  <p>index.js (renderer process code):</p>
  
  <pre><code>/*
  -mainApp
    -Controls
    -Books
      -Book
  */
  var ipc = require('ipc');
  
  var Book = React.createClass({
    switchToBookReader: function() {
      // close mainAppWindow, and open bookreader window.
      // send message to main process 'close window'.
      // listen in main process for this.
      // callback for this in main process is to close the main window and open a readerwindow
    },
    componentDidMount: function() {
      ipc.send('asynchronous-message', 'ping');
      ipc.on('asynchronous-reply', function(arg) {
        console.log(arg); // prints "pong"
      });
      console.log(ipc.sendSync('synchronous-message', 'ping')); // prints "pong"
    },
    render: function() {
      return (
        &lt;div onDoubleClick={this.switchToBookReader()} &gt;
          {this.props.name}
        &lt;/div&gt;
      );
    }
  });
  
  var Books = React.createClass({
    render: function() {
      // create Book nodes here.
      var bookNodes = [];
      bookNodes.push(&lt;Book name="book1"/&gt;);
      bookNodes.push(&lt;Book name="book2"/&gt;);
  
  
      return (
        &lt;div&gt;
          {bookNodes}
        &lt;/div&gt;
      );
    }
  });
  
  var Controls = React.createClass({
    render: function() {
      return (
        &lt;div&gt;
          Controls
        &lt;/div&gt;
      );
    }
  });
  
  var mainApp = React.createClass({
    render: function() {
      return (
        &lt;div&gt;
          &lt;Controls /&gt;
          &lt;Books /&gt;
        &lt;/div&gt;
      );
    }
  });
  
  React.render(&lt;mainApp /&gt;, document.body);
  </code></pre>