Git Product home page Git Product logo

electron-better-ipc's Introduction

electron-better-ipc

Simplified IPC communication for Electron apps

The biggest benefit of this module over the built-in IPC is that it enables you to send a message and get the response back in the same call. This would usually require multiple IPC subscriptions.

You can use this module directly in both the main and renderer process.

Install

$ npm install electron-better-ipc

Requires Electron 10 or later.

Usage

Using the built-in IPC

Here, as an example, we use the built-in IPC to get an emoji by name in the renderer process from the main process. Notice how it requires coordinating multiple IPC subscriptions.

Main
const {ipcMain: ipc} = require('electron');

ipc.on('get-emoji', async (event, emojiName) => {
	const emoji = await getEmoji(emojiName);
	event.sender.send('get-emoji-response', emoji);
});
Renderer
const {ipcRenderer: ipc} = require('electron');

ipc.on('get-emoji-response', (event, emoji) => {
	console.log(emoji);
	//=> '๐Ÿฆ„'
});

ipc.send('get-emoji', 'unicorn');

Using this module

As you can see below, this module makes it much simpler to handle the communication. You no longer need multiple IPC subscriptions and you can just await the response in the same call.

Main
const {ipcMain: ipc} = require('electron-better-ipc');

ipc.answerRenderer('get-emoji', async emojiName => {
	const emoji = await getEmoji(emojiName);
	return emoji;
});
Renderer
const {ipcRenderer: ipc} = require('electron-better-ipc');

(async () => {
	const emoji = await ipc.callMain('get-emoji', 'unicorn');
	console.log(emoji);
	//=> '๐Ÿฆ„'
})();

Here we do the inverse of the above, we get an emoji by name in the main process from the renderer process:

Renderer
const {ipcRenderer: ipc} = require('electron-better-ipc');

ipc.answerMain('get-emoji', async emojiName => {
	const emoji = await getEmoji(emojiName);
	return emoji;
});
Main
const {ipcMain: ipc} = require('electron-better-ipc');

(async () => {
	const emoji = await ipc.callFocusedRenderer('get-emoji', 'unicorn');
	console.log(emoji);
	//=> '๐Ÿฆ„'
})();

API

The module exports ipcMain and ipcRenderer objects which enhance the built-in ipc module with some added methods, so you can use them as a replacement for electron.ipcMain/electron.ipcRenderer.

Main process

ipcMain.callRenderer(browserWindow, channel, data?)

Send a message to the given window.

In the renderer process, use ipcRenderer.answerMain to reply to this message.

Returns a Promise<unknown> with the reply from the renderer process.

browserWindow

Type: BrowserWindow

The window to send the message to.

channel

Type: string

The channel to send the message on.

data

Type: unknown

The data to send to the receiver.

ipcMain.callFocusedRenderer(channel, data?)

Send a message to the focused window, as determined by electron.BrowserWindow.getFocusedWindow.

In the renderer process, use ipcRenderer.answerMain to reply to this message.

Returns a Promise<unknown> with the reply from the renderer process.

channel

Type: string

The channel to send the message on.

data

Type: unknown

The data to send to the receiver.

ipcMain.answerRenderer(channel, callback)

This method listens for a message from ipcRenderer.callMain defined in a renderer process and replies back.

Returns a function, that when called, removes the listener.

channel

Type: string

The channel to send the message on.

callback(data?, browserWindow)

Type: Function | AsyncFunction

The return value is sent back to the ipcRenderer.callMain in the renderer process.

ipcMain.answerRenderer(browserWindow, channel, callback)

This method listens for a message from ipcRenderer.callMain defined in the given BrowserWindow's renderer process and replies back.

Returns a function, that when called, removes the listener.

browserWindow

Type: BrowserWindow

The window for which to expect the message.

channel

Type: string

The channel to send the message on.

callback(data?, browserWindow)

Type: Function | AsyncFunction

The return value is sent back to the ipcRenderer.callMain in the renderer process.

ipcMain.sendToRenderers(channel, data?)

Send a message to all renderer processes (windows).

channel

Type: string

The channel to send the message on.

data

Type: unknown

The data to send to the receiver.

Renderer process

ipcRenderer.callMain(channel, data?)

Send a message to the main process.

In the main process, use ipcMain.answerRenderer to reply to this message.

Returns a Promise<unknown> with the reply from the main process.

channel

Type: string

The channel to send the message on.

data

Type: unknown

The data to send to the receiver.

ipcRenderer.answerMain(channel, callback)

This method listens for a message from ipcMain.callRenderer defined in the main process and replies back.

Returns a function, that when called, removes the listener.

channel

Type: string

The channel to send the message on.

callback(data?)

Type: Function | AsyncFunction

The return value is sent back to the ipcMain.callRenderer in the main process.

Related

electron-better-ipc's People

Contributors

sindresorhus avatar ulken avatar dusansimic avatar karaggeorge avatar jackple avatar bendingbender avatar garrylachman avatar javierron avatar lukechilds avatar npezza93 avatar richienb avatar t13m avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.