Electron 第2回

エンジニアの信尾海翔です。
第六回目のブログでは第五回目に引き続き、Electronについてまとめたいと思います。
今回の内容はElectronのプロセス間通信についてです。

Electronのプロセス間通信についてには大きく分けて二つのプロセスがあります。

メインプロセス　→　Electron独自のアプリケーションを制御する機能が使える

レンダラープロセス　→　アプリケーションのレイアウトを整える役割を持つ、メインプロセスが持つような機能を使うことはできない

Electron第一回で登場した


function createWindow(){
    win = new BrowserWindow();
    win.loadFile('index.html');
}

ウィンドウを生成


app.on('ready', createWindow);

アプリケーション起動時に関数createWindowを呼び出す…などはメインプロセスの機能になります。

プロセス間通信を行う際はipcMain、ipcRendererを使います。
メインプロセスではipcMain、レンダラープロセスではipcRendererを使います。

レンダラープロセス側でメッセージの送信

まずレンダラープロセス側でメインプロセスに対してメッセージを送信します。


ipcRenderer.send('time');

今回は例としてtimeという文字列を送信しています。

メインプロセス側でメッセージを受信、返信する

次にメインプロセス側でメッセージを受信、返信します。


ipcMain.on('time', (event) => {
    var result = new Date();
    event.reply('time-result' ,result);
});

第一引数にはどのメッセージを受信した時に処理を行うかを指定します。
今回は先ほどレンダラープロセス側で送信したtimeという文字列にします。
第二引数には実行したい処理を記述します。


event.reply('time-result' ,result);

第二引数内のevent.replyではレンダラープロセス側にメッセージを返信しています。
event.replyの第一引数にはどんなメッセージを送信するか、第二引数には送信したい値を指定しています。
メッセージにtime-resultという文字列、送信したい値に現在の時間を設定しています。

レンダラープロセスで返信されたメッセージを受け取る

最後にメインプロセスから返信されたメッセージをレンダラープロセス側で受け取ります。


ipcRenderer.on('time-result', (event ,arg)=>{
        console.log(arg);
});

第一引数にはどのメッセージを受信した時に処理を行うかを指定、第二引数には実行したい処理を記述します。
argには先ほどメインプロセス側で送信した、現在の時間が入っています。

簡単に流れをまとめると

となります。

プロセス間通信に関してはまだまだ勉強不足でメインプロセス、レンダラープロセスの各役割をしっかり意識して開発できるようになりたいです…
次回はElectron第三回としてウィンドウ、メニューにの扱いについて勉強してまとめたいと考えています。

Blogブログ