在电子反应应用程序中多次触发 NodeJS 事件

Question

I have a package (Let's say PACKAGE_A ) written to do some tasks. Then it is required by PACKAGE_B . PACKAGE_A is a node script for some automation work. It has this Notifier module to create and export an EventEmitter. (The Whole project is a Monorepo)

const EventEmitter = require('events');

let myNotifier = new EventEmitter();

module.exports = myNotifier;

So in some functions in PACKAGE_A it emits event by requiring myNotifier , and also in the index.js of PACKAGE_A , I export functions (API exposed to the other packages) and the myNotifier by requiring it again.

const myNotifier = require('./myNotifier);

const func1 = () => {
    // some function
    return something;
}

module.exports = {func1, myNotifier}

Then I import the PACKAGE_A in PACKAGE_B and use the API functions exposed with the notifier. PACKAGE_B is an electron app with a React UI.

Below is how the program works.

I have a console output window in the electron app (React UI, UI_A ). <= (keep this in mind)

When I click a button in UI_A it fires a redux action ( button_action ). Inside the action, a notification is sent to an event which is listened in the electron code using ipcRenderer.

ipcRenderer.send('button-clicked', data); // <= this is not the full code of the action. It's bellow.

Then in the electron code (index.js), I require another file ( UI_A_COM.js which houses the code related to UI_A in electron side). The reason is code separation. Here's part of the code in index.js related to the electron.

const ui_a_com = require('./electron/UI_A_COM');

const createWindow = () => {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
        },
        resizable: false,
    });
    mainWindow.loadURL('http://localhost:3000');
    const mainMenu = Menu.buildFromTemplate(menuTemplate);
    ui_a_com (mainWindow);
};

Alright. Then in UI_A_COM.js , I listen to that triggered event button-clicked .

ipcMain.on('button-clicked', someFunction);

which runs the code from PACKAGE_A and return a result. So now when PACKAGE_A runs, it emits some events using myNotifier . I listen to them in the same file ( UI_A_COM.js ), and when those events are captured, I again send some events to React UI, which is subscribed when button_action fired.

myNotifier.on('pac_a_event_a', msg => {
    mainWindow.webContents.send('ui_event_a', msg); // code in `UI_A_COM.js`
});

Here's the full code for the action. (Did not provide earlier because you'll get confused)

export const buttonAction = runs => {
    return dispatch => {
        ipcRenderer.send('button-clicked', data);

        ipcRenderer.on('ui_event_a', (event, msg) => {
            dispatch({ type: SOME_TYPE, payload: { type: msg } });
        });

    };
};

This will show the msg in the UI_A console.

So this is the task I'm doing. The problem is when I click the button; it works perfectly for the first time. But when I click the button on the second time, it received two messages. Then when I click the button again, three messages and it keeps growing. (but the functions in the PACKAGE_A only executes one time per button press).

Let's say the message from PACKAGE_A emitted is 'Hello there' per execution.

When I press the button 1st time a perfect result => Hello there, When I click the button again => Hello there Hello there, When I click it again => Hello there Hello there Hello there.

It's kept so on. I think my implementation of EventEmitter has some flows. So why it's happening like this? Is it EventEmitter or something else? What am I doing wrong here?

Answer 1

I think you should return a function that call ipcRenderer.removeAllListeners() in your component's useEffect() . Because every time you click your custom button, the ipcRenderer.on(channel, listener) is called, so you set a listener to that channel agin and agin...

Example:

  useEffect(() => {
    electron.ipcRenderer.on('myChannel', (event, arg) => {
      dispatch({ type: arg });
    });
    return () => {
      electron.ipcRenderer.removeAllListeners('myChannel');
    };
  });

Answer 2

By default the electron-react boilerplate doesnt define the ipcRenderer.removeAllListeners method. So you have to first go to the main/preloads.ts file and add them:

removeListener(channel: string, func: (...args: unknown[]) => void) {
  ipcRenderer.removeListener(channel, (_event, ...args) => func(...args));
},
removeAllListeners(channel: string) {
  ipcRenderer.removeAllListeners(channel);
},

Then go to the renderer/preload.ts declaration file and add the declarations too:

removeListener(
  channel: string,
  func: (...args: unknown[]) => void
): void;
removeAllListeners(channel: string): void;

After that make sure to clean all listeners in the cleanup function of your useEffects each time you listen to an event fired. This will prevent multiple firing.

useEffect(() => {
  window.electron.ipcRenderer.on('myChannel', (event, arg) => {
    // do stuffs
  });
  return () => {
    window.electron.ipcRenderer.removeAllListeners('myChannel');
  };
});