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

本文介绍了在Electron中的两个渲染器进程之间直接通信的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I create multiple windows from Electron's main process and need to pass messages between them. The only way I have come across to send messages from rendererA to rendererB is by bouncing it to main process. Is there any way to directly send a message from rendererA to renderB?

推荐答案

必须以某种方式涉及主进程，但是可以通过某种简单的方式来实现两个窗口的渲染器进程之间的通信:

In a way or another, the main process has to get involved, but communicating between the renderer processes of two windows can be achieved in some kind of straightforward way:

在主过程中，将窗口引用定义为全局对象的属性；

In the main process, define the window references as properties of the global object;

在每个渲染器进程中，使用remote.getGlobal()访问要向其发送消息的窗口的引用，然后使用send()方法；

In each renderer process, access the reference of the window you want to send a message to by using remote.getGlobal (), then use the send () method;

通常使用ipcRenderer.on()在每个渲染器进程中接收消息.

Use ipcRenderer.on () the usual way to receive the message in each renderer process.

这是一个电子应用程序的快速示例，该操作就是这样:

Here is a quick example of an Electron app which does just that:

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>

这篇关于在Electron中的两个渲染器进程之间直接通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！