Electron调用主进程多线程方法详解

本文详细介绍了如何在 Electron 应用中实现渲染进程调用主进程多线程方法，以提升应用性能和响应速度。通过 Electron 提供的进程间通信（IPC）机制，渲染进程可以安全地将耗时任务委托给主进程处理，尤其适用于涉及原生 Node.js API 或需要多线程的任务。文章重点讲解了如何使用 `threads.js` 库在主进程中创建和管理工作线程，并封装成可供渲染进程调用的函数。同时，阐述了渲染进程如何通过 `ipcRenderer` 发送请求，以及主进程如何监听并响应这些请求，最后将结果返回给渲染进程。本文还提供了完整的代码示例和注意事项，包括数据序列化、异步特性、错误处理以及安全性的最佳实践（如使用 `contextBridge`），帮助开发者构建更健壮、更安全的 Electron 应用。

Electron 进程模型与 IPC 通信

Electron 应用由主进程和渲染进程组成。主进程负责应用生命周期管理、原生 API 访问等，而渲染进程（通常是浏览器窗口）则负责 UI 渲染。由于它们是独立的进程，不能直接互相调用函数。当渲染进程需要执行耗时或涉及原生 Node.js API（如 threads.js）的任务时，应将其委托给主进程。Electron 提供了进程间通信（IPC）模块（ipcMain 和 ipcRenderer）来安全地实现这一目标。

对于多线程任务，如使用 threads.js 库，通常更推荐在主进程中执行。这不仅因为 threads.js 更好地利用了 Node.js 的特性，也避免了在渲染进程中引入复杂的线程管理，从而保持渲染进程的响应性。

主进程中封装多线程任务

首先，我们需要在主进程（main.js）中封装一个函数，该函数将负责创建并管理工作线程。这里我们使用 threads.js 库来创建工作线程。

main.js 中的 sendFile 函数：

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const { spawn, Worker, Thread } = require('threads');

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'), // 预加载脚本
            nodeIntegration: true, // 允许在渲染进程中使用Node.js API，但更推荐使用contextBridge
            contextIsolation: false // 禁用上下文隔离，仅为演示方便，生产环境推荐开启
        }
    });

    mainWindow.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();
    }
});

/**
 * @description 在主进程中创建并管理工作线程，执行文件发送逻辑
 * @param {string} text - 需要处理的文本数据
 * @returns {Promise<any>} - 工作线程返回的结果
 */
const sendFile = async (text) => {
    console.log(`主进程收到请求，开始处理文本: ${text}`);
    let sendWorker;
    try {
        // 1. 启动一个新的工作线程，执行 './src/service/sender.js' 脚本
        // 注意：这里的 Worker 路径是相对于主进程的
        sendWorker = await spawn(new Worker('./src/service/sender.js'));

        // 2. 向工作线程发送数据并等待结果
        const result = await sendWorker(text);

        console.log(`工作线程处理结果: ${result}`);
        return result;
    } catch (error) {
        console.error('工作线程执行出错:', error);
        throw error;
    } finally {
        // 3. 任务完成后终止工作线程，释放资源
        if (sendWorker) {
            await Thread.terminate(sendWorker);
            console.log('工作线程已终止。');
        }
    }
};

// ... 其他主进程代码

src/service/sender.js (工作线程脚本示例):

这个脚本是实际执行耗时任务的工作线程。它会接收来自主进程的数据，进行处理，然后返回结果。

// src/service/sender.js
const { expose } = require('threads/worker');

expose(function send(data) {
    console.log(`工作线程收到数据: ${data}`);
    // 模拟耗时操作
    return new Promise(resolve => {
        setTimeout(() => {
            const processedData = `Processed: ${data} at ${new Date().toISOString()}`;
            resolve(processedData);
        }, 2000); // 模拟2秒处理时间
    });
});

在 package.json 中确保 threads 和 electron 依赖已安装：

{
  "name": "electron-multithread-demo",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^24.3.1",
    "threads": "^1.7.0"
  }
}

渲染进程发起调用

渲染进程不能直接调用 main.js 中的 sendFile 函数。它需要通过 ipcRenderer.send() 方法向主进程发送一个消息，请求主进程执行该任务。

renderer.js (或直接在 index.html 中的