参考electron-trpc的示例代码：（做事件订阅/事件触发）的时候：如何使用（订阅和触发）呢？

Question

您好，在参考electron-trpc的示例代码：（做事件订阅/事件触发）的时候：
https://github.com/jsonnull/electron-trpc/blob/main/examples/basic-react/electron/api.ts

代码如下：

import z from 'zod';
import { initTRPC } from '@trpc/server';
import { observable } from '@trpc/server/observable';
import { EventEmitter } from 'events';

const ee = new EventEmitter();

const t = initTRPC.create({ isServer: true });

export const router = t.router({
  greeting: t.procedure.input(z.object({ name: z.string() })).query((req) => {
    const { input } = req;

    ee.emit('greeting', `Greeted ${input.name}`);
    return {
      text: `Hello ${input.name}` as const,
    };
  }),
  subscription: t.procedure.subscription(() => {
    return observable((emit) => {
      function onGreet(text: string) {
        emit.next({ text });
      }

      ee.on('greeting', onGreet);

      return () => {
        ee.off('greeting', onGreet);
      };
    });
  }),
});

export type AppRouter = typeof router;

请问下，应该如何使用呢？

1、在主进程如何使用（订阅和触发）？
2、在渲染进程如何使用（订阅和触发）？

Answer 1

1.设置项目结构

创建一个新的项目文件夹，并在其中创建以下文件和文件夹结构：

my-electron-trpc-app/
├── main.ts
├── preload.ts
├── renderer.ts
├── package.json
├── tsconfig.json
└── webpack.config.js

2.安装依赖

在项目根目录下运行以下命令来安装必要的依赖：

npm init -y
npm install electron @trpc/server @trpc/client electron-trpc zod typescript ts-loader webpack webpack-cli

3. 配置 TypeScript

在项目根目录下创建 tsconfig.json 文件，并添加以下内容：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist"
  },
  "include": ["./**/*.ts"]
}

4. 配置 Webpack

在项目根目录下创建 webpack.config.js 文件，并添加以下内容：

const path = require('path');

module.exports = {
  entry: {
    main: './main.ts',
    preload: './preload.ts',
    renderer: './renderer.ts',
  },
  target: 'electron-main',
  module: {
    rules: [
      {
        test: /\.ts$/,
        include: /src/,
        use: [{ loader: 'ts-loader' }],
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },
};

5. 添加 Electron 脚本

package.json

"scripts": {
  "start": "webpack && electron ."
}

6. 编写代码

main.ts（主进程代码）

 import { app, BrowserWindow } from 'electron';
import { createIPCHandler } from 'electron-trpc/main';
import { initTRPC } from '@trpc/server';
import { observable } from '@trpc/server/observable';
import { EventEmitter } from 'events';
import { z } from 'zod';

const ee = new EventEmitter();
const t = initTRPC.create({ isServer: true });

export const router = t.router({
  greeting: t.procedure.input(z.object({ name: z.string() })).query((req) => {
    const { input } = req;
    ee.emit('greeting', `Greeted ${input.name}`);
    return { text: `Hello ${input.name}` };
  }),
  subscription: t.procedure.subscription(() => {
    return observable((emit) => {
      function onGreet(text: string) {
        emit.next({ text });
      }
      ee.on('greeting', onGreet);
      return () => {
        ee.off('greeting', onGreet);
      };
    });
  }),
});

app.on('ready', () => {
  const win = new BrowserWindow({
    webPreferences: {
      preload: 'path/to/preload.js',
    },
  });
  createIPCHandler({ router, windows: [win] });

  // 示例：在主进程中触发事件
  setTimeout(() => {
    ee.emit('greeting', 'Hello from main process');
  }, 5000); // 5秒后触发事件
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

preload.ts （预加载脚本）

import { exposeElectronTRPC } from 'electron-trpc/main';

process.once('loaded', async () => {
  exposeElectronTRPC();
});

renderer.ts （渲染进程代码）

 import { createTRPCProxyClient } from '@trpc/client';
import { ipcLink } from 'electron-trpc/renderer';

export const client = createTRPCProxyClient({
  links: [ipcLink()],
});

// 触发事件
client.greeting({ name: 'YourName' }).then(response => {
  console.log(response.text); // 输出: Hello YourName
});

// 订阅事件
client.subscription('subscription', {
  next(data) {
    console.log(data.text);
  },
  error(err) {
    console.error('Subscription error:', err);
  },
});

7. 运行项目

在项目根目录下运行以下命令来构建并启动 Electron 应用：

npm start