[Electron] 메인 프로세스와 UI 통신 방법

 

    - 일렉트론 main process(main.js) 와  render process(UI, main.htm) 프로세스간 통신

//---------------------------------------------

    - main.htm ( render process(UI))

 

<button onclick="send()">Send</button>

 

<script>

 

    //Main 프로세스와 통신

    const { ipcRenderer } = require('electron');

 

    // Main 프로세스로부터 수신(받기)

    ipcRenderer.on('main-send', (event, arg) => {

        console.log(arg); 

    });

 

    function send() {
        console.log(`UI 송신`);
        // Main 프로세스로 송신(보내기)
        ipcRenderer.send('ui-send', "from UI -> Main");
    }

</script>

//---------------------------------------------

    - Main 프로세스 (main.js)

 

//-----------------------

    //UI와 통신

    const { ipcMain } = require('electron');

 

    // UI(렌더) 프로세스로부터 수신(받기)

    ipcMain.on('ui-send', (event, arg) => {

        console.log(arg);

 

       

        //----------------------------------

        // UI(렌더) 프로세스로 송신(보내기)

 

        //보내기 방법 1

        //event.sender.send('main-send', "from Main -> UI");

        

        // 보내기 방법 2

        BrowserWindow.getFocusedWindow().webContents.send('main-send', "from Main -> UI 2");

    });

//----------------------

// 참고

https://ourcodeworld.com/articles/read/537/how-to-execute-a-function-of-the-main-process-inside-the-renderer-process-in-electron-framework