1. 理解 Electron 进程架构与多线程挑战
Electron 应用由主进程和渲染进程构成。主进程负责管理应用生命周期、原生 GUI 交互以及操作系统层面的操作，而渲染进程（通常是多个）则负责渲染用户界面（基于 Chromium 浏览器环境）和处理用户交互。
由于进程隔离的特性，渲染进程无法直接访问主进程的 Node.js 模块或调用其定义的函数。当需要在渲染进程中触发耗时或计算密集型任务（例如使用 threads.js 进行多线程处理）时，直接在渲染进程执行这些任务会导致 UI 阻塞，严重影响用户体验。因此，我们需要一种跨进程通信机制，让渲染进程能够安全地请求主进程执行这些复杂任务。
2. 利用 IPC 机制实现跨进程调用
Electron 提供了进程间通信（IPC）模块，包括主进程的 ipcMain 和渲染进程的 ipcRenderer。这两个模块允许不同进程通过发送和接收消息进行通信。本教程将展示如何利用这一机制，从渲染进程向主进程发送请求，并在主进程中执行预定义的多线程函数。
2.1 主进程 (main.js) 的设置
在主进程文件 main.js 中，我们需要完成以下两个主要任务：
- 定义包含多线程逻辑的函数。
- 设置一个 ipcMain 监听器，用于接收来自渲染进程的消息，并调用上述函数。
假设我们有一个名为 sendFile 的异步函数，它使用 threads.js 库创建一个工作线程来处理文件发送或数据处理逻辑：
// main.js
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
// 导入 threads 库的相关模块
const { spawn, Worker, Thread } = require('threads');
let mainWindow;
function createWindow () {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false, // 强烈推荐禁用 Node.js 集成
contextIsolation: true, // 强烈推荐启用上下文隔离
preload: path.join(__dirname, 'preload.js') // 预加载脚本路径
}
});
mainWindow.loadFile('index.html');
// mainWindow.webContents.openDevTools(); // 可选：打开开发者工具
}
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});
/**
* 主进程中处理文件发送的多线程函数。
* 此函数会创建一个 worker 线程来执行实际的耗时操作。
* @param {string} text - 需要处理的文本数据。
* @returns {Promise<string>} worker 线程返回的处理结果。
*/
const sendFile = async (text) => {
console.log(`[主进程] 收到请求，准备处理数据: ${text}`);
// 创建一个 worker 线程实例，执行 src/service/sender.js 中的逻辑
const sendWorker = await spawn(new Worker('./src/service/sender.js'));
// 调用 worker 线程，并传递数据
const response = await sendWorker(text);
console.log(`[主进程] Worker 线程返回结果: ${response}`);
// 终止 worker 线程，释放资源
await Thread.terminate(sendWorker);
return response;
};
// 设置 ipcMain 监听器，监听渲染进程发送的 'invoke-send-file' 消息
ipcMain.on('invoke-send-file', async (event, data) => {
try {
// 调用主进程中定义的多线程函数
const result = await sendFile(data);
// 如果需要将结果返回给渲染进程，可以使用 event.reply 或 ipcRenderer.invoke/handle
event.reply('send-file-response', result); // 示例：将结果回复给渲染进程
} catch (error) {
console.error('[主进程] 调用 sendFile 失败:', error);
event.reply('send-file-response-error', error.message); // 示例：回复错误信息
}
});代码说明：
- sendFile 函数封装了 threads.js 的使用逻辑，负责创建和管理工作线程。
- ipcMain.on('invoke-send-file', ...) 监听器会在渲染进程发送名为 'invoke-send-file' 的消息时触发。它接收渲染进程传递的数据 (data)，然后调用 sendFile 函数。
- 为了安全性，webPreferences 中禁用了 nodeIntegration 并启用了 contextIsolation，并通过 preload.js 脚本安全地暴露必要的 API。
2.2 Worker 线程 (src/service/sender.js) 的实现
src/service/sender.js 是实际执行计算任务的 Worker 线程脚本。它应该导出一个函数，该函数将作为工作线程的入口点，由 threads.js 管理。
// src/service/sender.js
const { expose } = require('threads/worker');
// 暴露一个异步函数给主线程，作为 worker 线程的入口点
expose(async (data) => {
console.log(`[Worker 线程] 收到数据: ${data}`);
// 模拟一个耗时操作，例如文件处理、复杂计算等
await new Promise(resolve => setTimeout(resolve, 2000)); // 模拟延迟 2 秒
const processedData = `[Worker 线程] 已处理数据: "${data}"，时间: ${new Date().toISOString()}`;
return processedData; // 返回处理结果
});代码说明：
- expose 函数将一个异步函数暴露给主线程，使其可以被 spawn 调用。
- 这个 Worker 线程接收数据，执行一些处理（此处为模拟延迟和字符串拼接），并返回结果。
2.3 渲染进程 (preload.js 和 renderer.js) 的调用
在渲染进程中，我们需要使用 ipcRenderer 向主进程发送消息。为了安全起见，强烈推荐通过 preload.js 脚本将 ipcRenderer 的功能封装并安全地暴露给渲染进程。
preload.js (预加载脚本):
// preload.js
const { contextBridge, ipcRenderer } = require('electron');
// 通过 contextBridge 安全地将 API 暴露给渲染进程
contextBridge.exposeInMainWorld('api', {
// 暴露一个方法用于调用主进程的 sendFile 函数
invokeSendFile: (text) => ipcRenderer.send('invoke-send-file', text),
// 暴露一个方法用于监听主进程的回复
onSendFileResponse: (callback) => ipcRenderer.on('send-file-response', (event, data) => callback(data)),
onSendFileResponseError: (callback) => ipcRenderer.on('send-file-response-error', (event, data) => callback(data))
});渲染进程脚本 (renderer.js 或直接在 HTML 中):
// renderer.js (或 index.html 中的 <script> 标签)
document.addEventListener('DOMContentLoaded', () => {
const callMainButton = document.getElementById('call-main-button');
const inputField = document.getElementById('input-data');
const resultDisplay = document.getElementById('result-display');
if (callMainButton && inputField) {
callMainButton.addEventListener('click', () => {
const dataToSend = inputField.value || '默认测试数据';
console.log(`[渲染进程] 准备发送数据到主进程: ${dataToSend}`);
// 通过 preload 脚本暴露的 API 调用主进程函数
window.api.invokeSendFile(dataToSend);
resultDisplay.textContent = '请求已发送至主进程，等待回复...';
});
}
// 监听主进程的回复
window.api.onSendFileResponse((result) => {
console.log(`[渲染进程] 收到主进程回复: ${result}`);
resultDisplay.textContent = `主进程返回结果: ${result}`;
});
// 监听主进程的错误回复
window.api.onSendFile 
