NOTE & BLOG

    Electron: Some IPC Ways
    December 5, 2022

    IPC, Inter-Process Communication, I's said that some technologies or methods for transmitting information or signals between at least two processes or threads. The above description comes from WIKI, which means that the method of transmitting information between Main Process and BrowserWindow is IPC.

    JAVASCRIPTFRONTEND DEV

    What is IPC?

    Inter-Process Communication (IPC) refers to some technologies or methods for transmitting information or signals between at least two processes or threads.

    The above description comes from WIKI, which means that the method of transmitting information between Main Process and BrowserWindow is IPC.

    How does IPC work in Electron?

    Electron provides IpcRenderer and IpcMain to facilitate engineers to perform IPC

    • Screen side (BrowserWindow) uses IpcRenderer
    • The main process side (Main Process) uses IpcMain

    How to write the code in practice ?

    Shown below are 3 modes of communication

    • Someone else will pick you up

    IpcMain.on monitors messages from IpcRenderer.send Then use event.reply to return For example: after you bring the kitten home, you ask the mother to help take care of your kitten and let her help feed it.

    // main.js In main process
const { ipcMain } = require("electron");
ipcMain.on("take-cat-home-message", (event, arg) => {
  console.log(arg); // prints "Bring cub cat to home"
  event.reply("need-clean-reply", "The cub cat is hungry");
});

// preload.js - In renderer process
const { ipcRenderer } = require("electron");
ipcRenderer.on("need-clean-reply", (event, arg) => {
  console.log(arg); // prints "The cub cat is hungry"
});
ipcRenderer.send("take-cat-home-message", "Bring cub cat to home");
    • Wait for response You have been staring at the kitten because you are afraid that she will be hungry, but you have not done anything in the meantime.

    // main.js - In main process
const { ipcMain } = require("electron");
ipcMain.on("take-cat-home-message", (event, arg) => {
  console.log(arg); // prints "Bring cub cat to home"
  // Before the event respond you are paying attention the cub cat
  event.returnValue = "The cub cat is hungry";
});

// preload.js - In renderer process
const { ipcRenderer } = require("electron");
console.log(ipcRenderer.sendSync("take-cat-home-message", "Bring cub cat to home")); // prints "The cub cat is hungry"
    • Notification response When you clean the house, The cub cat is hungry and will "meow"

    // main.js - In main process
const { ipcMain } = require("electron");
ipcMain.handle("take-cat-home-handle", async (event, arg) => {
  console.log(arg); // prints "Bring cub cat to home"
  return "The cub cat is hungry, meow";
});

// preload.js - In renderer process。
const { ipcRenderer } = require("electron");
ipcRenderer
  .invoke("take-cat-home-handle", "Bring cub cat to home")
  // Then you can do other things before returning, such as cleaning your home.
  .then((msg) => console.log(msg)); // prints "The cub cat is hungry, meow"

    The above three methods all start from the renderer process side. What should I do if I want to trigger the message from the main process?

    // main.js - In main process
mainWindow.webContents.send("switch-cat", number);

// preload.js - In renderer process
const { ipcRenderer } = require("electron");
ipcRenderer.on("switch-cat", (event, args) => switchCat(args));

    References

    Share with the post url and description