gpt4 book ai didi

javascript - Electron 中2个浏览器窗口之间的通信

转载 作者:行者123 更新时间:2023-12-03 12:19:44 24 4
gpt4 key购买 nike

我需要构建一个跨越多个监视器屏幕的应用程序,如下所示:
multiple windows on different monitors
Electron 支持多个窗口,但我如何在它们之间进行通信?

最佳答案

要记住的主要事情是,在 Electron 中,进程间通信是由 ipcMain(在主进程中)和 ipcRenderer(在所有创建的窗口中)完成的。如下所示:
enter image description here
从我在 GitHub 评论中看到的 - 渲染器实例之间的直接通信是不允许的。一切都必须通过 mainProcess。
编码:
mainProcess.js:

function createWindow1 () {
window1 = new BrowserWindow({width: 800,height: 600})
window1.loadURL(`file://${__dirname}/window1.html`)
window1.webContents.openDevTools()
window1.on('closed', function () {
window1 = null
})
return window1
}
function createWindow2 () {
window2 = new BrowserWindow({width: 1000, height: 600})
window2.loadURL(`file://${__dirname}/window2.html`)
window2.webContents.openDevTools()
window2.on('closed', function () {
window2 = null
})
return window2
}

app.on('ready', () => {
window1 = createWindow1();
window2 = createWindow2();

ipcMain.on('nameMsg', (event, arg) => {
console.log("name inside main process is: ", arg); // this comes form within window 1 -> and into the mainProcess
event.sender.send('nameReply', { not_right: false }) // sends back/replies to window 1 - "event" is a reference to this chanel.
window2.webContents.send( 'forWin2', arg ); // sends the stuff from Window1 to Window2.
});
window1.html:
<body>
<input type="text" id="name" value="" placeholder="Enter your name">
<button type="button" id="sendName" >Send the name! </button>
</body>
<script>
// You can also require other files to run in this process
require('./window1.js')
</script>
window1.js:
const ipcRenderer = require('electron').ipcRenderer

let name = document.getElementById('name');

ButtonSendName = document.getElementById('sendName');
ButtonSendName.addEventListener('click', (event) => {
ipcRenderer.send('nameMsg', name.value);
})

ipcRenderer.on('nameReply', (event, arg) => {
console.log(arg) // why/what is not right..
});
窗口2.html:
<body>
<p id = "showName"></p>
</body>

<script>
require('./window2.js')
</script>
window2.js:
const { ipcRenderer } = require('electron')

showName = document.getElementById('showName')
ipcRenderer.on('forWin2', function (event, arg){
console.log(arg);
showName.innerHTML = arg;
});
console.log("I'm Window2");
演示会更好,但我不知道如何构建 Electron CodeBin 应用程序。这张图给你一个想法:
enter image description here
享受 Electron 的力量!

关于javascript - Electron 中2个浏览器窗口之间的通信,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40251411/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com