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} - 工作线程返回的结果
*/
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 中的
// renderer.js (或在你的渲染进程脚本中)
const { ipcRenderer } = require('electron');
document.addEventListener('DOMContentLoaded', () => {
const sendButton = document.getElementById('send-button');
const inputField = document.getElementById('input-text');
const resultDisplay = document.getElementById('result-display');
if (sendButton && inputField && resultDisplay) {
sendButton.addEventListener('click', async () => {
const textToSend = inputField.value;
if (!textToSend) {
alert('请输入一些文本！');
return;
}
resultDisplay.textContent = '正在发送请求到主进程，请稍候...';
console.log(`渲染进程发送消息到主进程: 'start-file-send', 数据: ${textToSend}`);
// 向主进程发送消息，请求执行 sendFile 任务
ipcRenderer.send('start-file-send', textToSend);
});
// 监听来自主进程的任务结果
ipcRenderer.on('file-send-result', (event, result) => {
console.log(`渲染进程收到主进程结果: ${result}`);
resultDisplay.textContent = `任务完成，结果: ${result}`;
});
// 监听来自主进程的错误信息
ipcRenderer.on('file-send-error', (event, error) => {
console.error(`渲染进程收到主进程错误: ${error}`);
resultDisplay.textContent = `任务失败，错误: ${error}`;
});
} else {
console.error('HTML 元素未找到，请检查 index.html');
}
});index.html (示例):
Electron 多线程示例
Electron 渲染进程调用主进程多线程任务
结果:
等待输入...
主进程监听并执行任务
在主进程中，我们需要使用 ipcMain.on() 方法来监听来自渲染进程的消息。一旦收到特定消息，主进程就执行相应的 sendFile 函数，并将结果（或错误）通过 event.reply() 方法发送回渲染进程。
浚心时尚购物商城程序
下载
时尚购物程序v1.01、全立体设计。此系统由3个Flash动画为主线（正式版带原文件），设计更形象，网站更有吸引力。这种设计在网店系统内绝无仅有，使您的网店与众不同。2、内置音乐播放器，简单灵活的操作即可完成设置，前台任意调用。并带详细说明文件，一看就懂。合理使用此功能，可使网站更富渲染力。3、支持多图显示，每件产品最多可以上传9张图片。4、后台功能强大，销售管理，财务管理，在线支付平台管理等功能
main.js 中的 IPC 监听器：
// main.js (在 createWindow 函数之后，或 app.whenReady() 回调中添加)
// ... (sendFile 函数定义)
// 监听来自渲染进程的消息
ipcMain.on('start-file-send', async (event, data) => {
console.log(`主进程接收到渲染进程消息 'start-file-send'，数据: ${data}`);
try {
const result = await sendFile(data);
// 将结果发送回触发此事件的渲染进程
event.reply('file-send-result', result);
} catch (error) {
console.error('主进程执行 sendFile 任务失败:', error);
// 将错误信息发送回渲染进程
event.reply('file-send-error', error.message || '未知错误');
}
});
// ... (app.whenReady() 和 app.on('window-all-closed') 等应用生命周期代码)完整示例代码
为了清晰展示，我们将 main.js 和 renderer.js 的关键部分整合如下：
main.js
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,
contextIsolation: false
}
});
mainWindow.loadFile('index.html');
}
/**
* @description 在主进程中创建并管理工作线程，执行文件发送逻辑
* @param {string} text - 需要处理的文本数据
* @returns {Promise} - 工作线程返回的结果
*/
const sendFile = async (text) => {
console.log(`主进程收到请求，开始处理文本: ${text}`);
let sendWorker;
try {
sendWorker = await spawn(new Worker('./src/service/sender.js'));
const result = await sendWorker(text);
console.log(`工作线程处理结果: ${result}`);
return result;
} catch (error) {
console.error('工作线程执行出错:', error);
throw error;
} finally {
if (sendWorker) {
await Thread.terminate(sendWorker);
console.log('工作线程已终止。');
}
}
};
app.whenReady().then(() => {
createWindow();
// 监听来自渲染进程的消息
ipcMain.on('start-file-send', async (event, data) => {
console.log(`主进程接收到渲染进程消息 'start-file-send'，数据: ${data}`);
try {
const result = await sendFile(data);
event.reply('file-send-result', result);
} catch (error) {
console.error('主进程执行 sendFile 任务失败:', error);
event.reply('file-send-error', error.message || '未知错误');
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
}); renderer.js
const { ipcRenderer } = require('electron');
document.addEventListener('DOMContentLoaded', () => {
const sendButton = document.getElementById('send-button');
const inputField = document.getElementById('input-text');
const resultDisplay = document.getElementById('result-display');
if (sendButton && inputField && resultDisplay) {
sendButton.addEventListener('click', async () => {
const textToSend = inputField.value;
if (!textToSend) {
alert('请输入一些文本！');
return;
}
resultDisplay.textContent = '正在发送请求到主进程，请稍候...';
console.log(`渲染进程发送消息到主进程: 'start-file-send', 数据: ${textToSend}`);
ipcRenderer.send('start-file-send', textToSend);
});
ipcRenderer.on('file-send-result', (event, result) => {
console.log(`渲染进程收到主进程结果: ${result}`);
resultDisplay.textContent = `任务完成，结果: ${result}`;
});
ipcRenderer.on('file-send-error', (event, error) => {
console.error(`渲染进程收到主进程错误: ${error}`);
resultDisplay.textContent = `任务失败，错误: ${error}`;
});
} else {
console.error('HTML 元素未找到，请检查 index.html');
}
});注意事项与最佳实践
数据传输与序列化： IPC 通道传输的数据会经过序列化和反序列化。这意味着只能传输可序列化的数据类型（如字符串、数字、布尔值、普通对象、数组等）。复杂的对象实例（如类实例、函数）不能直接传输。
异步特性： IPC 通信是异步的。渲染进程发送请求后，不会立即得到结果，需要监听主进程的响应。在处理 UI 更新时，务必考虑异步操作的顺序和状态。
错误处理： 务必在主进程和渲染进程中都实现健壮的错误处理机制。主进程中的任务失败时，应将错误信息通过 IPC 返回给渲染进程，以便用户界面能及时反馈。
-
安全性（contextBridge）： 在生产环境中，为了增强安全性，强烈建议启用 contextIsolation（上下文隔离）并在预加载脚本中使用 contextBridge 来安全地暴露主进程功能给渲染进程，而不是直接在 webPreferences 中设置 nodeIntegration: true 和 contextIsolation: false。
-
preload.js 示例:
const { contextBridge, ipcRenderer } = require('electron'); contextBridge.exposeInMainWorld('api', { startFileSend: (text) => ipcRenderer.send('start-file-send', text), onFileSendResult: (callback) => ipcRenderer.on('file-send-result', (event, result) => callback(result)), onFileSendError: (callback) => ipcRenderer.on('file-send-error', (event, error) => callback(error)) }); -
renderer.js 相应修改:
// const { ipcRenderer } = require('electron'); // 不再直接require ipcRenderer document.addEventListener('DOMContentLoaded', () => { // ... (获取元素) if (sendButton && inputField && resultDisplay) { sendButton.addEventListener('click', async () => { const textToSend = inputField.value; if (!textToSend) { alert('请输入一些文本！'); return; } resultDisplay.textContent = '正在发送请求到主进程，请稍候...'; window.api.startFileSend(textToSend); // 通过暴露的API调用 }); window.api.onFileSendResult((result) => { console.log(`渲染进程收到主进程结果: ${result}`); resultDisplay.textContent = `任务完成，结果: ${result}`; }); window.api.onFileSendError((error) => { console.error(`渲染进程收到主进程错误: ${error}`); resultDisplay.textContent = `任务失败，错误: ${error}`;
-
