Electron - throttle flow of messages from main to render process

Question

I am currently having some issues receiving an constant stream of active windows from my main process to my renderer process (in Angular). I know receiving second-by-second updates will break my app as it does, so I am trying to throttle it a bit using setTimeout. But this still doesn't work. How can I fix this?

renderer - component in Angular

  ipc: IpcRenderer | undefined | null;

  constructor(private electronService: ElectronService) { }

  ngAfterViewInit(): void {
    this.getActiveWindow();
  }

  getActiveWindow() {
    while(this.electronService.isElectronApp) {
      this.ipc = this.electronService.ipcRenderer;
      this.ipc.send('get-active-window');
      this.ipc.on('get-active-window-reply', (_event, reply) => {
        console.log(reply);
      });
    }
  }

main.js

const activeWindows = require('electron-active-window');

ipcMain.on('get-active-window', (_event, _arg) => {
  let i = 0;
  setTimeout(function () {
    activeWindows().getActiveWindow().then((result) => {
      win.webContents.send("get-active-window-reply", result)
    })
  }, 10000 * i)
});

So far I've tried the following, but this only displays the active window once. I'd like to keep track of all the changes:

renderer - component in Angular

 ngOnInit(): void {
    this.getActiveWindow();
  }

  getActiveWindow() {
    if(this.electronService.isElectronApp) {
      this.ipc = this.electronService.ipcRenderer;
      this.ipc.send('get-active-window');
      this.ipc.on('get-active-window-reply', (_event, reply) => {
        console.log(reply);
      });
    }
  }

main.js

ipcMain.on('get-active-window', (_event, _arg) => {
  activeWindows().getActiveWindow().then((result) => {
    win.webContents.send("get-active-window-reply", result)
  });
});

Answer 1

You're only receiving the active windows once because you're only requesting them once in your ngOnInit.

So in my opinion you've currently two options.

1. You're requesting the information every few seconds from the client
2. You let your Electron application notify the client about the windows

Option 1: (only solution afaik)

render.component

import { interval } from 'rxjs';

...

getActiveWindow() {
  if(this.electronService.isElectronApp) {
    this.ipc = this.electronService.ipcRenderer;
    
    this.ipc.on('get-active-window-reply', (_event, reply) => {
      console.log(reply);
    });

    // A request directly to get "instant" feedback
    this.ipc.send('get-active-window');

    // You could also use setInterval but I prefer rxjs more ;)
    // Don't forget to unsubscribe in ngOnDestroy
    interval(2000).subscribe(() => {
      this.ipc.send('get-active-window');
    });
  }
}

This solution creates a lot of overhead since you don't need to update the active windows every few seconds, so I do not recommend this one.

Option 2 (recommended not working):

main.js

// Sends a message every time a BrowserWindow is created
app.on('browser-window-created', (event, window) => {
  this.sendActiveWindows();
});

// Respond to the client request
ipcMain.on('get-active-window', (_event, _arg) => {
   this.sendActiveWindows();
});

// Helper function
sendActiveWindows(){
  activeWindows().getActiveWindow().then((result) => {
    win.webContents.send("get-active-window-reply", result)
  });
}

If you need also the information when a windows is being closed you need to add a listener to BrowserWindow.on('closed',...) (more here) and notify your client then as well.

render.component.ts (only comments added)

getActiveWindow() {
  if(this.electronService.isElectronApp) {
    this.ipc = this.electronService.ipcRenderer;
    // Request the currently active windows, 
    // otherwise this info is missing until new window is created
    this.ipc.send('get-active-window');
    this.ipc.on('get-active-window-reply', (_event, reply) => {
      console.log(reply);
    });
  }
}

This solution is more suitable since your client is only getting notified if the number of windows changes, so I do recommend this one

Update

After clarifying the problem in the chat you cannot use option 2 since you want to detect the active windows of the OS and not of your Electron app. Due that info option 1 is the only valid solution here