The Prince Academy株式会社 | Asynchronous and Synchronous IPC | Chapter 4: Inter-Process Communication: Bridging the Gap | Getting Started with Electron: Building Desktop Apps for Web Developers

In Electron, communication between processes, especially between the main process and renderer processes, is a fundamental concept. This communication often happens asynchronously, meaning the sender doesn't wait for a response before continuing its execution. However, there are scenarios where a synchronous response is necessary. Understanding these two modes of Inter-Process Communication (IPC) is crucial for building robust and responsive desktop applications.

Asynchronous IPC

Asynchronous IPC is the default and generally preferred method for communication in Electron. It's non-blocking, meaning that when you send a message, your process doesn't halt its execution waiting for an answer. This is ideal for operations that might take some time, like reading a file or making a network request, as it prevents your application's UI from freezing.

The ipcRenderer module in the renderer process is used to send messages to the main process, and ipcMain in the main process is used to listen for these messages and send responses. Here's how it typically looks:

sequenceDiagram
    participant Renderer
    participant Main
    Renderer->>Main: ipcRenderer.send('channel', data)
    activate Main
    Main->>Renderer: ipcMain.on('channel', (event, data) => { ... event.reply('responseChannel', responseData) })
    deactivate Main
    Renderer->>Renderer: ipcRenderer.on('responseChannel', (event, responseData) => { ... })

In the renderer process:

import { ipcRenderer } from 'electron';

// Sending a message to the main process
ipcRenderer.send('async-message', { payload: 'Hello from renderer!' });

// Listening for a response
ipcRenderer.on('async-response', (event, data) => {
  console.log('Received async response:', data);
});

In the main process:

const { ipcMain } = require('electron');

ipcMain.on('async-message', (event, data) => {
  console.log('Received async message:', data);
  // Sending a response back to the renderer
  event.reply('async-response', { status: 'Success', reply: 'Message received by main process!' });
});

sequenceDiagram participant Renderer participant Main Renderer->>Main: ipcRenderer.send('channel', data) activate Main Main->>Renderer: ipcMain.on('channel', (event, data) => { ... event.reply('responseChannel', responseData) }) deactivate Main Renderer->>Renderer: ipcRenderer.on('responseChannel', (event, responseData) => { ... })

import { ipcRenderer } from 'electron'; // Sending a message to the main process ipcRenderer.send('async-message', { payload: 'Hello from renderer!' }); // Listening for a response ipcRenderer.on('async-response', (event, data) => { console.log('Received async response:', data); });

const { ipcMain } = require('electron'); ipcMain.on('async-message', (event, data) => { console.log('Received async message:', data); // Sending a response back to the renderer event.reply('async-response', { status: 'Success', reply: 'Message received by main process!' }); });