Vue + Electron IPC 통신

Electron은 Main Process와 Renderer Process로 이루어져있다. 웹 페이지를 보여주기 위해 Chromium을 사용하기 때문에 Chromium의 멀티프로세스 아키텍쳐를 그대로 사용한다. Electron 안에서 보여지는 각각의 웹페이지는 자신의 프로세스 안에서 동작하는데, 이 프로세스가 Renderer Process이다. 일반적으로 브라우저에서 웹페이지는 보통 샌드박스 환경에서 실행되고 네이티브 리소스에는 엑세스 할 수 없다. 그렇기 때문에 IPC 통신을 통하여 Node.js의 API를 사용할 수 있다. 참고 1

Vue config 수정

vue.config.js를 수정해야 한다. 이 곳을 참고

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true
    }
  }
}

혹은

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
    },
  },
});

위와 같이 수정한다.

App.js 수정

template에 버튼을 추가하고 메소드를 연결한다.

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <button @click="test">테스트</button>
  <router-view />
</template>

스크립트 부분을 아래와 같이 수정한다.

export default {
  methods: {
    test() {
      const { ipcRenderer } = require("electron");
      console.log(ipcRenderer.sendSync("synchronous-message", "ping")); // "pong"이 출력됩니다.

      ipcRenderer.on("asynchronous-reply", (event, arg) => {
        console.log(arg); // "pong"이 출력됩니다.
      });
      ipcRenderer.send("asynchronous-message", "ping");
    },
  },
};

background.js 수정

'use strict';

import { app, protocol, BrowserWindow, ipcMain } from 'electron';

...

ipcMain을 추가한다.

...

ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg); // "ping" 출력
  event.reply('asynchronous-reply', 'pong');
});

ipcMain.on('synchronous-message', (event, arg) => {
  console.log(arg); // "ping" 출력
  event.returnValue = 'pong';
});

참고

실행

$ npm run electron:serve
## or ##
$ yarn electron:serve

프로젝트를 실행하면 아래와 같이 테스트 버튼이 정상적으로 작동하는 것을 확인할 수 있다.