Electron-Ipc-Hub
english | 简体中文
Promise backed IPC For Electron & Typescript type prompt
Table of Contents
Features
- Simple api
- Size: less than 4kb gzipped(even smaller with tree-shaking), no external dependencies required
- Promise support
- Typescript support: this utility is written in typescript, has type definition inborn
- hooks: Support the call of communication hook, which is convenient to view communication data and debugger
Install
use yarn
yarn add electron-ipc-hub
or npm
npm install electron-ipc-hub -S
Example:
use typescript
Define type
type RendererToMain = {
ping: (num: number) => string;
};
type MainToRenderer = {
"set-title": string;
};
After introducing types, you will get type constraints and prompts
renderer => main => renderer
const mainHub = useMainHub<RendererToMain, MainToRenderer>();
mainHub.on("get-title", async function (num) {
return "pong" + num;
});
const rendererHub = useRendererHub<RendererToMain, MainToRenderer>();
async function fn() {
const re = await rendererHub.sendToMain("ping", 1);
console.log(re);
}
fn();
main => renderer
mainHub.sendToRenderers("set-title", "This is new title");
rendererHub.on("set-title", function (title) {
document.title = title;
});
use javascript
renderer => main => renderer
const { useMainHub } = require("electron-ipc-hub");
const mainHub = useMainHub();
mainHub.on("ping", async function (num) {
return "pong" + num;
});
const { useRendererHub } = require("electron-ipc-hub");
const rendererHub = useRendererHub();
async function fn() {
const re = await rendererHub.sendToMain("ping", 1);
console.log(re); Print 'pong1'
}
fn();
main => renderer
rendererHub.on("change-title", (title) => {
document.title = title;
});
mainHub.sendToRenderer(win, "change-title", "This is new title");
API
useMainHub
useMainHub([options])
-
options
onReceiveBeforeEach
(param: ChannelData) => void (optional)onReplyBeforeEach
(param: ChannelData) => void (optional)onSendBeforeEach
(param: ChannelData) => void (optional)
-
mainHub.on(name, fn)
- name:
string
(required) Name of listening event - fn:
function
(required) Execution function of listening event
tips: Due to the need to respond to the request from the renderer, the same name can only be bound once, and the duplicate 'name' will overwrite the previous event with the same name
-
mainHub.off(name)
- name:
string
(required) Name of listening event
-
mainHub.sendToRenderer(win, name, data)
- win:
BrowserWindow
- name:
string
(required) Name of listening event - data:
string
| boolean
| number
| array
| object
...等 (Your custom data type)
-
mainHub.sendToRenderers(name, data)
- name:
string
(required) - data:
string
| boolean
| number
| array
| object
...等 (Your custom data type)
useRendererHub
useRendererHub([options])
- options
onReceiveBeforeEach
(param: ChannelData) => void (optional)onSendBackBeforeEach
(param: ChannelData) => void (optional)onSendBeforeEach
(param: ChannelData) => void (optional)
- rendererHub.on(name, fn)
- name:
string
(required) Name of listening event - fn:
function
(required) Execution function of listening event
- rendererHub.off(name, fn)
- name:
string
(required) Name of listening event - fn:
function
(optional), Default empty, If it is empty, all the function events named name
above will be removed
- rendererHub.sendToMain(name, data)
- name:
string
(required) Name of listening event - data:
string
| boolean
| number
| array
| object
... (required) (Your custom data type) - @return
Promise<response>
response
为Your custom data type
hooks
The 'options' passed in usemainhub
or userendererhub
will be executed at a specific stage, for example:
const mainHub = useMainHub({
onReceiveBeforeEach(data) {
console.log("<<< [receive]", data);
},
onReplyBeforeEach(data) {
console.log(">>> [reply]", data);
},
onSendBeforeEach(data) {
console.log(">>> [send]", data);
},
});
const rendererHub = useRendererHub({
onSendBeforeEach: (data) => {
console.log("<<< [send]", data);
},
onSendBackBeforeEach: (data) => {
console.log("<<< [send back]", data);
},
onReceiveBeforeEach: (data) => {
console.log("<<< [receive]", data);
},
});
[renderer]onSendBeforeEach -> [main]onReceiveBeforeEach -> [main]onReplyBeforeEach -> [renderer]onSendBackBeforeEach
[main]onSendBeforeEach -> [renderer]onReceiveBeforeEach
renderer => main => renderer
mainHub.on("ping", async function (num) {
return "pong" + num;
});
async function fn() {
const re = await rendererHub.sendToMain("ping", 1);
}
fn();
Debugger with hooks
const rendererHub = useRendererHub({
onSendBeforeEach: (data) => {
debugger;
},
onSendBackBeforeEach: (data) => {
debugger;
},
});