Electron - 在主進程和渲染進程之間設置 IPC 通信

Question

我正在使用https://github.com/maxogden/menubar用 Electron 創建一個菜單欄桌面應用程序。 但是，我正在努力建立基本的 IPC 通信。 知道為什么下面的代碼不起作用嗎？ 為了澄清這一點，我希望在應用程序啟動時將test注銷到控制台，但事實並非如此。

應用程序.js

const { app } = require('electron');
const Menubar = require('menubar');

const menubar = Menubar.menubar({
  index: `file://${__dirname}/index.html`,
  preloadWindow: true,
  icon: './assets/img/icon.png',
});

try {
  require('electron-reloader')(module)
} catch (_) { }

app.on('ready', () => {
  menubar.window.webContents.send('test');
});

渲染器.js

const { ipcRenderer } = require('electron');

ipcRenderer.on('test', () => {
  console.log('test');
});

索引.html

<html>
<head>
  <title>Test</title>
  <script>
    require('./renderer')
  </script>
</head>
<body>
</body>
</html>

Answer 1

這可能是假陰性。

我希望在應用程序啟動時將測試注銷到控制台，但事實並非如此。

console.log調用的輸出位置取決於進行這些調用的位置：

從主線程：查看啟動應用程序的終端。
從渲染器線程：查看 Chrome DevTools 控制台。

因此，請確保您在正確的位置尋找預期的輸出。

如果這不起作用，那么這里有一個關於如何在主進程和渲染器進程之間設置 IPC 通信的小演示。

主文件

您會注意到我確實將nodeIntegration和contextIsolation為它們的默認值。 這樣做是為了明確表示您不需要降低應用程序的安全標准來允許主進程和渲染器進程之間的消息。

這里發生了什么？

主進程等待渲染器完成加載，然后發送“ping”消息。 IPC 通信將由預加載腳本處理。

請注意console.log調用並查看它出現在下面的截屏視頻中的位置。

const {app, BrowserWindow} = require('electron'); // <-- v15
const path = require('path');

app.whenReady().then(() => {
  const win = new BrowserWindow({
    webPreferences: {
      devTools: true,
      preload: path.resolve(__dirname, 'preload.js'),
      nodeIntegration: false, // <-- This is the default value
      contextIsolation: true  // <-- This is the default value
    }
  });
  win.loadFile('index.html');
  win.webContents.openDevTools();
  win.webContents.on('did-finish-load', () => {
    win.webContents.send('ping', '🏓');
  });
  // This will not show up in the Chrome DevTools Console
  // This will show up in the terminal that launched the app
  console.log('this is from the main thread');
});

預加載.js

我們正在使用contextBridge API。 這允許在不啟用nodeIntegration或破壞上下文隔離的情況下向渲染器進程公開特權 API。

API 將在一個非常愚蠢的命名空間 (BURRITO) 下可用，以明確您可以更改它。

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('BURRITO', {
  whenPing: () => new Promise((res) => {
    ipcRenderer.on('ping', (ev, data) => {
      res(data);
    });
  })
});

渲染器.js

使用預加載腳本提供的 API，我們開始偵聽 ping 消息。 當我們得到它時，我們將主進程通信的數據放在渲染器頁面中。 我們還會記錄一條消息，您可以在下面的截屏視頻中看到。

BURRITO.whenPing().then(data => {
  document.querySelector('div').textContent = data;
  // This will show up in the Chrome DevTools Console
  console.log(`this is the renderer thread, received ${data} from main thread`);
});

索引.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>IPC Demo</title>
  </head>
  <body>
    <div></div>
    <script src="./renderer.js"></script>
  </body>
</html>

運行應用程序：

npx electron main.js

您可以看到兩個console.log調用在兩個不同的地方產生了輸出。

Answer 2

要使用 IPC 通信，您必須啟用nodeIntegration 。 我會嘗試類似的東西

const menubar = Menubar.menubar({
  index: `file://${__dirname}/index.html`,
  preloadWindow: true,
  icon: './assets/img/icon.png',
  browserWindow:{
    webPreferences: {nodeIntegration: true},
  },
});

Electron - 在主進程和渲染進程之間設置 IPC 通信

問題描述

2 個解決方案

解決方案1
1 已采納 2021-10-17 19:19:57

解決方案2
-1 2021-10-17 16:22:39

Electron - 在主進程和渲染進程之間設置 IPC 通信

問題描述

2 個解決方案

解決方案1 1 已采納 2021-10-17 19:19:57

解決方案2 -1 2021-10-17 16:22:39

解決方案1
1 已采納 2021-10-17 19:19:57

解決方案2
-1 2021-10-17 16:22:39