在 Electron 中的两个渲染器进程之间直接通信 [英] Communicate directly between two renderer processes in 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.
这是一个 Electron 应用程序的快速示例，它就是这样做的:
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 中的两个渲染器进程之间直接通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
