发布于 由admin

JS Electron 跨平台桌面应用：主进程与渲染进程通信

各位观众老爷，大家好！今天咱们来聊聊Electron这个神奇的框架，以及它里面的主进程和渲染进程之间那些不得不说的故事。尤其是它们之间的通信方式，那可是Electron应用开发的基石啊！

Electron：桌面应用的另一种可能

Electron，简单来说，就是用Web技术（HTML, CSS, JavaScript）来构建跨平台桌面应用的框架。它基于Chromium和Node.js，这意味着你写的代码可以像Web应用一样运行，但同时又能拥有桌面应用的能力，比如访问本地文件系统、操作硬件等等。

主角登场：主进程与渲染进程

Electron应用由两个关键角色组成：主进程（Main Process）和渲染进程（Renderer Process）。

  • 主进程（Main Process）： 负责控制整个应用的生命周期，创建和管理窗口（BrowserWindow），处理菜单、对话框等系统级别的操作。它就像一个乐队的指挥，掌握着全局。而且，主进程只能有一个。

  • 渲染进程（Renderer Process）： 负责渲染用户界面，处理用户的交互。每个窗口（BrowserWindow）都有自己的渲染进程。它们就像乐队里的乐手，各自演奏自己的部分。可以有多个渲染进程。

为什么要通信？

主进程和渲染进程运行在不同的进程中，拥有独立的内存空间。这意味着它们不能直接共享数据。想象一下，一个乐队的指挥想告诉乐手们下一段要演奏什么，但他们之间没有沟通渠道，那场面得多混乱！

所以，我们需要一种机制，让主进程和渲染进程能够安全、有效地通信。这就是我们今天的主题。

通信方式大盘点

Electron提供了多种通信方式，每种方式都有其适用的场景。咱们一个一个来分析。

  1. ipcRenderer 和 ipcMain：Electron 最基础的通信方式

    ipcRenderer 模块在渲染进程中使用，用于向主进程发送消息。ipcMain 模块在主进程中使用，用于监听来自渲染进程的消息。这就像一个邮递系统，渲染进程寄信，主进程收信。

    代码示例：

    • 渲染进程 (renderer.js):

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

document.getElementById('myButton').addEventListener('click', () => {
  ipcRenderer.send('button-clicked', 'Hello from Renderer!');
});

ipcRenderer.on('reply-from-main', (event, arg) => {
  document.getElementById('message').textContent = arg;
});

    • 主进程 (main.js):

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // 允许渲染进程使用Node.js API
      contextIsolation: false // 禁用上下文隔离
    }
  });

  mainWindow.loadFile('index.html');

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

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

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

ipcMain.on('button-clicked', (event, arg) => {
  console.log('Received from Renderer:', arg);
  event.reply('reply-from-main', 'Hello from Main! Button was clicked.');
});

    • HTML (index.html):

      <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Electron Demo</title>
</head>
<body>
  <h1>Electron IPC Demo</h1>
  <button id="myButton">Click Me</button>
  <p id="message"></p>
  <script src="renderer.js"></script>
</body>
</html>

    解释：

    • 渲染进程通过 ipcRenderer.send('button-clicked', 'Hello from Renderer!') 发送了一个名为 button-clicked 的消息，并附带了一个参数 'Hello from Renderer!'。
    • 主进程通过 ipcMain.on('button-clicked', ...) 监听 button-clicked 消息。当收到消息时，它会执行一个回调函数。
    • 在回调函数中，event.reply('reply-from-main', 'Hello from Main! Button was clicked.') 用于回复渲染进程。 event 对象提供了 reply 方法， 它可以方便的将消息发送回发送者。
    • 渲染进程通过 ipcRenderer.on('reply-from-main', ...) 监听来自主进程的 reply-from-main 消息，并在收到消息时更新页面上的文本。

    注意事项：

    • nodeIntegration: true 和 contextIsolation: false 是为了简化示例，在生产环境中不建议这样配置。 应该开启上下文隔离，并通过 preload 脚本来安全地暴露Node.js API。 后面会讲到 preload 脚本。
    • ipcRenderer.send 是单向通信，渲染进程发送消息后不会等待回复。 如果需要双向通信，可以使用 ipcRenderer.invoke （后面会讲到）。

  2. ipcRenderer.invoke 和 ipcMain.handle：双向通信的利器

    ipcRenderer.invoke 允许渲染进程向主进程发送消息，并同步等待主进程的回复。ipcMain.handle 用于在主进程中处理 invoke 请求。 这就像打电话，你拨号过去，对方接听并回答你。

    代码示例：

    • 渲染进程 (renderer.js):

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

