electron通讯

时间:2022-06-18 18:49:32

Electron桌面应用实现两个窗口(渲染进程)之间的通讯,传输数据:

方法1在两个网页(渲染进程)间共享数据最简单的方法是使用浏览器中已经实现的 HTML5 API。 其中比较好的方案是用 Storage API, localStoragesessionStorage 或者 IndexedDB

方法2使用Electron 内的 IPC 机制实现。将数据存储在主进程的某个全局变量中,然后在多个渲染进程中使用 remote 模块来访问它。例:

//主进程中

Global.saveData = { shareData: data};

//在窗口1设置修改数据

require('electron').remote.getGlobal(‘saveData’). shareData = ‘new value’

//在窗口2中获得更新的数据

require('electron').remote.getGlobal(‘saveData’). shareData

方法3:主进程做消息中转

//在主进程中监听窗口1发送事件,并接受数据后发送给窗口2

ipcMain.on('ping-event', (event, arg) => {

yourWindow.webContents.send('pong-event', 'something');

}

//在渲染进程中,窗口1发送数据

ipcRenderer.send('ping-event', (event, arg) => {

// do something

})

//在渲染进程的窗口2中监听主进程发送的事件,接收数据

ipcRenderer.on('pong-event', (event, arg) => {

// do something  })

方法4:利用 remote 接口直接获取渲染进程发送消息:

       主要步骤:

     ·1.在窗口1中获取当前窗口的id,窗口加载完成后发送一个事件,携带当前窗口id和发送的数据;  然后监听窗口2返回的数据
   const windowID = BrowserWindow.getFocusedWindow().id;
  win.webContents.send('share-data',data, windowID)
ipcRenderer.on('factorial-computed', function (event, data, id) {
  //此处的data就是窗口2传输来的数据
})
            2. 在窗口2中监听窗口1事件
    const ipc = require('electron').ipcRenderer
    const BrowserWindow = require('electron').remote.BrowserWindow
 
ipc.on(' share-data', function (event,data,fromWindowId) {
//此处的data就是窗口1传输来的数据
      const fromWindow = BrowserWindow.fromId(fromWindowId)
      fromWindow.webContents.send('factorial-computed',data, fromWindowId)
      window.close()
    })
 

主进程与渲染进程之间的通讯:

//在渲染器进程中

const ipc = require('electron').ipcRenderer
const syncMsgBtn = document.getElementById('sync-msg')
 
syncMsgBtn.addEventListener('click', function () {
  const reply = ipc.sendSync('synchronous-message', 'ping')
  const message = `同步消息回复: ${reply}`
  document.getElementById('sync-reply').innerHTML = message
})

//在主进程中

const ipc = require('electron').ipcMain
ipc.on('synchronous-message', function (event, arg) {
  event.returnValue = 'pong'
})