electron-trpc 使用教程

electron-trpc 使用教程

electron-trpc Build type-safe Electron inter-process communication using tRPC 项目地址: https://gitcode.com/gh_mirrors/el/electron-trpc

1. 项目介绍

electron-trpc 是一个用于构建类型安全的 Electron 进程间通信（IPC）的工具。它基于 tRPC（TypeScript Remote Procedure Call），允许开发者从 Electron 的主进程向一个或多个渲染进程暴露 API。通过 electron-trpc，开发者可以构建完全类型安全的 IPC，提供了一种安全的替代方案，避免在本地主机上开放服务器。

2. 项目快速启动

安装

首先，使用以下命令安装 electron-trpc：

# 使用 pnpm
pnpm add electron-trpc

# 使用 yarn
yarn add electron-trpc

# 使用 npm
npm install --save electron-trpc

基本设置

1. 在主进程中添加 tRPC 路由：

   在 Electron 的主进程中，使用 createIPCHandler 添加 tRPC 路由：

   import { app } from 'electron';
   import { createIPCHandler } from 'electron-trpc/main';
   import { router } from './api';
   
   app.on('ready', () => {
     const win = new BrowserWindow({
       webPreferences: {
         // 替换为你的预加载文件路径
         preload: 'path/to/preload.js'
       }
     });
   
     createIPCHandler({
       router,
       windows: [win]
     });
   });
   

2. 在预加载文件中暴露 IPC：

   在预加载文件中，使用 exposeElectronTRPC 暴露 IPC：

   import { exposeElectronTRPC } from 'electron-trpc/main';
   
   process.once('loaded', async () => {
     exposeElectronTRPC();
   });
   

3. 在渲染进程中创建客户端：

   在渲染进程中，使用 ipcLink 创建 tRPC 客户端：

   import { createTRPCProxyClient } from '@trpc/client';
   import { ipcLink } from 'electron-trpc/renderer';
   
   export const client = createTRPCProxyClient({
     links: [ipcLink()]
   });
   

   现在，你可以在渲染进程中像平常一样使用客户端（例如，使用 @trpc/react）。

3. 应用案例和最佳实践

应用案例

electron-trpc 的一个典型用例是控制和显示在主进程中运行的脚本状态。例如，转换视频格式、批量上传到服务器、运行 Python 脚本并显示进度和控制它。

在主进程中，你可以将路由控制器建模为 React 状态管理工具（如 RxJS、MobX、XState 或事件发射器）。在渲染进程中，你可以简单地订阅该状态，并创建事件来与之交互，就像处理普通状态一样。

最佳实践

• 类型安全：确保所有 IPC 调用都是类型安全的，以避免运行时错误。
• 上下文隔离：确保 contextIsolation 已启用，这是默认设置。
• 错误处理：在 IPC 调用中添加适当的错误处理机制，以确保应用的稳定性。

4. 典型生态项目

• tRPC：electron-trpc 基于 tRPC，因此你可以利用 tRPC 社区中的所有教程和示例。
• RxJS：在主进程中使用 RxJS 进行状态管理，可以轻松实现响应式编程。
• MobX：另一个流行的状态管理工具，适用于需要简单且高效状态管理的场景。
• XState：用于复杂状态机的管理，适用于需要复杂状态转换的应用。

通过这些工具和 electron-trpc 的结合，你可以构建出高效、类型安全的 Electron 应用。

electron-trpc Build type-safe Electron inter-process communication using tRPC 项目地址: https://gitcode.com/gh_mirrors/el/electron-trpc