Trpc入门：新手必读的简单教程

本文提供了Trpc入门的全面指南，介绍了Trpc的基本概念、主要特点和优势。文章详细讲解了Trpc的安装与配置步骤，并通过实例演示了如何创建和运行第一个Trpc服务。此外，文章还涵盖了Trpc的核心概念和常见问题的解决方法。

什么是Trpc

Trpc（TypeScript RPC）是由Meta公司（原Facebook）开发的一个高性能、高可扩展性的远程过程调用（RPC）框架。它通过使用TypeScript定义服务接口，并提供了一套完善的服务、错误处理和调用追踪机制，以实现更快速、更安全的微服务架构开发。

Trpc的主要特点和优势

1. 强类型支持：Trpc通过TypeScript提供了一套强类型定义机制，使开发者能够更好地管理和维护服务接口。
2. 高性能：Trpc采用了高效的序列化和反序列化机制，能够快速处理大量数据。
3. 可扩展性强：Trpc具有强大的插件与中间件支持，可方便地扩展和定制服务。
4. 跨语言支持：虽然Trpc主要适用于TypeScript和JavaScript环境，但也可以通过其他语言的客户端库与服务交互。
5. 可靠的错误处理：Trpc内置了详细的错误处理机制，使开发者能够快速定位并解决服务端错误。
6. 强大的工具支持：Trpc提供了一系列开发工具，如Codegen、Trpc Devtools等，帮助开发者更高效地开发和调试服务。

Trpc的应用场景

Trpc适用于各种微服务场景，例如：

• 前后端分离：前后端采用不同的语言和技术栈，通过Trpc进行通信。
• 服务化系统：将单体应用拆分成多个微服务，通过Trpc实现服务间的通信。
• 跨语言项目：不同团队使用不同的编程语言，但需要进行数据交换和通信。
• 实时数据同步：在前后端之间实时同步数据，确保数据一致性。

环境准备

在安装和配置Trpc之前，首先确保已经安装了Node.js环境。未安装Node.js的读者请在命令行执行以下命令安装：

curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs

此外，还需要安装TypeScript和npm（Node.js的包管理器）：

npm install -g typescript
npm install -g npm

安装Trpc

安装Trpc的过程相对简单，首先在项目中初始化一个新的Node.js项目：

npm init -y
npm install --save trpc

配置项目

在项目中配置Trpc，需要创建一个Trpc服务配置文件。在项目根目录下创建一个文件trpc.config.ts：

import { createContext } from './src/context';

export default {
  router: () => import('./src/router').then(r => r.default),
  createContext,
  // 可选配置项
  // transformer
  // logger
  // errorFormatter
}

该配置文件指定了路由模块的导入路径和创建上下文的函数。

示例代码

假设已有Node.js环境和TypeScript安装，以下是完整的安装与配置过程：

1. 初始化一个新的Node.js项目并安装Trpc：

   npm init -y
   npm install --save trpc

2. 创建trpc.config.ts文件：

   import { createContext } from './src/context';
   
   export default {
    router: () => import('./src/router').then(r => r.default),
    createContext,
    // 可选配置项
    // transformer
    // logger
    // errorFormatter
   }

服务端配置

首先，定义服务端的路由模块。在src/router.ts中：

import { t } from 'tRPC';

export const appRouter = t.router({
  hello: t.procedure.query(() => {
    return {
      message: 'Hello, world!',
    };
  }),
});

该模块定义了一个名为hello的查询操作，该操作返回一个包含消息的对象。

客户端配置

接下来，定义客户端的配置。在src/trpc.ts中：

import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import { appRouter } from './router';

export const trpc = createTRPCProxyClient({
  links: [
    httpBatchLink({
      url: '/api/trpc',
    }),
  ],
  router: appRouter,
});

通过createTRPCProxyClient创建了一个Trpc客户端代理，并配置了HTTP批量链接。

运行测试

现在，在服务器端设置一个简单的HTTP服务器，并在客户端测试调用：

服务端代码（示例使用Node.js的Express）：

import express from 'express';
import { NextApiRequest, NextApiResponse } from 'next';
import { appRouter } from './src/router';
import { createExpressMiddleware } from '@trpc/server/adapters/express';

const app = express();
const port = 3000;

app.use(
  '/api/trpc',
  createExpressMiddleware({
    router: appRouter,
  })
);

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

