Ionic, Electron and IPC

Ionic Framework ionic-v3
1

Electron provides a way for users to access data via the use of ipc to communicate asynchronously between the main process to renderer process.

These methods are referred to as ipcMain and ipcRenderer and what I have done in my application is to grab data in ipcMain from Electron and I’m attempting to transfer it to Ionic via ipcRenderer.

The snippet of code from the Electron end looks something like this:

win = new BrowserWindows({
    width: 800,
    height: 600
})

let contents = win.webContents

contents.send("test_channel","ping")

Normally, you will be able to get the data in your renderer.js for Electron by doing this:

const {ipcRenderer} = electron;

ipcRenderer.on("test_channel",function(event,arg){
    console.log(arg); // This should print ping
}

What I am attempting to do is to transfer this data to Ionic, I ran a similar process like so:

    this.ws = electron.ipcRenderer.on("test_channel",function(event,arg){
        console.log(arg); // Does not print ping
    }

So, I was wondering whether or not anyone has any insight into making ipc work across Ionic and Electron? Also, if it is not possible can anyone direct me as to why?

Thank you very much.

2

Hi, I too am trying to get ipc working.
I am getting this error:
TypeError: fs.readFileSync is not a function

Do you get that as well?

3

Hi shepard,

Yes, I got that error, have you imported Electron into Ionic? If so, how did you do it?

4

Hi wtoa,

I cannot say if this is the right way but I got Ionic & Electron working using the description on this thread:
Ionic & Electron

But it could be the way I set it up that is causing IPC not to be working, not sure.

5

Try adding this to your index.html

  <script>
    const electron = require('electron');
  </script>

Then on an Ionic .ts file

declare var electron : any;

export class SampleClass {
    constructor(){
        electron.ipcRenderer.send("test_channel","ping");
    }
}

Then on your electron.js file, listen to it, hopefully you receive the ping!

function createWindow(){
    ...

    ipcMain.on("test_channel",function(err,arg){
        console.log("Received message: "+arg);
    }

    ...
}

Let me know how it goes!

6

Hi, thanks for the help.

<script>
const electron = require('electron');

Using that in the index file causes the error: “ReferenceError: require is not defined”

<script src="electron.js"></script> takes care of that error but electron is not defined in the .ts file.

I also tried:
declare let require: any;
const {ipcRenderer} = require(‘electron’)
…which worked further but produces my original problem of “fs.readFileSync is not a function”

I suspect there may be more needed in the app.module.ts but maybe you have another thought?

7

Hi shepard,

I have just made a repository containing basic code that allows ipc between Electron and Ionic :slight_smile:

Try cloning it and see if it works out for you. Tested on Ubuntu 16.04 and it seems to work fine for me.

1 Like
8

Hi wtoa,

When I try your repository, electron opens up an editor. Must be the way I setup Electron.

When I follow the instructions here: setup it works no problem using npm install && npm start

If I try that with yours, it opens a text editor.
I tried installing globally but with same results. (npm install electron -g )
If you have Electron installed globally, what command did you use?
Thanks.

9

Ok, I kind of have it working. I used the quick-start template and used your electron and index files with my own ionic and it seems to be working.
Not sure yet but it may have been where I included electron in the index file.
Oddly, the electron.js does not send messages to the console. It receives the message from the ipcRenderer and sends it back but does not display the console.log. But it does call functions and I can open files from an ionic page.

This is a great start and I thank you very much for proving it to me. Cheers!

10

Glad to hear you have it working! :slight_smile:

The console.log from electron.js is displayed on the terminal whereas the console.log from Ionic are shown on the Electron window itself.

11

Ha, ya I should have been paying closer attention. Too happy to be eyeballing the app working.
Thanks again - Cheers!