Electron Basic - IPC (Inter Process Communication)

date

Jun 11, 2023

slug

electron-basic-ipc

author

status

Public

How do the Main Process and the Renderer Process communicate with each other?

The main process and the renderer process in an Electron application communicate with each other using Inter-Process Communication (IPC). Electron provides two modules for this purpose: ipcMain and ipcRenderer.

ipcMain Module

The ipcMain module is used in the main process to handle messages sent from a renderer process. It receives messages sent from the ipcRenderer module.


const { ipcMain } = require('electron')

ipcMain.on('message', (event, arg) => {
  console.log(arg)  // Prints "Hello from Renderer Process"
  
  // Send a reply to the renderer process
  event.reply('reply', 'Hello from Main Process')
})

In the above code, ipcMain is listening for the 'message' event. When it receives that event, it logs the argument sent with the event, and sends a reply back to the renderer process.

ipcRenderer Module

The ipcRenderer module is used in the renderer process to send synchronous and asynchronous messages to the main process, and to receive replies from the main process.


const { ipcRenderer } = require('electron')

// Send a message to the main process
ipcRenderer.send('message', 'Hello from Renderer Process')

// Listen for a reply from the main process
ipcRenderer.on('reply', (event, arg) => {
  console.log(arg)  // Prints "Hello from Main Process"
})

In the above code, ipcRenderer sends a 'message' event to the main process with an argument, and then listens for a 'reply' event to log the reply.

Key Reasons IPC is Used in Electron

The primary purpose of IPC (Inter-Process Communication) in Electron is to enable communication between the main process and renderer processes. This is crucial due to the multi-process architecture of Electron applications.

01. Access to Node.js and Electron APIs

In an Electron application, only the main process has direct access to Node.js and Electron APIs. If a renderer process needs to use these APIs, it must request the main process to perform those operations on its behalf. IPC is the mechanism that enables this communication.

02. Perform Heavy Operations

Sometimes, heavy operations such as disk I/O, CPU intensive tasks, or other blocking operations are offloaded to the main process from renderer processes to keep the UI responsive. The renderer process sends the data to the main process using IPC, the main process performs the operation, and sends back the result using IPC.

03. Managing Multiple Windows

IPC can be used for communication between multiple renderer processes. If an Electron application has multiple windows (which means multiple renderer processes), and they need to communicate with each other, they can do so by sending messages to the main process, which can then relay those messages to the other windows.

04. Enhancing Security

It's recommended to disable the integration of Node.js in the renderer process for security reasons (by setting nodeIntegration: false and contextIsolation: true). This means that the renderer process can't directly access Node.js APIs. If you need to use Node.js features from a renderer process, you can set up IPC messages to ask the main process to perform these operations.

The ipcMain module can listen for messages from any renderer process (web page). Once the ipcMain module receives a message, it replies to the sender without knowing which renderer process sent the message. However, the event object (the first argument of the callback function in ipcMain.on('message', (event, arg) => {})) contains a sender property. This event.sender is an instance of webContents, and it can be used to reply back to the renderer process via event.reply().

This approach allows for asynchronous, non-blocking communication between the main process and renderer processes. This way, they can run tasks in parallel and communicate as necessary, which can greatly improve the performance of your Electron applications.