gRPC für TypeScript: Bibliotheken und Anwendungsbeispiele

Online Python-Trainer für Anfänger

Lernen Sie Python einfach ohne theoretische Überlastung. Lösen Sie praktische Aufgaben mit automatischer Überprüfung und schreiben Sie Code direkt im Browser.

Kurs starten

gRPC für TypeScript: Bibliotheken und Beispiele

\n\n

gRPC ist ein leistungsstarkes RPC-Framework von Google, das auf HTTP/2 basiert und Protocol Buffers (protobuf) zur Datenserialisierung verwendet. In TypeScript (und Node.js) ermöglicht gRPC den Aufbau effizienter Microservice-Architekturen mit Unterstützung für Streams und bidirektionale Kommunikation. Auf dieser Seite erläutern wir die wichtigsten Bibliotheken, die Einrichtung der Arbeitsumgebung und erstellen ein funktionierendes Beispiel einer Client-Server-Anwendung.

\n\n

Wichtige Bibliotheken für gRPC in TypeScript

\n\n

Für die Arbeit mit gRPC im TypeScript-Ökosystem gibt es drei wichtige Pakete:

\n\n
    \n
  • @grpc/grpc-js — eine reine JavaScript-Implementierung von gRPC (ohne native Abhängigkeiten), die HTTP/2 vollständig unterstützt und unter Node.js 12+ läuft.
  • \n
  • @grpc/proto-loader — ein Lader für .proto-Dateien, der dynamisch JavaScript-Klassen basierend auf protobuf-Definitionen erstellt.
  • \n
  • ts-proto — ein Generator für TypeScript-Typen aus Proto-Dateien. Eine Alternative zum integrierten grpc-tools, jedoch mit besserer Unterstützung für strenge Typisierung.
  • \n
\n\n

Installation aller Komponenten mit einem Befehl:

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

Erstellen einer .proto-Datei

\n\n

Beginnen wir mit der Definition des Dienstes. Erstellen Sie eine Datei 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

Generierung von TypeScript-Typen mit ts-proto

\n\n

ts-proto erstellt vollständige Interfaces und Nachrichtenklassen. Installieren Sie protoc und das Plugin:

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

Als Ergebnis erhalten Sie eine Datei generated/hello.ts mit den Interfaces HelloRequest, HelloReply und dem typisierten Dienst GreeterClient.

\n\n

Server-Teil (gRPC-Server in TypeScript)

\n\n

Erstellen Sie eine Datei 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: `Hallo, ${name}!` });\n  },\n  SayHelloStream: (call: any) => {\n    const name = call.request.name;\n    for (let i = 0; i < 5; i++) {\n      call.write({ message: `Nachricht ${i + 1} für ${name}` });\n    }\n    call.end();\n  }\n});\n\nserver.bindAsync('0.0.0.0:50051', grpc.ServerCredentials.createInsecure(), () => {\n  console.log('Server läuft auf Port 50051');\n});
\n\n

Client-Teil (gRPC-Client in TypeScript)

\n\n

Erstellen Sie eine Datei 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// Unärer Aufruf\nclient.SayHello({ name: 'Alice' }, (err, response) => {\n  if (!err) console.log('Antwort:', response?.message);\n});\n\n// Server-Streaming-Aufruf\nconst stream = client.SayHelloStream({ name: 'Bob' });\nstream.on('data', (data) => console.log('Stream:', data.message));\nstream.on('end', (                    

Empfehlungen