参考electron-trpc的示例代码：（做事件订阅/事件触发）的时候：如何使用（订阅和触发）呢？
0
[待解决问题]
您好，在参考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、在渲染进程如何使用（订阅和触发）？
所有回答(1)
0
要在Electron中使用 electron-trpc 进行事件订阅和触发，你需要分别在主进程和渲染进程中进行适当的配置。下面是具体的步骤和代码示例，帮助你实现事件的订阅和触发。
1. 在主进程中使用（订阅和触发）
在主进程中，你可以通过调用RPC API来触发事件，并通过 EventEmitter 来监听事件。
// main.js (主进程)
import { app, BrowserWindow } from 'electron';
import { createTRPCServer } from '@trpc/server';
import { inferAsyncReturnType, initTRPC } from '@trpc/server';
import { router } from './path/to/api'; // 把你的 api.ts 文件路径替换为实际路径
const createContext = ({}) => ({});
const t = initTRPC.create({ isServer: true });
const startServer = () => {
const server = createTRPCServer({
router,
createContext,
});
return server;
};
app.on('ready', () => {
const mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
});
const server = startServer();
// 触发事件
server.call('greeting', { name: 'World' }).then((response) => {
console.log(response.text);
});
});
2. 在渲染进程中使用（订阅和触发）
在渲染进程中，你可以使用 tRPC 客户端来订阅事件，并通过该客户端发送请求来触发事件。
// renderer.js (渲染进程)
import { createTRPCProxyClient, httpLink } from '@trpc/client';
import { AppRouter } from './path/to/api'; // 把你的 api.ts 文件路径替换为实际路径
const trpc = createTRPCProxyClient<AppRouter>({
links: [
httpLink({
url: 'http://localhost:4000/trpc', // 确保这里的URL与你的Electron进程设置一致
}),
],
});
// 订阅事件
const unsubscribe = trpc.subscription('subscription').subscribe({
next: (data) => {
console.log('Received: ', data.text);
},
});
// 发送触发事件
const triggerGreeting = async (name) => {
const response = await trpc.greeting.query({ name });
console.log(response.text);
};
// 示例触发
triggerGreeting('John');
// 记得在适当的时候取消订阅
// unsubscribe();
说明
-
主进程：
- 调用
greeting来触发事件并传递参数。 greeting事件会通过EventEmitter触发，所有监听了这个事件的订阅都会收到通知。
- 调用
-
渲染进程：
- 使用
trpc.subscription创建一个订阅，以接收主进程发送的事件。 - 使用
trpc.greeting.query触发事件并获取响应。 - 确保在不需要订阅时调用
unsubscribe()来取消订阅，以避免内存泄漏。
- 使用
-
注意事项：
- 确保在 Electron 的所有相关进程中正确配置 TRPC。
- 根据具体的项目结构调整引入路径。
这样，你就可以在主进程和渲染进程中完成事件的订阅与触发了。如果你还有任何疑问或者需要进一步的帮助，请随时告诉我！
