Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

Electron IPC Tutorial - Communication within your Electron App

By Gary simon - Nov 29, 2017

This tutorial is based on our 100% free course: Creating Desktop Apps with Electron Tutorial

We're getting deep into our course so far, and our cryptocurrency app is starting to take shape! At this point, we need to allow the user to specify a pricing threshold from a seconday window to the app's main window.

To do this, we will use Electron IPC (Inter-Process Communication), which sends JSON data between two different processes: main and renderer.

Let's get started!

If you prefer watching a video..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

..video coming soon..

IPC Main

The IPC Main process can receive asynchronous and synchronous messages sent from a Renderer process (such as our add.html window). It can also send messages and reply to messages.

To get started, we're going to establish the IPC main process in our /main.js file:

// Other const's removed for brevity

const ipc = require('electron').ipcMain

Next, at the very bottom of this file, let's add the following:

ipc.on('update-notify-value', function (event, arg) {
  win.webContents.send('targetPriceVal', arg)
})

We use the ipc.on() method to specify the name of a message that will be sent from our add.html window, and once received, we reference win, which is bound to our index.html window, and .webContents.send() to send the transmitted value from add.html. We're calling it targetPriceVal and the value is the arg.

Note: The IPC Main process also has other methods that will allow you to reply to the IPC Renderer process that sent the message. You can view the other methods here.

IPC Renderer

Next, let's integrate the IPC Renderer process into our /src/add.js file:

// Other const's removed for brevity

const ipc = electron.ipcRenderer

Then, at the bottom of this file, add:

const updateBtn = document.getElementById('updateBtn')

updateBtn.addEventListener('click', function () {
  ipc.send('update-notify-value', document.getElementById('notifyVal').value)

  // Close this window
  var window = remote.getCurrentWindow();
  window.close();
})

Once the update button is clicked, we use ipc.send() to first set a name of the message, and then the value of the input.

After that, we close the current window add.html.

We also have to integrate the IPC Renderer process into /src/index.html to receive & set the message sent from IPC Main in main.js:

// Other const's removed for brevity
const ipc = electron.ipcRenderer

var price = document.querySelector('h1')

// Add these two variables
var targetPriceVal;
var targetPrice = document.getElementById('targetPrice')

At the bottom of this same file, add:

ipc.on('targetPriceVal', function (event, arg) {
    targetPriceVal = Number(arg);
    targetPrice.innerHTML = '$'+targetPriceVal.toLocaleString('en')
})

And that's it! You can now run npm start, click the notify button, set a new price, and hit the update button, and the specified price will be reflected as shown here:

As you can see, the data flow looks like this:

IPC Renderer -> IPC Main -> IPC Renderer
..or.. add.html -> IPC Main -> index.html

Going Forward

Now that we've set an alert price, let's actually make a native desktop notification appear when the current price of Bitcoin exceeds the price the user has set.

This tutorial is based on our 100% free course: Creating Desktop Apps with Electron Tutorial


Share this post




Say something about this awesome post!