1. 程式人生 > >如何實現electron多頁面間通信

如何實現electron多頁面間通信

log 行數 something 分享圖片 lec 分享 技術方案 com 代碼實現

如何實現electron多頁面間通信

1,業務需求:

總共有兩個頁面,頁面A顯示數據,頁面B處理數據,主線程Main

2,實現的技術方案:

在主線程中打開頁面A和B,B頁面不進行顯示,主要負責處理從A頁面發送到主線程Main上的數據,然後B將數據處理完成之後,再次將數據送到主線程Main上,主線程Main將數據再將數據轉發到頁面A上,頁面A進行數據展示。

註意:在electron中頁面A和頁面B無法進行通信。必須依托於上述解決方案。

3,多頁面消息傳遞流轉圖

技術分享圖片

4,偽代碼實現

主線程

const {ipcMain} = require(‘electron‘)
ipcMain.on(‘send-message-A‘, (event, arg) => {
    ipcMain.on(
‘send-message-B‘,(eventB,argB)=>{ eventB.sender.send(‘send-message-B-reply‘, arg) ipcMain.on("send-message-B-dealData",(ev,ar)=>{ event.sender.send(‘send-message-A-dealData‘, ar) }) }) });

頁面A

const {ipcRenderer} = require(‘electron‘)

ipcRenderer.send(
‘send-message-A‘, ‘someData‘) ipcRenderer.on(‘send-message-A-dealData‘, (event, arg) => { //get arg and do something console.log(arg) });

頁面B

const {ipcRenderer} = require(‘electron‘)

ipcRenderer.send(‘send-message-B‘, ‘someData‘);
ipcRenderer.on(‘send-message-B-reply‘, (event, arg) => {
    
//get arg and do something //dealData ipcRenderer.send(‘send-message-B-dealData‘, arg); // event.sender.send(‘send-message-B-dealData‘, arg);//或者使用此方法 });

如何實現electron多頁面間通信