quickbuild/templates/Electron App (Advanced)/sections/communication/ipc.html

A mature, feature-complete application generator with an emphasis on speed

<template class="task-template">
  <section id="ipc-section" class="section js-section u-category-communication">
    <header class="communication">
      <div class="section-wrapper">
        <h1>
          <svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-communication"></use></svg>
          Communication between processes
        </h1>
        <h3>The <code>ipc</code> (inter-process communication) module allows you to send and receive synchronous and asynchronous messages between the main and renderer processes.</h3>

        <p>There is a version of this module available for both processes: <code>ipcMain</code> and <code>ipcRenderer</code>.</p>
        <p>Open the full API documentation for the <a href="http://electron.atom.io/docs/api/ipc-main">main process<span class="u-visible-to-screen-reader">(opens in new window)</span></a> and the <a href="http://electron.atom.io/docs/api/ipc-renderer/">renderer process<span class="u-visible-to-screen-reader">(opens in new window)</span></a> in your browser.</p>
      </div>
    </header>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="async-msg-demo-toggle" class="js-container-target demo-toggle-button">Asynchronous messages
          <div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux <span class="demo-meta-divider">|</span> Process: Both</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="async-msg">Ping</button>
            <span class="demo-response" id="async-reply"></span>
          </div>
          <p>Using <code>ipc</code> to send messages between processes asynchronously is the preferred method since it will return when finished without blocking other operations in the same process.</p>

          <p>This example sends a "ping" from this process (renderer) to the main process. The main process then replies with "pong".</p>
          <h5>Renderer Process</h5>
          <pre><code data-path="renderer-process/communication/async-msg.js"></code></pre>
          <h5>Main Process</h5>
          <pre><code data-path="main-process/communication/async-msg.js"></code></pre>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="sync-msg-demo-toggle" class="js-container-target demo-toggle-button">Synchronous messages
          <div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux <span class="demo-meta-divider">|</span> Process: Both</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="sync-msg">Ping</button>
            <span class="demo-response" id="sync-reply"></span>
          </div>
          <p>You can use the <code>ipc</code> module to send synchronous messages between processes as well, but note that the synchronous nature of this method means that it <b>will block</b> other operations while completing its task.</p>
          <p>This example sends a synchronous message, "ping", from this process (renderer) to the main process. The main process then replies with "pong".</p>
          <h5>Renderer Process</h5>
          <pre><code data-path="renderer-process/communication/sync-msg.js"></code></pre>
          <h5>Main Process</h5>
          <pre><code data-path="main-process/communication/sync-msg.js"></code></pre>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="invis-msg-demo-toggle" class="js-container-target demo-toggle-button">Communicate with an invisible window
          <div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux <span class="demo-meta-divider">|</span> Process: Both</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="invis-msg">Compute Factorial</button>
            <span class="demo-response" id="invis-reply"></span>
          </div>
          <p>It is common practice to create a new invisible browser window (renderer process) in order to run tasks without impacting performance in the main app's window.</p>
          <p>In this example we use the <code>remote</code> module to create a new invisible browser window from this renderer process. When the new page is loaded we send a message with <code>ipc</code> that the new window is listening for.</p>
          <p>The new window then computes the factorial and sends the result to be received by this, the original, window and added to the page above.</p>
          <h5>Renderer Process</h5>
          <pre><code data-path="renderer-process/communication/invisible-msg.js"></code></pre>
          <h5>Invisible Window Page HTML</h5>
          <pre><code data-path="sections/communication/invisible.html"></code></pre>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      require('./renderer-process/communication/sync-msg')
      require('./renderer-process/communication/async-msg')
      require('./renderer-process/communication/invisible-msg')
    </script>

  </section>
</template>