在 Electron 中的两个渲染器进程之间直接通信答案

【问题标题】：Communicate directly between two renderer processes in Electron在 Electron 中的两个渲染器进程之间直接通信
【发布时间】：2018-05-05 03:14:43
【问题描述】：

我从 Electron 的主进程创建了多个窗口，并且需要在它们之间传递消息。我遇到的将消息从 rendererA 发送到 rendererB 的唯一方法是将其反弹到主进程。有什么办法可以直接从renderA发送消息给renderB？

【问题讨论】：

我不知道 Electron 的 IPC 功能。

标签： electron ipc

【解决方案1】：

在某种程度上，主进程必须参与其中，但两个窗口的渲染器进程之间的通信可以通过某种直接的方式实现：

在主进程中，将窗口引用定义为全局对象的属性；
在每个渲染器进程中，通过remote.getGlobal()访问你要发送消息的窗口的引用，然后使用send()方法；
在每个渲染器进程中使用ipcRenderer.on()通常的方式接收消息。

这是一个quick example of an Electron app，它就是这样做的：

main.js：

const { app, BrowserWindow } = require ('electron');
global.window1 = null;
global.window2 = null;
function onAppReady ()
{
    window1 = new BrowserWindow ({ width: 600, height: 500 });
    window1.loadURL (`file://${__dirname}/index1.html`);
    window1.webContents.openDevTools ();
    window1.on ('closed', () => { window1 = null; });
    //
    window2 = new BrowserWindow ({ width: 500, height: 600 });
    window2.loadURL (`file://${__dirname}/index2.html`);
    window2.webContents.openDevTools ();
    window2.on ('closed', () => { window2 = null; });
}
app.on ('ready', onAppReady);
app.on ('window-all-closed', () => { app.quit (); });

index1.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Window 1</title>
  </head>
  <body>
    <h1>Window 1</h1>
    <button type="button" class="send-message">Send Message to Window 2</button>
    <script>
        const { remote, ipcRenderer } = require ('electron');
        //
        let button = document.querySelector ('.send-message');
        button.addEventListener ('click', () =>
        {
            let window2 = remote.getGlobal ('window2');
            if (window2) window2.webContents.send ('message', "Message from Window 1");
        });
        //
        ipcRenderer.on ('message', (event, message) => { console.log (message); });
    </script>
  </body>
</html>

index2.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Window 2</title>
  </head>
  <body>
    <h1>Window 2</h1>
    <button type="button" class="send-message">Send Message to Window 1</button>
    <script>
        const { remote, ipcRenderer } = require ('electron');
        //
        let button = document.querySelector ('.send-message');
        button.addEventListener ('click', () =>
        {
            let window1 = remote.getGlobal ('window1');
            if (window1) window1.webContents.send ('message', "Message from Window 2");
        });
        //
        ipcRenderer.on ('message', (event, message) => { console.log (message); });
    </script>
  </body>
</html>

【讨论】：

我刚刚在我的电子应用程序中测试了您的“直接消息流”代码，其中包含一个主窗口和一个隐藏的工作渲染器进程窗口，工作人员向主窗口发送大量消息。它工作得很好，但比以前慢了（~5 倍）。在我将所有消息发送到主进程之前，主进程将它们分派到主渲染器窗口。我想这与let window2 = remote.getGlobal ('window2'); 有关

【解决方案2】：

基本上，在电子中，进程之间的通信有三种形式：

main -> 渲染器：webContents.fromId(id).send() 在发送方，ipcRenderer.on 在接收方
renderer -> main: ipcRenderer.send() 在发送方，ipcMain.on 在接收方
渲染器 -> 渲染器：ipcRenderer.sendTo() 在发送方，ipcRenderer.on 在接收方

所以在渲染器到渲染器的场景中，发送者必须知道目的地的 webContents.id，然后通过ipcRenderer.sendTo() 调用它到/从它

我已经做了一个电子ipc框架electron-ipcfy，它统一了上面所有三个场景中的ipc调用。

import { ipcfy } from "electron-ipcfy";

interface TestService {
    greet(name: string);
}

const testService = ipcfy<TestService>('test');

if (process.type == 'browser') {
    // Attach implementation
    testService.__attachImpl(
        new class implements TestService {
            greet(name: string) {
                console.log(`Hello, ${name}!`);
            }
        });
}

// Then you can call it in any process
testService.greet('world');

【讨论】：

sendTo 仍会经过主进程吗？

【解决方案3】：

这取决于你的通信系统的逻辑。

例如，如果您总是要从 BrowserWindow2 向 BrowserWindow4 发送数据，您可以在 BrowserWindow4 中声明 ipcMain，在 BrowserWindow2 中声明 ipcRenderer。

如果您必须从所有 BrowserWindows 向所有其他浏览器发送消息，我建议您使用主进程并将消息发送到 BrowserWindows（使用亲属 ID）

在您的消息接收者中：

ipcMain.on('asynchronous-message', (event, arg) => {
   //manage data
}

在您的消息发件人中：

ipcRenderer.send('asynchronous-message', message)

ipcMain doc

ipcRenderer doc

【讨论】：

在 BrowserWindow4 中声明 ipcMain 是什么意思？能具体点吗？
我添加了一些信息，请问您是否需要澄清:)