Electron 应用中从渲染进程调用主进程多线程函数的教程

// 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); // 示例：回复错误信息
    }
});

// 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; // 返回处理结果
});

// 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 (或 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