Communicate between Electron processes using IPC
In Electron, we often need to coordinate actions between multiple processes. For example, if a user clicks a button in a renderer process that makes a new browserWindow open, we need to be able to send a message to the main process that triggers this action. We’ll look at how to do just that using the ipcRenderer and ipcMain modules.
[00:00] Let's jump into our Renderer process. In our index HTML that the Renderer loads, we have a button here for opening a new window, and they're also requiring renderer.js. Here we just have a quick handler on the new window button.
[00:14] Now renderer.js, let's start by requiring ipcRenderer from Electron, and in our quick handler here, we're going to call ipcRenderer.send createWindow. This is going to send a message to our Main process, but our Main process needs to listening for that message, so in our Main.js, let's jump in here, and we're require ipcMain from Electron.
[00:39] Down here, in our app onReadyHandler, we're going to call ipcMain on create-window, and we're just going to call this create browser window, a function that we already have set up. Let's glance at that create browser window function. It creates a window.
[00:55] We're creating multiple windows, so we have a windows array. We push the window to that array and we load index.html. On the on-close events, because we don't want to leak that browser window, we splice it out of the windows array.
[01:10] Also, we register the createWindow event handler and the app onReadyHandler, because you cannot create browser windows until the ready handler has been called. Let's run our start scripts to try this out. Here's our window, so let's open a new one. We can see it worked. It came in right on top of our old one, by default.
[01:32] It's awesome. We can see it's working, and that's pretty easy to communicate between two processes there. We can also pass information via IPC. Let's jump back into our Renderer process. In our create window message that we send, let's add some browser window options here.
[01:48] We're going to say...these are going to be the X and Y coordinates on the screen. Then we're going to open the new window app. X0, Y0, that's going to be this top left corner. Back here, we're going to modify this zero function.
[02:01] The first parameter that the callback is going to receive is the event, and then it's going to receive a props parameter. This is the information that we pass. This is the props. We're going to talk the props, and we're going to pass it to our create browser window function.
[02:18] We can see, in create browser window here, we're already expecting browser window options to be passed optionally. Let's try this out. There we go. IPC is bi-directional, so our Main process can also inform our Renderer process when an event has happened.
[02:38] Let's see what it would take to keep account of all windows in each of our Renderer processes. In our Main process, let's add a send window count function. In here, we're going to iterate over our windows array.
[02:55] Each window as a Web contents property. It's just the web contents instance that that browser window has. That's where we're going to send our IPC message. We call send. Let's call this window-count. We're going to send an object with a count property, and we'll send the window's length to it.
[03:16] To keep the count on our windows accurate, we also need to send this message when a window is closed. Let's add that in our close event handler right here, send window count. Then, in our on-ready handler, we need to when to send this message to each of our Renderer processes.
[03:32] We'll create another message here called get window count, and when that is called, we will send the window count, like that. For our Renderer process, let's add some HTML really fast. Get our count element here. We're going to want to set up a listener on the window-count event.
[03:52] This function has the same function signature as the IPC Main one. We have our events and the props that we get from the message. Here we're going to update our dom element. Say textContent=props.count.
[04:08] Then we also need to get this information initially when this Renderer process first loads. We're going to call ipcRenderer send get-windowCount. This will send the message to the Main, that will then send back a window count message that we'll see right here, and then update the dom.
[04:28] Let's try this out. We can see our number of windows here is one, which is correct. Let's open a new one, and we have two. Awesome. This is working. Let's try a third one.