0. 들어가며
Electron은 main, renderer 두 개의 프로세스에 의해 동작한다. 이 두 프로세스에 대해 알아보고, 프로세스간 통신 즉, IPC(Inter Process Communication)를 다뤄본다.
1. main 프로세스와 renderer 프로세스
Electron으로 애플리케이션을 실행시킬 때, main 프로세스가 생성되는데, 이것은 OS의 native GUI와 상호작용하여 애플리케이션의 GUI를 만든다. 즉, main 프로세스는 native GUI 에 접근 가능하다. 또한 NodeJS 모듈도 접근가능하기 때문에 앱 개발이 용이하다.
그러나 단순히 main 프로세스를 실행시킨다고 애플리케이션 창이 만들어 지는 것은 아니다. 애플리케이션 창은 main 프로세스가 실행되는 main.js 파일 속 BrowserWindow 라는 모듈에 의해 만들어진다. 즉, BrowserWindow 모듈에 의해 생성된 객체 win 이 renderer 프로세스를 생성하는 것이다. 이 renderer 프로세스는 HTML로 코딩돼있고, CSS, JavaScript, 이미지 등을 불러옴으로서 창이 보여지게 된다.
요약하자면, main 프로세스는 실행시 생성되고 모든 웹 페이지(애플리케이션)를 관리한다. renderer 프로세스는 main 프로세스의 BroserWindow 모듈에 의해 생성되고, 각 win 객체는 각각의 애플리케이션 창을 독립적으로 render 한다.
2. IPC(Inter Process Communication)
Electron에는 ipcMain, ipcRender 라는 두 가지 IPC 모듈이 있다.
ipcMain 모듈은 main 프로세스에서 사용되는 된다. renderer 프로세스로부터 메시지를 받고, 응답할 수 있다. ipcRenderer 모듈도 마찬가지이다. renderer 에서 사용되며, main 프로세스로 메시지를 전달할 수 있고, 응답을 받을 수 있다. 참고로 이렇게 IPC로 메시지를 주고 받을 때 async(비동기), sync(동기) 두 가지 방식이 가능하다.
프로젝트 디렉토리를 하나 생성하고 main.js를 생성 후, 아래 소스코드를 입력하자. ipcMain 이벤트 핸들러는 아래에서 보면 알겠지만 첫 번째 인자는 메시지를 주고받기 위한 channel 이다. 두 번째 인자는 메시지가 renderer로부터 왔을 때 처리하는 callback function이다. callback function에서 async, sync일때 응답하는 방식이 다르다. async 일 때는 callback function에서 event.sender.send({channel}, {message_buffer}) 로 응답하고, sync 일 때는 event.returnValue = {message_buffer} 로 응답한다.
/* main.js */
const {app, BrowserWindow} = require('electron');
const {ipcMain} = require('electron');
let win;
function createWindow() {
win = new BrowserWindow({width: 800, height: 600});
/* load local .html file*/
win.loadURL(`file://${__dirname}/index.html`);
}
/* Event handler for asynchronous incoming messages */
ipcMain.on('asynchronous-message', (event, arg) => {
console.log(arg);
/* Event emitter for sending asynchronous messages */
event.sender.send('asynchronous-reply', 'async pong');
});
/* Event handler for synchronous incoming messages */
ipcMain.on('synchronous-message', (event, arg) => {
console.log(arg);
/* Synchronous event emmision in 10 sec */
setTimeout(()=> {
event.returnValue = 'sync pong';
}, 10*1000);
});
app.on('ready', createWindow);
<!-- index.html -->
<body>
<script>
const {ipcRenderer} = require('electron')
/* Synchronous message emmiter and handler */
console.log(ipcRenderer.sendSync('synchronous-message', 'sync ping'))
/* Blocked for 10 sec!!! as waiting for synchronous-message. */
/* Async message handler */
ipcRenderer.on('asynchronous-reply', (event, arg) => {
console.log(arg)
});
/* Async message sender */
ipcRenderer.send('asynchronous-message', 'async ping')
</script>
</body>
3. 결론
Electron은 main 프로세스, renderer 프로세스 두 프로세스에 의해 애플리케이션이 동작한다. 처음에 main 프로세스에 의해 애플리케이션이 실행된다. 이 후 창을 보이기 위해서는 BrowserWindow 모듈이 있어야 하고 이 모듈에 의해 renderer 프로세스가 생성된다. renderer는 HTML로 css. JavaScript, 이미지 등을 render 하는 것이다.
main, renderer 이 두 프로세스간 통신을 하기 위해서는 IPC 모듈을 사용한다. 통신방식에는 동기, 비동기가 있는데 NodeJS가 싱글 쓰레드이기 때문에 동기 방식으로 통신할 때는 주의한다.
4. 소스코드
https://github.com/hgs0426/electron/tree/master/ipc
5. 참고
[1] https://www.tutorialspoint.com/electron/
'Electron' 카테고리의 다른 글
| Electron, 간단한 메모장(simple notepad) 만들기 (0) | 2019.01.06 |
|---|---|
| Electron, 시스템 다이얼로그(System Dialog) (0) | 2018.12.23 |
| Electron, 애플리케이션 메뉴(Application Menu) (0) | 2018.10.28 |
| Electron, NodeJS Module 과 NPM Libraries 사용해보기 (0) | 2018.10.15 |
| Electron, 5 분 만에 'Hello, World' (0) | 2018.10.10 |