electron-re
Using electron-re
to generate some service processs and communicate between main process
,render process
and service
. In some Best Practices
of electron tutorials, it suggest to put your code that occupy the CPU into rendering process instead of in main process, exactly electron-re
means to do.
I ) Instruction
The service
process is a customized render process that works in the background, receiving path
, options
as arguments:
- path -- the absolute path to a js file
const { BrowserService } = require('electron');
const myServcie = new BrowserService('app', path.join(__dirname, 'path/to/app.service.js'));
- options -- the same as
new BrowserWindow()
options
{
...
scripts: {
start: 'cross-env NODE_ENV=dev electron index.js',
start: 'cross-env NODE_ENV=development electron index.js',
}
...
}
global.nodeEnv = 'dev';
const myService = new BrowserService('app', 'path/to/app.service.js', {
...
webPreferences: { webSecurity: false }
});
In order to send data from main or other process to a service you need use MesssageChannel
, such as: MessageChannel.send('service-name', 'channel', 'params')
II ) Usage
1. Service
The service is a customized BrowserWindow
instance, it has only method connected()
which return a resolved Promise
when service is ready, suggest to put some business-related code into a service.
const { BrowserService } = require('electron-re');
...
app.whenReady().then(() => {
const myService = new BrowserService('app', 'path/to/app.service.js');
myService.connected()
.then(() => {
mhyService.webContents.send('channel1', { value: 'test1' });
...
})
.catch((err) => console.log(`Error in service-app : ${err}`));
});
const { ipcRenderer } = require('electron');
ipcRenderer.on('channel1', (event, result) => {
...
});
2. MessageChannel
This is a messaging tool expanding some method from electron build-in ipc:
const { BrowserService, MessageChannel } = require('electron-re');
...
app.whenReady().then(() => {
const myService = new BrowserService('app', 'path/to/app.service.js');
myService.connected().then(() => {
if (isInDev) myService.openDevTools();
MessageChannel.send('app', 'channel1', { value: 'test1' });
MessageChannel.invoke('app', 'channel2', { value: 'test1' }).then((response) => {
console.log(response);
});
MessageChannel.on('channel3', (event, response) => {
console.log(response);
});
MessageChannel.handle('channel4', (event, response) => {
console.log(response);
return { res: 'channel4-res' };
});
})
});
const { ipcRenderer } = require('electron');
const { MessageChannel } = require('electron-re');
MessageChannel.on('channel1', (event, result) => {
console.log(result);
});
MessageChannel.handle('channel2', (event, result) => {
console.log(result);
return { response: 'channel2-response' }
});
MessageChannel.invoke('app2', 'channel3' (event, result) => {
console.log(result);
});
MessageChannel.send('app', 'channel4', { value: 'channel4' });
MessageChannel.handle('channel3', (event, result) => {
console.log(result);
return { response: 'channel3-response' }
});
MessageChannel.once('channel4', (event, result) => {
console.log(result);
});
MessageChannel.send('main', 'channel3', { value: 'channel3' });
MessageChannel.invoke('main', 'channel4', { value: 'channel4' });
const { ipcRenderer } = require('electron');
const { MessageChannel } = rrequire('electron-re');
MessageChannel.send('app', ....);
MessageChannel.invoke('app', ....);
MessageChannel.send('main', ....);
MessageChannel.invoke('main', ....);
III ) Example
electronux - this is a project of mine that uses electron-re
, also you can check the index.test.js
and test
dir in root, there are some cases, then run npm run test
to see test result of the library.