How to electron main.ts call or send message to angular component

user_5693421 0
Viewed 845

I know how to send message or call function from angular app to electron main thread using ipc.

Bu I case I have some thread run in electron main thread like videos processing, and after some file complete process, electron require to send message and parameter for update angular GUI.

How can electron main thread (main.ts) call or invoke angular EventEmitter to send some data back to angular application.

electron angular
1 Answers

After trying to solve this action for a few day. The solution I for this scenario is just create ipcMain handle in main.ts and store event object for callback to angular.

Project folder structure:

  • electron project
    • angular app
      • app.com.ts
      • app.com.html
    • main.ts
    • myelectron.com.ts
    • EventStore.ts
    • myelectonProcess.com.ts
  1. in angular app 1.1 constructor - register callback ipcRenderer to receipt message from electron 1.2 constructor - call ipcMain in electron to force create event object.

  constructor(private electronService: ElectronService)
  {
    this.registerIPC();
  }

  registerIPC()
  {
      //register callback ipcRenderer to receipt message from electron
      this.electronService.ipcRenderer.on('my_process_msg', (event, result) => {
        this.processing = result;
        //TODO do you logic here
      });

      //call ipcMain in electron to force create event object.
      this.electronService.ipcRenderer.send('my_process_msg');
  }

  1. in electron main.ts when initialize just create myelectorn.com.ts object

//TODO your code

const main = () =>
{
  const myElec = new MyElectronCom();
  myElec.registerIpcMain();
}

//TODO your code

main();

  1. in myelectron.com.ts - constructor - register ipcMain.handle to receipt first time connection from angular. And store that event object as global object for used in other electron app to send message back to angular via event object.

export default class EventStore
{
  
  MyProcessEvent:any = null;

}

export default class MyElectonCom
{
  constructor()
  {
    this.registerIpcMain();
  }
  
  registerIpcMain()
  {
    //register to getEvent object for send scraping process status message.
        const {ipcMain} = require('electron');
        ipcMain.on('my_process_msg', (event) => {
            console.log('IPCMain event registered');
            
            //keep event object to resend again and again msg back to angular app.
            EventStore.MyProcessEvent = event;
            event.reply('my_process_msg', {progress:0, msg:'Registered'});
            
            //After this code and other class/coding can call EventStore.MyProcessEvent.send(....);
        });
  }

}

  1. in other code of electron developer can call event object to send data back to angular app.

export default class MyElectonProcessCom
{
  constructor()
  {
  }
  
  :
  :
  
  convertVideoFileProcessing(completedPercentage)
  {
    if(!empty(EventStore.MyProcessEvent){
        EventStore.MyProcessEvent.send('my_process_msg','Convert video to mp3 '+completedPercentage+'%');
    }
  }
  
  convertVideoFileCompleted()
  {
    if(!empty(EventStore.MyProcessEvent){
        EventStore.MyProcessEvent.send('my_process_msg','Convert video to mp3 completed');
    }
  }

}

user_56934210
Related