async function getSystemInfo() {
  const info = await ipcRenderer.invoke('get-system-info');
  document.getElementById('systemInfo').textContent = JSON.stringify(info);
}

document.getElementById('getInfoButton').addEventListener('click', getSystemInfo);

    • 主进程 (main.js):

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadFile('index.html');

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

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

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

ipcMain.handle('get-system-info', async (event, ...args) => {
  // 模拟获取系统信息
  return {
    platform: process.platform,
    version: process.version,
    theme: systemPreferences.getEffectiveSystemTheme()
  };
});

    • HTML (index.html):

      <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Electron Demo</title>
</head>
<body>
  <h1>Electron IPC Demo</h1>
  <button id="getInfoButton">Get System Info</button>
  <pre id="systemInfo"></pre>
  <script src="renderer.js"></script>
</body>
</html>

    解释：

    • 渲染进程通过 ipcRenderer.invoke('get-system-info') 发送一个名为 get-system-info 的请求，并等待主进程的回复。
    • 主进程通过 ipcMain.handle('get-system-info', ...) 处理 get-system-info 请求。 当收到请求时，它会执行一个回调函数，该函数返回一个 Promise。
    • 渲染进程的 ipcRenderer.invoke 会等待 Promise resolve，并将 resolve 的值作为结果返回。

    优点：

    • 双向通信，方便进行请求-响应模式的交互。
    • 主进程的回调函数可以返回 Promise，使得异步操作更加容易。

    缺点：

    • 渲染进程会阻塞，直到收到主进程的回复。 因此，耗时的操作应该放在主进程中进行。
    • 如果主进程没有处理该请求，渲染进程会一直等待，导致应用卡死。

  3. webContents.send：主进程主动推送消息

    webContents.send 允许主进程向特定的渲染进程发送消息。 这就像广播，主进程可以通知所有或者特定窗口的渲染进程。

    代码示例：

    • 主进程 (main.js):

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadFile('index.html');

  mainWindow.on('closed', () => {
    mainWindow = null;
  });

  // 每隔5秒向渲染进程发送消息
  setInterval(() => {
    if (mainWindow) {
      mainWindow.webContents.send('time-update', new Date().toLocaleTimeString());
    }
  }, 5000);
}

app.on('ready', createWindow);

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

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

    • 渲染进程 (renderer.js):

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

ipcRenderer.on('time-update', (event, time) => {
  document.getElementById('currentTime').textContent = `Current Time: ${time}`;
});

    • HTML (index.html):

      <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Electron Demo</title>
</head>
<body>
  <h1>Electron IPC Demo</h1>
  <p id="currentTime">Current Time: Loading...</p>
  <script src="renderer.js"></script>
</body>
</html>

    解释：

    • 主进程使用 mainWindow.webContents.send('time-update', new Date().toLocaleTimeString()) 向渲染进程发送 time-update 消息，并附带当前时间。
    • 渲染进程通过 ipcRenderer.on('time-update', ...) 监听 time-update 消息，并在收到消息时更新页面上的时间。

    适用场景：

    • 主进程需要主动通知渲染进程某些事件发生时，比如文件更新、配置变更等。
    • 实时数据更新，比如股票行情、系统监控等。

  4. remote 模块 (已废弃，不推荐使用)

    remote 模块曾经允许渲染进程直接访问主进程的对象和方法。但这带来很多安全问题，并且使得代码难以维护。 强烈不推荐使用 remote 模块。

    为什么不推荐使用？

    • 安全风险：渲染进程可以直接调用主进程的API，可能导致恶意代码执行。
    • 性能问题：每次调用都会涉及到进程间的通信，影响性能。
    • 代码维护性差：渲染进程和主进程的代码耦合度高，难以维护和测试。

    替代方案：

    • 使用 ipcRenderer.invoke 和 ipcMain.handle 进行双向通信。
    • 使用 preload 脚本安全地暴露 Node.js API 给渲染进程（后面会讲到）。

  5. preload 脚本：安全地暴露 Node.js API

    preload 脚本是在渲染进程加载之前执行的脚本。它可以访问 Node.js API，并将一些 API 安全地暴露给渲染进程。 这就像一个安全卫士，它在渲染进程启动前，预先设置好一些允许渲染进程访问的功能。

    代码示例：

    • preload.js:

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

contextBridge.exposeInMainWorld('electronAPI', {
  getSystemInfo: () => ipcRenderer.invoke('get-system-info')
});

    • 主进程 (main.js):

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false, // 禁用 nodeIntegration
      contextIsolation: true // 启用 contextIsolation
    }
  });

  mainWindow.loadFile('index.html');

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

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

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

