Elec-ipc

A library that makes communication between different processes more convenient for Electron applications.

Installtion

npm

npm i elec-ipc

pnpm

pnpm add elec-ipc

yarn

yarn add elec-ipc

Feature

• two-way communication between the rendering process and the main process
• renderer process to renderer process bidirectional communication

Usage

between the renderer process and the main process

main.js

const { app, BrowserWindow } = require('electron')
const path = require('node:path')
const { send, receive } = require('elec-ipc')

function createWindow() {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      // This option needs to be enable, otherwise preload cannot access the node module
      nodeIntegration: true
    }
  })
  mainWindow.webContents.openDevTools()
  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  console.log('main send', 'first msg')
  send('mainMsg', 'first msg', (data) => {
    console.log('rendererAnswer', data)
  })

  setTimeout(() => {
    console.log('main send', 'second msg')
    send('mainMsg', 'second msg', (data) => {
      console.log('rendererAnswer', data)
    })
  }, 1000)

  setTimeout(() => {
    console.log('main send', 'third msg')
    send('mainMsg', 'third msg', (data) => {
      console.log('rendererAnswer', data)
    })
  }, 3000)

  receive('rendererMsg', (data) => {
    console.log('mainReceive', data)
    return 'nice for you'
  })

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

preload.js

const { receive, send } = require('elec-ipc')

const cancel = receive('mainMsg', (data) => {
  console.log('RendererReceive', data)
  return 'hi,there'
})

setTimeout(() => {
  cancel()
}, 2000)

console.log('renderer send', 'have a good day')
send('rendererMsg', 'have a good day', (data) => {
  console.log('mainAnswer', data)
})

between the renderer process and the renderer process

main.js

const { app, BrowserWindow } = require('electron')
const path = require('node:path')

function createWindow(preload) {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, preload + '.js'),
      // This option needs to be enable, otherwise preload cannot access the node module
      nodeIntegration: true
    }
  })

  mainWindow.webContents.openDevTools()
  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow('preload')
  createWindow('preload2')

  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

preload.js

const { send, receive } = require('elec-ipc')

console.log('here is renderer1')
console.log('renderer1 send', 'hello')
send('renderer:msg', 'hello', (data) => {
  console.log('renderer1 get answer', data)
})

receive('renderer2:msg', (data) => {
  console.log('renderer1 receive', data)
  console.log('renderer1 answer', 'baz')
  return 'baz'
})

preload2.js

const { receive, send } = require('elec-ipc')

console.log('here is renderer 2')

receive('renderer:msg', (data) => {
  console.log('renderer2 receive', data)

  console.log('renderer2 answer', 'hi,there')
  return 'hi,there'
})

console.log('renderer2 send', 'foo')
send('renderer2:msg', 'foo', (data) => {
  console.log('renderer2 get answer', data)
})

Issues

Please let me know if there are any issues, click this link.