Передача данных в Windows в электронном

Я изучаю 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.

ОТВЕТЫ

Ответ 1

Для отправки событий в конкретное окно вы можете использовать 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);
});

Ответ 2

Для этого вам нужен модуль 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()