electronic communication

The Electron desktop application implements communication between two windows (rendering processes) and transfers data:

       Method 1 : The easiest way to share data between two web pages (rendering processes) is to use the HTML5 API already implemented in the browser. One of the better solutions is to use the  Storage API ,  , or  IndexedDB .localStoragesessionStorage 

       Method 2 : Implemented using the in-house IPC mechanism. Store the data in some global variable in the main process, then use the  module to access it across multiple renderer processes . example:Electron remote 

       // in the main process

       Global.saveData = { shareData: data};

      

       //Set the modified data in window 1

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

       // get updated data in window 2

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

 

Method 3: The main process does the message relay

//Listen to the event sent by window 1 in the main process, and send it to window 2 after receiving the data

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

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

}

//During the rendering process, window 1 sends data

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

    // do something

 })

//Listen to events sent by the main process in window 2 of the rendering process and receive data

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

    // do something  })

Method 4: Use the remote interface to directly obtain the message sent by the rendering process:

       The main steps:

     1. Get the id of the current window in window 1, send an event after the window is loaded, carrying the current window id and the data sent; then monitor the data returned by window 2

   const windowID = BrowserWindow.getFocusedWindow().id;

  win.webContents.send('share-data',data, windowID)；

ipcRenderer.on('factorial-computed', function (event, data, id) {

  //此处的data就是窗口2传输来的数据

})

            2. Listen for window 1 events in window 2

    const ipc = require('electron').ipcRenderer

    const BrowserWindow = require('electron').remote.BrowserWindow

ipc.on(' share-data', function (event,data,fromWindowId) {

// heredata就是窗口1传输来的数据

      const fromWindow = BrowserWindow.fromId(fromWindowId)

      fromWindow.webContents.send('factorial-computed',data, fromWindowId)

      window.close()

    })

Communication between the main process and the rendering process:

// in the renderer process

const ipc = require('electron').ipcRenderer

const syncMsgBtn = document.getElementById('sync-msg')

syncMsgBtn.addEventListener('click', function () {

  const reply = ipc.sendSync('synchronous-message', 'ping')

  const message =  `Sync message reply: ${reply}`

  document.getElementById('sync-reply').innerHTML = message

})

// in the main process

const ipc = require('electron').ipcMain

ipc.on('synchronous-message', function (event, arg) {

  event.returnValue = 'pong'

})