В Electron для организации общения между основным процессом и рендерером используются IPC (Inter-Process Communication) методы. Давайте рассмотрим, как правильно настроить передачу данных между основным процессом, рендерером и предзагрузочным скриптом, опираясь на примеры вашей структуры.
### Структура файлов
1. **electron-main.js** - основной файл, где создается окно приложения.
2. **electron-preload.js** - скрипт, который позволяет безопасно взаимодействовать между основным процессом и рендерером.
3. **App.vue** - компонент Vue, в котором будет происходить взаимодействие с пользователем.
### Пример настройки IPC
#### `electron-main.js`
Это основной процесс вашего приложения. Здесь мы создаем окно и определяем обработчики событий IPC.
```javascript
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'electron-preload.js'),
contextIsolation: true, // Обязательно, если используете preload
enableRemoteModule: false, // Лучше не использовать remote
},
});
win.loadURL('http://localhost:8080'); // URL вашего приложения
}
// Обработчик для получения сообщений от рендерера
ipcMain.on('get-data', (event) => {
const data = { message: 'Hello from main process!' };
event.sender.send('data-reply', data); // Отправляем ответ обратно в рендерер
});
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
```
#### `electron-preload.js`
Этот файл служит «прослойкой» между рендерером и основным процессом. Здесь мы можем настроить безопасный доступ к IPC.
```javascript
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electron', {
sendMessage: (channel, data) => {
// ограничение каналов, чтобы избежать несанкционированного доступа
const validChannels = ['get-data', 'data-reply'];
if (validChannels.includes(channel)) {
ipcRenderer.send(channel, data);
}
},
receiveMessage: (channel, func) => {
const validChannels = ['data-reply'];
if (validChannels.includes(channel)) {
ipcRenderer.on(channel, (event, ...args) => func(...args));
}
}
});
```
#### `App.vue`
В вашем компоненте Vue вы можете отправлять и получать сообщения следующим образом:
```vue
<template>
<div>
<button @click="requestData">Получить данные</button>
<p>{{ response }}</p>
</div>
</template>
<script>
export default {
data() {
return {
response: ''
};
},
methods: {
requestData() {
// Отправляем сообщение в основной процесс
window.electron.sendMessage('get-data');
}
},
mounted() {
// Получаем данные от основного процесса
window.electron.receiveMessage('data-reply', (data) => {
this.response = data.message; // Обновляем состояние компонента
});
}
};
</script>
```
### Объяснение кода
1. **Основной процесс (`electron-main.js`)**:
- Создаем окно браузера с настройками `webPreferences`, включая `preload`.
- Устанавливаем обработчик `ipcMain.on` для прослушивания сообщений от рендерера и отправляем ответ через `event.sender.send`.
2. **Предзагрузочный скрипт (`electron-preload.js`)**:
- Защищаем доступ к `ipcRenderer` через `contextBridge` и создаем функции для отправки и получения сообщений, проверяя допустимые каналы.
3. **Vue компонент (`App.vue`)**:
- Используем методы для отправки и получения сообщений через наш объект `electron`, который мы создали в предзагрузочном скрипте.
Эта структура кода позволит вам корректно обрабатывать сообщения между основным процессом и рендерером в Electron приложении. Убедитесь, что вы используете правильные каналы и соответствующие методы для передачи данных.