Electron 应用中从渲染进程调用主进程多线程函数的教程-js教程-PHP中文网

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

本教程详细介绍了如何在 Electron.js 应用中，利用进程间通信（IPC）机制，从渲染进程安全有效地调用主进程中包含 threads.js 多线程逻辑的函数。通过 ipcRenderer 和 ipcMain 模块，实现跨进程消息传递，从而在主进程执行耗时操作，避免阻塞渲染进程，提升应用响应性。

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

代码说明：

j2me3D游戏开发简单教程中文WORD版

本文档主要讲述的是j2me3D游戏开发简单教程；　如今，3D图形几乎是任何一部游戏的关键部分，甚至一些应用程序也通过用3D形式来描述信息而获得了成功。如前文中所述，以立即模式和手工编码建立所有的3D对象的方式进行开发速度很慢且很复杂。应用程序中多边形的所有角点必须在数组中独立编码。在JSR 184中，这称为立即模式。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看

下载

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 中的