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

duansamve

已于 2022-08-31 22:35:29 修改

阅读量2.6k

点赞数 4

分类专栏： electron 文章标签： electron

于 2022-08-31 22:31:00 首次发布

本文链接：https://blog.csdn.net/duansamve/article/details/126633210

版权

electron 专栏收录该内容

11 篇文章 3 订阅

订阅专栏

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>

<body>
    <h1>Hello World!</h1>
    <p>
        We are using Node.js <span id="node-version"></span>,
        Chromium <span id="chrome-version"></span>,
        and Electron <span id="electron-version"></span>.
    </p>

    <div><button id="sender">发送</button></div>
    <script src="./render.js"></script>
</body>

</html>

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

主进程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：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>

<body>
    <h1>Hello World!</h1>
    <p>
        We are using Node.js <span id="node-version"></span>,
        Chromium <span id="chrome-version"></span>,
        and Electron <span id="electron-version"></span>.
    </p>

    <div><button id="sender">发送</button></div>
    <script src="./render.js"></script>
</body>

</html>