Electron主进程和渲染进程之间通信

Electron发送和接收数据用到的是 ipcMain 和 ipcRenderer 两个对象:

  • ipcMain 是用在主进程中的;
  • ipcRenderer 是用在渲染进程中的。

主进程用win.webContents.send或 event.reply()、event.sender.send()发送消息,用ipcMain.on监听消息;
渲染进程用ipcRenderer.send发送消息,用ipcRenderer.on监听消息。

一、渲染进程向主进程发送消息:

主进程:main.js

const {
  app,
  BrowserWindow,
  ipcMain
} = require('electron')
const path = require('path')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true, // 不加,渲染进程会报错
      contextIsolation: false, // 为了安全性
      enableRemoteModule: true // 不加,渲染进程会报错
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

// 2、监听渲染进程发送过来消息
ipcMain.on('asynchronous-message', function (event, arg) {
  console.log(arg); // prints "ping"

  // event.reply('sendToRender', "pong");
  event.sender.send('asynchronous-reply', 'pong');
});

渲染进程:render.js

const {
    ipcRenderer
} = require('electron');

document.getElementById("sender").onclick = function () {
    // 1、向主进程发送消息
    ipcRenderer.send('asynchronous-message', 'ping');
}

// 3、监听主进程返回过来的消息
ipcRenderer.on('asynchronous-reply', function (event, arg) {
    console.log("event:", event);
    console.log("arg:", arg);
});

index.html





    
    Hello World!
    



    

Hello World!

We are using Node.js , Chromium , and Electron .

二、主进程向渲染进程发送消息:

主进程main.js:

const {
  app,
  BrowserWindow,
  ipcMain
} = require('electron')
const path = require('path')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true, // 不加,渲染进程会报错
      contextIsolation: false, // 为了安全性
      enableRemoteModule: true // 不加,渲染进程会报错
    }
  })

  // 1、主进程向渲染进程发送消息
  win.webContents.send('mainSendToRender', {code: '200', msg: '主进程向渲染进程发送消息'});

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

// 4、接收信息
ipcMain.on('asynchronous-message', function (event, arg) {
  console.log(arg); // prints "ping"
});

渲染进程render.js:

const {
    ipcRenderer
} = require('electron');

// 2、渲染进程监听消息
ipcRenderer.on('mainSendToRender', function (event, arg) {
    console.log("event:", event);
    console.log("arg:", arg);

    // 3、渲染进程发送消息
    ipcRenderer.send('asynchronous-message', 'ping');
});

index.html:





    
    Hello World!
    



    

Hello World!

We are using Node.js , Chromium , and Electron .

你可能感兴趣的:(electron,electron)