如何向tRPC订阅传递参数？实现奇偶随机数筛选

一、服务端路由改造：添加参数与过滤逻辑 #

要实现带参数的订阅，需要在tRPC的procedure中定义输入参数，并根据参数过滤发射的随机数。以下是改造后的代码：

import { observable } from '@trpc/server/observable';
import { initTRPC } from '@trpc/server';

const t = initTRPC.create();

const postRouter = t.router({
  randomNumber: t.procedure
    // 定义输入参数：指定只能传入 'even'（偶数）或 'odd'（奇数）
    .input(t.enum({
      EVEN: 'even',
      ODD: 'odd'
    }))
    .subscription(({ input }) => {
      return observable<{ randomNumber: number }>((emit) => {
        const timer = setInterval(() => {
          let randomNum = Math.round(Math.random() * 10000);
          
          // 根据传入的参数调整数值，确保符合奇偶要求
          if (input === 'even' && randomNum % 2 !== 0) {
            randomNum += 1;
          } else if (input === 'odd' && randomNum % 2 === 0) {
            randomNum += 1;
          }

          emit.next({ randomNumber: randomNum });
        }, 1000);

        // 清理定时器：订阅取消时触发
        return () => clearInterval(timer);
      });
    })
});

export type AppRouter = typeof postRouter;

关键说明 #

• 用.input()方法定义参数的校验规则，这里使用枚举类型限制参数范围，避免非法输入
• 订阅函数通过解构{ input }获取客户端传入的参数
• 根据参数调整生成的随机数，确保每次发射的数值符合要求

二、客户端调用方式 #

1. React环境（使用@trpc/react-query） #

import { useSubscription } from '@trpc/react-query';
import { trpc } from './path-to-trpc-client';

function RandomNumberDisplay() {
  // 订阅偶数随机数，传入参数 'even'
  const { data, isLoading } = useSubscription(
    trpc.post.randomNumber.useSubscription('even')
  );

  if (isLoading) {
    return <div>等待数据...</div>;
  }

  return <div>实时偶数随机数：{data?.randomNumber}</div>;
}

2. 纯Node/浏览器客户端（无框架） #

import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './path-to-server-router';

// 创建tRPC客户端
const client = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://your-server-url/trpc',
    }),
  ],
});

// 订阅奇数随机数
const subscription = client.post.randomNumber.subscribe('odd', {
  next: (res) => {
    console.log('收到奇数随机数:', res.randomNumber);
  },
  error: (err) => {
    console.error('订阅异常:', err);
  },
  complete: () => {
    console.log('订阅已终止');
  },
});

// 如需取消订阅，调用以下方法
// subscription.unsubscribe();

关键说明 #

• 客户端调用时直接传入指定的参数（'even'或'odd'）
• React环境使用useSubscription钩子自动处理订阅的生命周期
• 纯客户端场景需手动管理订阅的取消，避免内存泄漏

内容的提问来源于stack exchange，提问作者boom