ipcMain.handle('get-system-info', async (event, ...args) => {
  // 模拟获取系统信息
  return {
    platform: process.platform,
    version: process.version,
    theme: systemPreferences.getEffectiveSystemTheme()
  };
});

    • 渲染进程 (renderer.js):

      async function getSystemInfo() {
  const info = await window.electronAPI.getSystemInfo();
  document.getElementById('systemInfo').textContent = JSON.stringify(info);
}

document.getElementById('getInfoButton').addEventListener('click', getSystemInfo);

    • HTML (index.html):

      <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Electron Demo</title>
</head>
<body>
  <h1>Electron IPC Demo</h1>
  <button id="getInfoButton">Get System Info</button>
  <pre id="systemInfo"></pre>
  <script src="renderer.js"></script>
</body>
</html>

    解释：

    • 在 main.js 中，webPreferences 中设置了 preload 脚本的路径，并禁用了 nodeIntegration，启用了 contextIsolation。
    • preload.js 使用 contextBridge.exposeInMainWorld 将 electronAPI 对象暴露给渲染进程。
    • 渲染进程可以通过 window.electronAPI.getSystemInfo() 调用 preload 脚本中定义的方法。

    优点：

    • 安全性高：渲染进程无法直接访问 Node.js API，只能通过 preload 脚本暴露的 API 进行交互。
    • 代码清晰：将 Node.js API 的调用集中在 preload 脚本中，使得代码更加易于维护。

    注意事项：

    • 必须启用 contextIsolation: true 才能使用 contextBridge。
    • preload 脚本应该尽可能的小，避免影响渲染进程的启动速度。

通信方式对比

为了方便大家理解，这里用一个表格来总结一下各种通信方式的特点：

通信方式 描述 优点 缺点 适用场景 安全性
ipcRenderer.send/ipcMain.on 渲染进程向主进程发送消息，单向通信 简单易用，适用于不需要回复的场景 单向通信，无法直接获取主进程的返回值 简单的事件触发，比如点击按钮通知主进程 安全性较低，如果开启 nodeIntegration，渲染进程可以直接访问 Node.js API。建议使用 preload 脚本和 contextIsolation
ipcRenderer.invoke/ipcMain.handle 渲染进程向主进程发送消息，并等待主进程的回复，双向通信 双向通信，可以方便地进行请求-响应模式的交互，主进程的回调函数可以返回 Promise 渲染进程会阻塞，直到收到主进程的回复，耗时的操作应该放在主进程中进行 需要请求主进程处理某些任务并返回结果的场景，比如获取系统信息，读取配置文件 安全性较高，如果开启 nodeIntegration，渲染进程可以直接访问 Node.js API。建议使用 preload 脚本和 contextIsolation
webContents.send 主进程向特定的渲染进程发送消息 主进程可以主动推送消息，适用于需要实时更新数据的场景 单向通信，渲染进程无法直接回复主进程 主进程需要主动通知渲染进程某些事件发生时，比如文件更新、配置变更等，实时数据更新，比如股票行情、系统监控等 安全性较高，主进程可以控制哪些渲染进程接收消息
remote (已废弃) 渲染进程直接访问主进程的对象和方法 曾经很方便，但现在强烈不推荐使用 安全风险高，性能问题，代码维护性差 不要使用 极低，强烈不推荐使用
preload 脚本 在渲染进程加载之前执行的脚本，可以访问 Node.js API，并将一些 API 安全地暴露给渲染进程 安全性高，代码清晰，易于维护 需要编写额外的 preload 脚本 安全地暴露 Node.js API 给渲染进程，比如获取系统信息，读取配置文件 高，渲染进程无法直接访问 Node.js API，只能通过 preload 脚本暴露的 API 进行交互，并且需要启用 contextIsolation

最佳实践

  • 永远不要信任来自渲染进程的数据。 所有的输入数据都应该在主进程中进行验证和过滤，防止恶意代码注入。
  • 尽可能使用 preload 脚本和 contextIsolation。 这可以极大地提高应用的安全性。
  • 避免在渲染进程中执行耗时的操作。 应该将这些操作放在主进程中进行，并通过 ipcRenderer.invoke 获取结果。
  • 合理选择通信方式。 根据实际需求选择合适的通信方式，避免过度使用复杂的通信方式。
  • 注意内存泄漏。 在使用 ipcRenderer.on 监听消息时，确保在不再需要监听时取消监听，避免内存泄漏。

总结

Electron的主进程和渲染进程通信是构建复杂桌面应用的关键。理解各种通信方式的优缺点，并根据实际需求选择合适的通信方式，可以帮助你构建安全、高效、易于维护的Electron应用。

今天的讲座就到这里，希望大家有所收获！ 感谢各位的观看，下次再见！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注