gRPC para TypeScript: bibliotecas y ejemplos de uso

Entrenador de Python en Línea para Principiantes

Aprende Python fácilmente sin sobrecargarte de teoría. Resuelve tareas prácticas con verificación automática, recibe pistas y escribe código directamente en el navegador, sin instalar nada.

Start Course

gRPC para TypeScript: bibliotecas y ejemplos

\n\n

gRPC es un framework RPC de alto rendimiento de Google, que funciona sobre HTTP/2 y utiliza Protocol Buffers (protobuf) para la serialización de datos. En TypeScript (y Node.js), gRPC permite construir arquitecturas de microservicios eficientes con soporte para streams y comunicación bidireccional. En esta página, analizaremos las bibliotecas principales, la configuración del entorno de trabajo y escribiremos un ejemplo funcional de una aplicación cliente-servidor.

\n\n

Bibliotecas principales para gRPC en TypeScript

\n\n

Para trabajar con gRPC en el ecosistema TypeScript, existen tres paquetes clave:

\n\n
    \n
  • @grpc/grpc-js — una implementación pura de gRPC en JavaScript (sin dependencias nativas), compatible completamente con HTTP/2 y funciona en Node.js 12+.
  • \n
  • @grpc/proto-loader — cargador de archivos .proto, que crea dinámicamente clases de JavaScript basadas en las definiciones de protobuf.
  • \n
  • ts-proto — generador de tipos TypeScript a partir de archivos proto. Alternativa a grpc-tools integrado, pero con mejor soporte para tipado estricto.
  • \n
\n\n

Instalación de todos los componentes con un solo comando:

\n\n
npm install @grpc/grpc-js @grpc/proto-loader ts-proto\nnpm install -D typescript @types/node
\n\n

Creación del archivo .proto

\n\n

Empecemos definiendo el servicio. Cree un archivo hello.proto:

\n\n
syntax = "proto3";\n\npackage hello;\n\nservice Greeter {\n  rpc SayHello (HelloRequest) returns (HelloReply);\n  rpc SayHelloStream (HelloRequest) returns (stream HelloReply);\n}\n\nmessage HelloRequest {\n  string name = 1;\n}\n\nmessage HelloReply {\n  string message = 1;\n}
\n\n

Generación de tipos TypeScript con ts-proto

\n\n

ts-proto crea interfaces y clases de mensajes completas. Instale protoc y el plugin:

\n\n
npm install -g protoc-gen-ts-proto\nprotoc --ts_proto_out=./generated hello.proto
\n\n

Como resultado, se obtendrá un archivo generated/hello.ts con las interfaces HelloRequest, HelloReply y el servicio tipado GreeterClient.

\n\n

Parte del servidor (servidor gRPC en TypeScript)

\n\n

Cree un archivo server.ts:

\n\n
import * as grpc from '@grpc/grpc-js';\nimport * as protoLoader from '@grpc/proto-loader';\nimport { ProtoGrpcType } from './generated/hello';\n\nconst packageDef = protoLoader.loadSync('hello.proto');\nconst grpcObj = (grpc.loadPackageDefinition(packageDef) as unknown) as ProtoGrpcType;\nconst server = new grpc.Server();\n\nserver.addService(grpcObj.hello.Greeter.service, {\n  SayHello: (call: any, callback: any) => {\n    const name = call.request.name;\n    callback(null, { message: `¡Hola, ${name}!` });\n  },\n  SayHelloStream: (call: any) => {\n    const name = call.request.name;\n    for (let i = 0; i < 5; i++) {\n      call.write({ message: `Mensaje ${i + 1} para ${name}` });\n    }\n    call.end();\n  }\n});\n\nserver.bindAsync('0.0.0.0:50051', grpc.ServerCredentials.createInsecure(), () => {\n  console.log('Servidor iniciado en el puerto 50051');\n});
\n\n

Parte del cliente (cliente gRPC en TypeScript)

\n\n

Cree un archivo client.ts:

\n\n
import * as grpc from '@grpc/grpc-js';\nimport * as protoLoader from '@grpc/proto-loader';\nimport { ProtoGrpcType } from './generated/hello';\n\nconst packageDef = protoLoader.loadSync('hello.proto');\nconst grpcObj = (grpc.loadPackageDefinition(packageDef) as unknown) as ProtoGrpcType;\n\nconst client = new grpcObj.hello.Greeter(\n  'localhost:50051',\n  grpc.credentials.createInsecure()\n);\n\n// Llamada unaria\nclient.SayHello({ name: 'Alicia' }, (err, response) => {\n  if (!err) console.log('Respuesta:', response?.message);\n});\n\n// Llamada con server-streaming\nconst stream = client.SayHelloStream({ name: 'Bob' });\nstream.on('data', (data) => console.log('Stream:', data.message));\nstream.on('end', (                    

Recommendations