Building High-Performance APIs with gRPC

syntax = "proto3";

package coffee;

service Coffee {
  rpc Price(PriceRequest) returns (PriceResponse) {};
  rpc RandomFlavors(FlavorRequest) returns (stream FlavorResponse) {};
}

message PriceRequest {
  int32 coffees = 1;
}

message PriceResponse {
  int32 price = 1;
}

message FlavorRequest {
  int32 count = 1;
}

message FlavorResponse {
  int32 flavor_id = 1;
}

grpc-tutorial/
├── server/                    # gRPC server implementation
│   ├── index.ts              # Main server file
│   ├── protos/               # Protocol buffer definitions
│   └── package.json          # Server dependencies
└── client/                   # Next.js client application
    ├── app/                  # Next.js app directory
    │   ├── price/            # Coffee price calculation page
    │   ├── randomFlavors/    # Streaming flavors page
    │   └── api/              # API routes
    ├── protos/               # Generated types and client
    └── package.json          # Client dependencies

// server/index.ts
import * as grpc from '@grpc/grpc-js';
import * as protoLoader from '@grpc/proto-loader';

const PROTO_PATH = './protos/coffee.proto';

const packageDefinition = protoLoader.loadSync(PROTO_PATH, {
  keepCase: true,
  longs: String,
  enums: String,
  defaults: true,
  oneofs: true,
});

const coffeeProto = grpc.loadPackageDefinition(packageDefinition);

// Unary RPC implementation
function price(call: any, callback: any) {
  const coffees = call.request.coffees;
  const totalPrice = coffees * 20; // $20 per coffee
  callback(null, { price: totalPrice });
}

// Server streaming RPC implementation
function randomFlavors(call: any) {
  const count = call.request.count || 10;
  let sent = 0;
  
  const interval = setInterval(() => {
    if (sent >= count) {
      call.end();
      clearInterval(interval);
      return;
    }
    
    const flavorId = Math.floor(Math.random() * 100) + 1;
    call.write({ flavor_id: flavorId });
    sent++;
  }, 1000);
}

const server = new grpc.Server();
server.addService(coffeeProto.coffee.Coffee.service, {
  price,
  randomFlavors,
});

server.bindAsync('0.0.0.0:8082', 
  grpc.ServerCredentials.createInsecure(), 
  () => {
    console.log('gRPC server running on port 8082');
    server.start();
  }
);

// client/app/price/page.tsx - Unary RPC
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

async function calculatePrice(formData: FormData) {
  'use server';
  
  const coffees = parseInt(formData.get('coffees') as string);
  
  // gRPC client call
  const client = new CoffeeClient('localhost:8082', 
    grpc.credentials.createInsecure());
    
  return new Promise((resolve, reject) => {
    client.price({ coffees }, (error: any, response: any) => {
      if (error) reject(error);
      else resolve(response.price);
    });
  });
}

export default function PricePage() {
  return (
    <Card className="w-full max-w-md mx-auto">
      <CardHeader>
        <CardTitle>Coffee Price Calculator</CardTitle>
      </CardHeader>
      <CardContent>
        <form action={calculatePrice}>
          <input 
            name="coffees" 
            type="number" 
            placeholder="Number of coffees"
            className="w-full p-2 border rounded"
          />
          <button 
            type="submit"
            className="w-full mt-4 p-2 bg-blue-600 text-white rounded"
          >
            Get Order Price
          </button>
        </form>
      </CardContent>
    </Card>
  );
}

// client/app/randomFlavors/page.tsx - Server Streaming
'use client';

import { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

export default function RandomFlavorsPage() {
  const [flavors, setFlavors] = useState<number[]>([]);
  const [isStreaming, setIsStreaming] = useState(false);

  const startStream = async () => {
    setIsStreaming(true);
    setFlavors([]);
    
    try {
      const response = await fetch('/api/randomFlavors', {
        method: 'POST',
        body: JSON.stringify({ count: 10 }),
      });
      
      const reader = response.body?.getReader();
      const decoder = new TextDecoder();
      
      while (true) {
        const { done, value } = await reader!.read();
        if (done) break;
        
        const chunk = decoder.decode(value);
        const lines = chunk.split('\n').filter(Boolean);
        
        for (const line of lines) {
          if (line.startsWith('data: ')) {
            const data = JSON.parse(line.slice(6));
            setFlavors(prev => [...prev, data.flavor_id]);
          }
        }
      }
    } catch (error) {
      console.error('Streaming error:', error);
    } finally {
      setIsStreaming(false);
    }
  };

  return (
    <Card className="w-full max-w-md mx-auto">
      <CardHeader>
        <CardTitle>Random Flavors Stream</CardTitle>
      </CardHeader>
      <CardContent>
        <button 
          onClick={startStream}
          disabled={isStreaming}
          className="w-full p-2 bg-green-600 text-white rounded disabled:opacity-50"
        >
          {isStreaming ? 'Streaming...' : 'Get Random Flavors'}
        </button>
        
        <div className="mt-4 space-y-2">
          {flavors.map((flavor, index) => (
            <div key={index} className="p-2 bg-gray-100 rounded">
              Flavor ID: {flavor}
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

1. 1
   Clone the repository:

   git clone https://github.com/audoir/grpc-tutorial.git
2. 2
   Start the gRPC server:

   cd server && npm install && npm run serve
3. 3
   Start the Next.js client:

   cd client && npm install && npm run dev
4. 4
   Explore the application:

   http://localhost:3000/price - Coffee price calculator (Unary RPC)

   http://localhost:3000/randomFlavors - Random flavors stream (Server Streaming)