[electron-nuxt] windowHandler, browser 데이터 전송

일렉트론을 개발하면서 시리얼포트, 듀얼모니터 등 내부 프로그램과 브라우저간의 데이터 통신이 필요한 경우가 있다. 

해당 경우에 대해서 간략하게 정리해 보고자 한다. 

 

우선 windowHandler ipcMain을 통해서 통신을 하기 위해 정의하고 

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

browser window가 생성되고 나서 혹은 constructor에 eventListener를 정의한다.

ipcMain.on('event-name', (e, args) => {   })

이러면 데이터 수신 받을 준비 끝.

javascript에서는 정의한 이벤트를 트리거 시켜주면 된다. 

 

import electron from "electron"

... 

electron.ipcRenderer.send('event-name', args)

args로 전달한 데이터가 ipcMain.on의 args로 전달되어 전송된다. 

 

반대로 윈도우 브라우저에서 자바스크립트로 데이터를 전송하기 위해서는 

자바스크립트에서 우선 수신 받기 위해 이벤트 리스너를 정의한다. 

import electron from "electron"

...

electron.ipcRenderer.on('event-name', (e, args) => { })

받을 페이지, 컴포넌트의 create, mount 타이밍에 선언하여 이벤트 수신을 준비한다. 

이후 윈도우 핸들러에서 

    this.browserWindow = new BrowserWindow(
        {
            ...this.options,
            autoHideMenuBar: true,
            // fullscreen: true,
            closable: false,
            webPreferences: {
                ...this.options.webPreferences,
                webSecurity: isProduction, // disable on dev to allow loading local resources
                nodeIntegration: true, // allow loading modules via the require () function
                contextIsolation: false, // https://github.com/electron/electron/issues/18037#issuecomment-806320028
            }
        }
    )



...

this.browserWindow.webContents.send('event-name', args)

위 코드 처럼 선언된 이벤트를 트리거 해주면 된다. 

끝.