Electron-vue: How to use IPC?

[Zyles]

I have spent a few hours but can't get this to work.

Can you give some pointers on how to use IPC with this package?

Basic example:

Running a background process in index.js and want to send the data to a render processes and update the VueJS data in a view.

An example scenario is reading a log file with "tail" or polling on file system, and displaying the log file changes in a window.

Thanks.

[SimulatedGREG]

Using the default boilerplate with the initial landing page components, here's an example...

LandingPage.vue in a mounted hook

mounted () {
  setInterval(() => {
    this.$electron.ipcRenderer.send('ping')
  }, 1000)

  this.$electron.ipcRenderer.on('pong', (event, data) => {
    this.myDataVar = data
    console.log(data)
  })
}

main/index.js

ipcMain.on('ping', (event, data) => {
  event.sender.send('pong', Math.random())
})

This example will console.log the result of Math.random() from the main process every second in the renderer process dev tools.

[Zyles]

Thank you, this is really hard stuff.

One step closer.

[tregismoreira]

@SimulatedGREG I tried this, but I'm getting the following error:

Uncaught TypeError: Cannot read property 'ipcRenderer' of undefined

Do you have any idea why?

[tregismoreira]

My fault, I left a line out of the mounted hook. Sorry :P

[rafaelpimpa]

Putting it in the beforeCreate() hook (or even main.js) is better if you're emitting events that are too 'quick', e.g. electron-builder autoUpdater events.

[rahogata]

Hi when i used this approach with vue router to navigate between two components to and fro renderer listeners are exceeded. Is there any way to listen only once?

[nickfan]

renderer listeners are exceeded

i have the same issue, @shiva2991 have you resolved the problem?

[chiragshahklc]

You can either use mounted or beforeCreate hook. I personally prefer mounted hook.

  mounted() {
   this.$electron.ipcRenderer.on("ping", (event, msg) => {
      console.log(msg);
      event.reply("pong", "ping-pong");
    });
  },
  destroyed() {
    this.$electron.ipcRenderer.removeAllListeners();
  }

When switching between components using vue-router, destroyed hook helps with removing listeners. This will make sure that listeners will not be register multiple times as they have been already de-register before.

For reference
https://electronjs.org/docs/api/ipc-main
https://electronjs.org/docs/api/ipc-renderer

[nickfan]

@chiragshahklc thx.

[rahogata]

@nickfan sorry for the late reply, I solved that issue by removing all listeners in beforeDestroy() hook method.

[richirich999]

Is there any way, To listen to messages sent from Main to renderer in Vuex

[abhimatta]

You can either use mounted or beforeCreate hook. I personally prefer mounted hook.

  mounted() {
   this.$electron.ipcRenderer.on("ping", (event, msg) => {
      console.log(msg);
      event.reply("pong", "ping-pong");
    });
  },
  destroyed() {
    this.$electron.ipcRenderer.removeAllListeners();
  }

When switching between components using vue-router, destroyed hook helps with removing listeners. This will make sure that listeners will not be register multiple times as they have been already de-register before.

For reference
https://electronjs.org/docs/api/ipc-main
https://electronjs.org/docs/api/ipc-renderer

Removing removeAllListener() doesn't work for me. I am switching routes and when I'm coming on the component second time, the event is firing multiple times