ElctronでIPC通信を実装しようとして
var ipc = require(‘ipc');
と書いてモジュールを読み込んだところ、
Uncaught Error: Cannot find module ‘ipc’
とのエラーが。
なんかElectronの仕様が変わり、書き方が変わってるらしいのでメモ。
Electronのバージョンはv1.4.13。
もくじ
対処法：ipcを直接requireせず、electron.ipcMainに変更する
対処として、ipcモジュールをrequireする部分のコードで、
|
1 |
var ipc = require(‘ipc'); |
と書いていたところを、以下のように直してやると動く。
|
1 2 |
electron = require(“electron"); var ipc = electron.ipcMain; |
クジラ飛行机さんの本でやってる人向け
現在、クジラ飛行机さんのご著書「JS+Node.jsによるWebクローラー/ネットエージェント開発テクニック」を読みながらクローラーを開発しているのですが、同じ本を読んでいる方向けに、第三章(p.127)のソースを書き直したものを載せておきます。
サンプルの動き
- レンダラープロセスから整数値を2つ、メインプロセスに同期通信、非同期通信のそれぞれで送信
- メインプロセスで送信された整数値を受け取り、それらを乗じたものを再びレンダラープロセスに返す
- メインプロセスから送られた結果を受け取り、画面に表示する
メインプロセス
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
// modules const electron = require("electron"); const app = electron.app; const BrowserWindow = electron.BrowserWindow; let mainWindow; const {ipcMain} = require('electron'); // 準備ができたタイミングで呼ばれるイベント app.on('ready',function(){ // メインウィンドウを作成 mainWindow = new BrowserWindow({width:800, height:600}); mainWindow.loadURL('file://' + __dirname + '/index.html'); mainWindow.on('closed',function(){ mainWindow = null; }); }); // 同期メッセージの受信 ipcMain.on('mul-sync', (event, arg) => { console.log(arg); // レンダラープロセスへ返信 event.returnValue = arg.a * arg.b; }); // 非同期メッセージの受信 ipcMain.on('mul-async', (event, arg) => { console.log(arg); // レンダラープロセスへ返信 var result = arg.a * arg.b; event.sender.send('mul-async-reply',result); }); |
レンダラープロセス
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ipc App</title> <script> // modules const {ipcRenderer} = require('electron'); var info; window.onload = function () { info = document.getElementById('info'); testSync(); testAsync(); }; function testSync(){ console.log("test sync"); // メインプロセスに引数を送信して回答を得る var res = ipcRenderer.sendSync('mul-sync', {a: 30, b: 2}); msg("sync result = " + res); } function testAsync(){ ipcRenderer.send('mul-async', {a: 30, b: 2}); // 非同期通信の結果を受けた時 ipcRenderer.on('mul-async-reply', (event, arg) => { msg("async result = " + arg); }); } function msg(msg){ var info = document.getElementById("info"); info.innerHTML += msg + " "; } // }; </script> </head> <body> <h1>ipc test app.</h1> <p id="info"></p> </body> </html> |
変更点
- ipcモジュールの読み込み箇所を
const {ipcRenderer} = require(‘electron’);と変更。 - レンダラープロセスとメインプロセスの区別がつきやすいように、それぞれの定数名を
ipcRenderer, ipcMainに - アロー関数で書けるところはアロー関数に
実行結果
本の通りに計算結果が表示されたのでひと安心！
感想とか
結構Electronの仕様が色々変わってるっぽいので、面倒くさがらずにちゃんと公式見ながらやったほうが良さげ。
あと、とにかく「JS+Node.jsによるWebクローラー/ネットエージェント開発テクニック」が面白い。買ってよかった！
参考にしたもの
Electron Documentation
https://electron.atom.io/docs/api/ipc-main/
Qiita – Electronでipcを使ってプロセス間通信を行う
http://qiita.com/Misumi_Rize/items/dde76dbf89abee13991c
