Я изучаю Electron и работаю с несколькими окнами и IPC. В моем основном скрипте у меня есть следующее:
var storeWindow = new BrowserWindow({
width: 400,
height: 400,
show: false
});
ipc.on('show-store-edit', function(event, store) {
console.log(store);
storeWindow.loadURL('file://' + __dirname + '/app/store.html');
storeWindow.show();
});
И в моем основном окне скрипта у меня есть следующий внутри обработчика события щелчка, вытягивая список магазинов:
$.getJSON("http://localhost:8080/stores/" + item.id).done(function(store) {
ipc.send('show-store-edit', store);
});
На консоли я печатаю данные магазина с моего сервера. Что мне неясно, так это как storeWindow:store.html эти данные в представление для моего storeWindow:store.html. Я даже не уверен, что правильно обрабатываю последовательность событий, но они будут:
или же
В последнем я не уверен, как получить идентификатор, необходимый для извлечения магазина из storeWindow's.
Для отправки событий в конкретное окно вы можете использовать webContents.send(EVENT_NAME, ARGS) (см. Документы). webContents - это свойство экземпляра окна:
// main process
storeWindow.webContents.send('store-data', store);
Чтобы прослушать отправку этого события, вам нужен слушатель в оконном процессе (рендерер):
// renderer process
var ipcRenderer = require('electron').ipcRenderer;
ipcRenderer.on('store-data', function (event,store) {
console.log(store);
});
Для этого вам нужен модуль ipcMain... Как указано в API "При использовании в основном процессе он обрабатывает асинхронные и синхронные сообщения, отправленные из процесса рендерера (веб-страница). Сообщения, отправленные из рендерера, будут переданы этому модуль. "
Документы API для модуля ipcMain: https://electronjs.org/docs/api/ipc-main
Чтобы использовать ipcMain, вам нужно включить nodeIntegration в webPreferences
win = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
}
})
Будьте осторожны, это может вызвать проблемы с безопасностью.
Например: допустим, мы хотим передать файл конфигурации (json) на веб-страницу
(Тройные точки (...) представляют ваш код, который уже находится внутри файла, но не относится к этому примеру)
main.js
...
const { readFileSync } = require('fs') // used to read files
const { ipcMain } = require('electron') // used to communicate asynchronously from the main process to renderer processes.
...
// function to read from a json file
function readConfig () {
const data = readFileSync('./package.json', 'utf8')
return data
}
...
// this is the event listener that will respond when we will request it in the web page
ipcMain.on('synchronous-message', (event, arg) => {
console.log(arg)
event.returnValue = readConfig()
})
...
index.html
...
<script>
<!-- import the module -->
const { ipcRenderer } = require('electron')
<!-- here we request our message and the event listener we added before, will respond and because it JSON file we need to parse it -->
var config = JSON.parse(ipcRenderer.sendSync('synchronous-message', ''))
<!-- process our data however we want, in this example we print it on the browser console -->
console.log(config)
<!-- since we read our package.json file we can echo our electron app name -->
console.log(config.name)
</script>
Чтобы увидеть консоль браузера, вам нужно открыть инструменты разработчика из меню Electron по умолчанию или из вашего кода. например внутри функции createWindow()
win.webContents.openDevTools()