MST

星途 面试题库

面试题：Node.js 的 Electron 应用中如何进行进程间通信

在基于 Node.js 的 Electron 应用开发中，主进程和渲染进程之间经常需要进行通信。请详细说明 Electron 提供了哪些方式实现进程间通信，以及每种方式在实际应用中的场景和使用方法，并举例说明如何在不同进程间传递复杂数据结构。
21.4万 热度难度
前端开发Node.js

知识考点

AI 面试

面试题答案

一键面试

1. IPC（Inter - Process Communication）模块

场景

主进程和渲染进程间频繁的数据传递与事件通知，例如主进程获取系统信息后传递给渲染进程展示，或渲染进程响应用户操作后通知主进程执行某些系统级任务。

使用方法

  • 主进程：
    • 引入 ipcMain：const { ipcMain } = require('electron');
    • 监听事件：ipcMain.on('channel - name', (event, arg) => { /* 处理逻辑 */ });
  • 渲染进程：
    • 引入 ipcRenderer：const { ipcRenderer } = require('electron');
    • 发送事件：ipcRenderer.send('channel - name', data);

传递复杂数据结构示例

  • 主进程：
const { app, BrowserWindow, ipcMain } = require('electron');
let win;
app.whenReady().then(() => {
    win = new BrowserWindow();
    win.loadFile('index.html');
    ipcMain.on('send - complex - data', (event, complexData) => {
        console.log('Received complex data:', complexData);
    });
});
  • 渲染进程：
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF - 8">
    <title>IPC Example</title>
</head>

<body>
    <script>
        const { ipcRenderer } = require('electron');
        const complexData = {
            name: 'John Doe',
            age: 30,
            hobbies: ['reading', 'coding']
        };
        ipcRenderer.send('send - complex - data', complexData);
    </script>
</body>

</html>

2. 共享模块（Shared Modules）

场景

当主进程和渲染进程需要访问相同的数据或函数时，例如配置文件的读取函数，数据库连接相关配置等。

使用方法

创建一个独立的 JavaScript 模块，主进程和渲染进程都可以引入该模块。例如创建一个 config.js 文件：

const config = {
    apiUrl: 'http://example.com/api',
    dbConfig: {
        host: 'localhost',
        port: 5432,
        user: 'user',
        password: 'password'
    }
};
module.exports = config;

在主进程中使用：

const config = require('./config.js');
console.log('API URL in main process:', config.apiUrl);

在渲染进程中使用：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF - 8">
    <title>Shared Module Example</title>
</head>

<body>
    <script>
        const config = require('./config.js');
        console.log('API URL in renderer process:', config.apiUrl);
    </script>
</body>

</html>

3. 全局对象（Global Objects）

场景

一些需要在整个应用中全局访问的数据或对象，比如应用的状态管理对象。但要谨慎使用，因为可能导致代码难以维护和理解。

使用方法

在主进程中设置全局对象：

const { app } = require('electron');
app.on('ready', () => {
    global.sharedObject = {
        count: 0,
        increment: function () {
            this.count++;
        }
    };
});

在渲染进程中访问全局对象：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF - 8">
    <title>Global Object Example</title>
</head>

<body>
    <script>
        const { remote } = require('electron');
        const sharedObject = remote.getGlobal('sharedObject');
        console.log('Initial count:', sharedObject.count);
        sharedObject.increment();
        console.log('Incremented count:', sharedObject.count);
    </script>
</body>

</html>

4. WebSockets

场景

当需要实现实时双向通信，类似于网络应用中的实时消息推送等场景，并且希望在 Electron 应用内模拟网络通信机制时。

使用方法

  • 安装 ws 库：npm install ws
  • 主进程：
const { app, BrowserWindow } = require('electron');
const WebSocket = require('ws');
let win;
app.whenReady().then(() => {
    win = new BrowserWindow();
    win.loadFile('index.html');
    const wss = new WebSocket.Server({ port: 8080 });
    wss.on('connection', (ws) => {
        const complexData = {
            message: 'Hello from main process',
            timestamp: new Date()
        };
        ws.send(JSON.stringify(complexData));
        ws.on('message', (message) => {
            console.log('Received from renderer:', message);
        });
    });
});
  • 渲染进程：
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF - 8">
    <title>WebSocket Example</title>
</head>

<body>
    <script>
        const WebSocket = require('ws');
        const ws = new WebSocket('ws://localhost:8080');
        ws.on('open', () => {
            const complexData = {
                response: 'Hello back from renderer',
                status: 'active'
            };
            ws.send(JSON.stringify(complexData));
        });
        ws.on('message', (message) => {
            console.log('Received from main:', message);
        });
    </script>
</body>

</html>