客户端代码（示例使用Node.js的Fetch API）：

import { trpc } from './src/trpc';

const result = await trpc.hello.query();

console.log(result.message); // 输出：Hello, world!

启动服务并运行客户端代码，可以验证服务端和客户端之间的通信。

服务定义

服务定义是指定义服务接口，通常在appRouter.ts中完成。服务由多个操作组成，每个操作定义了输入参数和返回结果。例如：

import { t } from 'tRPC';

export const appRouter = t.router({
  getUser: t.procedure.input<string>().query(async ({ input }) => {
    // 这里使用输入参数查询用户，并返回用户信息
  }),
});

路由配置

路由配置通常在服务端完成，通过路由模块将请求分发到正确的操作。例如，在src/router.ts中：

import express from 'express';
import { appRouter } from './appRouter';
import { createExpressMiddleware } from '@trpc/server/adapters/express';

const app = express();
const port = 3000;

app.use(
  '/api/trpc',
  createExpressMiddleware({
    router: appRouter,
  })
);

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

错误处理

Trpc提供了详细的错误处理机制，可以在服务端和客户端处理错误信息。例如：

服务端错误处理：

import { t } from 'tRPC';

export const appRouter = t.router({
  getUser: t.procedure.input<string>().query(async ({ input }) => {
    if (!isValidUser(input)) {
      throw new Error('Invalid user');
    }
    // 这里使用输入参数查询用户，并返回用户信息
  }),
});

客户端错误处理：

import { trpc } from './src/trpc';

try {
  const result = await trpc.getUser.query({ input: 'exampleUser' });
  console.log(result);
} catch (error) {
  console.error('Error:', error);
}

常见错误及解决办法

• 404 Not Found：确保请求路径正确，且服务端已经配置了正确的路由。
• TypeError：检查输入参数和返回结果是否符合定义。
• Error 500：检查服务端代码，确保没有未处理的异常。

性能优化技巧

• 批处理请求：使用httpBatchLink减少网络延迟。
• 缓存结果：对于不需要频繁更新的数据，可以考虑添加缓存。
• 异步处理：使用异步编程模式，提高性能。

安全性考虑

• 输入验证：确保所有输入都经过验证，避免注入攻击。
• 身份验证和授权：在服务端和客户端实现身份验证和授权。
• 加密传输：使用HTTPS协议加密传输数据。

需求分析

假设需要开发一个简单的博客应用，包括文章列表、文章详情和用户评论功能。用户需要能够查看文章列表、查看具体文章的详细内容，并在文章下发表评论。

设计实现

首先，定义服务接口：

import { t } from 'tRPC';

export const blogRouter = t.router({
  getPosts: t.procedure.query(async () => {
    // 查询所有文章
  }),
  getPostById: t.procedure.input<number>().query(async ({ input }) => {
    // 通过ID查询文章
  }),
  addComment: t.procedure.input<{ postId: number; comment: string }>().mutation(async ({ input }) => {
    // 添加评论
  }),
});

然后，实现服务端和客户端代码：

服务端代码：

import express from 'express';
import { NextApiRequest, NextApiResponse } from 'next';
import { blogRouter } from './src/blogRouter';
import { createExpressMiddleware } from '@trpc/server/adapters/express';

const app = express();
const port = 3000;

app.use(
  '/api/blog',
  createExpressMiddleware({
    router: blogRouter,
  })
);

app.get('/', (req, res) => {
  res.send('Blog API');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

客户端代码：

import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import { blogRouter } from './src/blogRouter';

export const blogClient = createTRPCProxyClient({
  links: [
    httpBatchLink({
      url: '/api/blog',
    }),
  ],
  router: blogRouter,
});

测试部署

测试代码如下：

async function testApi() {
  const posts = await blogClient.getPosts.query();
  console.log(posts);

  const postById = await blogClient.getPostById.query({ input: 1 });
  console.log(postById);

  const addCommentResult = await blogClient.addComment.mutate({
    input: { postId: 1, comment: 'Great post!' },
  });
  console.log(addCommentResult);
}

testApi().catch(console.error);

部署步骤：

1. 确保所有代码已经保存。

2. 启动服务端：

   node server.js

3. 运行客户端测试代码：

   node client.js

至此，一个简单的博客应用已经构建完成，可以根据实际需求进一步优化和扩展。