Electron 中的通信方式

LaughingZhu

Jul 13, 2024

3 min read

1 views

Blog LaughingZhu Electron

Electron 中的通信方式

Loading...

在 ElectronJs 中，主要有三种常见的进程通信（IPC）方式，他们分别是：

1.主进程和渲染进程之间的IPC

`ipcMain` 和 `ipcRenderer`：

这是 Electron 提供的原生通信方式。ipcMain 用于主进程，ipcRenderer 用于渲染进程。通过这种方式，渲染进程可以发送消息给主进程，主进程也可以向渲染进程发送消息。

用法：

在主进程中：

const { ipcMain } = require('electron');
ipcMain.on('message', (event, arg) => {
  console.log(arg); // 收到渲染进程的消息
  event.reply('reply', '主进程的回复');
});

在渲染进程中：

const { ipcRenderer } = require('electron');
ipcRenderer.send('message', '来自渲染进程的消息');
ipcRenderer.on('reply', (event, arg) => {
  console.log(arg); // 收到主进程的回复 });
});

2.远程模块（已经弃用）

remote 模块：

这个模块允许在渲染进程中调用主进程中的对象和方法。然而，由于安全问题，该模块已经被弃用，建议使用其替代方法，如 contextBridge 和 ipcRenderer 。

用法

const { remote } = require('electron');
const { BrowserWindow } = remote;
let win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL('https://example.com');

3.上下文桥接（contextBridge）

`contextBridge` 和 `ipcRenderer` 结合：

这种方式在 Electron 10 之后引入，用于增强安全性。 contextBridge 可以创建一个安全的API，将其暴露给渲染进程，而不会暴露整个 ipcRenderer, 从而减少安全风险。

用法

在主进程中：

const { contextBridge, ipcRenderer } = require('require');
contextBridge.exposeInMainWord('api', {
  send: (channel, data) => ipcRender.send(channel, data),
  on: (channel, func) =>
    ipcRenderer.on(channel, (event, ...arges) => {
      func(...arges);
    })
});

在渲染进程中：

window.api.send('message', 'Hello from Renderer');
window.api.on('replay', (response) => {
  console.log(response); // 收到主进程的回复
});

各种通信方式的区别

1.ipcMain 和 ipcRenderer：

优点：直接、简单，适用于大多数主-渲染进程通信需求。
缺点：需要手动处理安全问题，可能会导致跨站脚本攻击（XSS）。

2.remote 模块（已弃用）：

优点：方便调用主进程对象和方法。
缺点：由于安全问题和性能问题，已弃用。

3.上下文桥接（contextBridge）：

优点：增强安全性，防止直接访问 ipcRenderer。
缺点：却要额外的配置，增加了一些复杂性。

总体来说，建议使用 contextBridge 和 ipcRenderer 结合的方式来进行 Electron 中的进程通信，确保安全性和性能。

相关文章