在 Electron 应用中实现渲染进程调用主进程多线程任务-js教程-PHP中文网

在 electron 应用中实现渲染进程调用主进程多线程任务

本教程详细阐述了如何在 Electron 应用中，通过进程间通信（IPC）机制，使渲染进程能够安全有效地调用主进程中封装的多线程任务（例如使用 threads.js 库）。文章涵盖了主进程任务的封装、渲染进程的请求发送、主进程的监听与响应，并提供了完整的代码示例及重要的注意事项，旨在帮助开发者构建响应更灵敏、性能更优越的 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 函数：

立即进入“豆包AI人工智官网入口”；

立即学习“豆包AI人工智能在线问答入口”；

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 中的 <script> 标签内):

// 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 (示例):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Electron 多线程示例</title>
</head>
<body>
    <h1>Electron 渲染进程调用主进程多线程任务</h1>
    <input type="text" id="input-text" placeholder="输入要发送的文本" style="width: 300px; padding: 8px;">
    <button id="send-button" style="padding: 8px 15px;">发送到主进程</button>
    <p>结果:</p>
    <div id="result-display" style="border: 1px solid #ccc; padding: 10px; min-height: 50px; background-color: #f9f9f9;">
        等待输入...
    </div>
    <script src="renderer.js"></script>
</body>
</html>

登录后复制

主进程监听并执行任务

在主进程中，我们需要使用 ipcMain.on() 方法来监听来自渲染进程的消息。一旦收到特定消息，主进程就执行相应的 sendFile 函数，并将结果（或错误）通过 event.reply() 方法发送回渲染进程。

豆包AI编程

豆包推出的AI编程助手

483

查看详情

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<any>} - 工作线程返回的结果
 */
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}`;

登录后复制

以上就是在 Electron 应用中实现渲染进程调用主进程多线程任务的详细内容，更多请关注php中文网其它相关文章！