要在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
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。
根据具体的项目结构调整引入路径。
这样，你就可以在主进程和渲染进程中完成事件的订阅与触发了。如果你还有任何疑问或者需要进一步的帮助，请随时告诉我！