Electron进程通信，案例以及讲解

最新推荐文章于 2023-07-10 11:37:37 发布

桃宝护卫队

最新推荐文章于 2023-07-10 11:37:37 发布

阅读量446

点赞数

文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/qq_36463299/article/details/130014938

版权

Electron是基于Chromium和Node.js的开源框架，用于构建跨平台的桌面应用程序。在Electron中，主进程和渲染进程可以进行进程通信（IPC）来实现功能，例如渲染进程可以向主进程请求数据，主进程可以向渲染进程发送消息等。

下面以一个简单的案例来讲解Electron进程通信的实现方法：

在主进程中，创建一个窗口，并监听来自渲染进程的请求：

javascriptCopy code// main.js
const { app, BrowserWindow, ipcMain } = require('electron')
let mainWindow = null

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true
    }
  })
  mainWindow.loadFile('index.html')
  // 监听来自渲染进程的请求
  ipcMain.on('request', (event, arg) => {
    console.log(arg) // 输出 'Hello World!'
    event.reply('response', 'Hello Electron!') // 向渲染进程发送消息
  })
}

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

在渲染进程中，向主进程发送请求，并接收主进程的响应：

htmlCopy code<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello Electron!</title>
  </head>
  <body>
    <button id="btn">Click Me</button>
    <script>
      const { ipcRenderer } = require('electron')
      const btn = document.getElementById('btn')
      btn.addEventListener('click', () => {
        ipcRenderer.send('request', 'Hello World!') // 向主进程发送请求
      })
      // 接收主进程的响应
      ipcRenderer.on('response', (event, arg) => {
        console.log(arg) // 输出 'Hello Electron!'
      })
    </script>
  </body>
</html>

在上面的案例中，渲染进程通过ipcRenderer模块向主进程发送请求，主进程通过ipcMain模块接收请求，并向渲染进程发送响应。

需要注意的是，在Electron 12及以上版本中，为了提高安全性，默认禁用了nodeIntegration，需要手动开启。另外，为了避免安全风险，建议在webPreferences中将contextIsolation设置为true，以隔离渲染进程的上下文。

Electron进程通信的实现方法还有很多种，例如使用remote模块、webContents模块等，开发者可以根据实际情况选择最适合自己的方式。

桃宝护卫队

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Electron进程通信，案例以及讲解

Electron是基于Chromium和Node.js的开源框架，用于构建跨平台的桌面应用程序。在Electron中，主进程和渲染进程可以进行进程通信（IPC）来实现功能，例如渲染进程可以向主进程请求数据，主进程可以向渲染进程发送消息等。
复制链接

扫一扫