@grpc/grpc-js provides full support for gRPC, including unary and streaming calls, authentication, and advanced features like metadata and error handling. It is a complete implementation of the gRPC protocol in JavaScript, making it suitable for all types of gRPC applications.

@improbable-eng/grpc-web offers support for gRPC-Web, including bi-directional streaming, which is not commonly supported in other gRPC-Web implementations. This makes it a unique choice for applications that require more advanced streaming capabilities while still being compatible with standard gRPC services.

grpc-web provides basic support for gRPC-Web, including unary and streaming calls. However, it does not support bi-directional streaming out of the box, making it more suitable for simpler use cases where advanced streaming features are not required.

@grpc/grpc-js supports both client-side and server-side streaming, allowing for more flexible and efficient data transfer between clients and servers. This is a key feature of gRPC that enables real-time communication and reduces latency in data transmission.

@improbable-eng/grpc-web supports bi-directional streaming, allowing both the client and server to send and receive messages simultaneously. This feature is particularly useful for applications that require real-time data exchange and can significantly improve performance and responsiveness.

grpc-web supports server-side streaming and client-side streaming, but does not support bi-directional streaming. This makes it suitable for applications that need one-way streaming but do not require the complexity of bi-directional communication.

@grpc/grpc-js integrates seamlessly with existing gRPC services and supports all standard gRPC features, making it easy to use in a wide range of applications. Its compatibility with the gRPC ecosystem ensures that it works well with other gRPC tools and libraries.

@improbable-eng/grpc-web is designed to work with existing gRPC services and requires minimal changes to the server-side implementation. Its lightweight design and support for standard gRPC features make it easy to integrate into existing projects.

grpc-web provides a simple and straightforward API for integrating gRPC into web applications. It is easy to set up and use, making it a good choice for projects that need quick and simple gRPC functionality without a lot of overhead.

gRPC Client Example with @grpc/grpc-js

const grpc = require('@grpc/grpc-js');
const protoLoader = require('@grpc/proto-loader');

// Load the protobuf
const packageDefinition = protoLoader.loadSync('path/to/protofile.proto');
const proto = grpc.loadPackageDefinition(packageDefinition);

// Create a client
const client = new proto.ServiceName('localhost:50051', grpc.credentials.createInsecure());

// Make a unary call
client.UnaryMethodName({ request: 'data' }, (error, response) => {
  if (error) {
    console.error('Error:', error);
  } else {
    console.log('Response:', response);
  }
});

// Make a streaming call
const call = client.StreamingMethodName();
call.on('data', (data) => {
  console.log('Streaming data:', data);
});
call.on('end', () => {
  console.log('Stream ended');
});
call.on('error', (error) => {
  console.error('Stream error:', error);
});

// Make a bi-directional streaming call
const biCall = client.BiDirectionalStreamingMethod();
biCall.on('data', (data) => {
  console.log('Received:', data);
  biCall.write({ response: 'data' }); // Send data back
});
biCall.on('end', () => {
  console.log('Bi-directional stream ended');
});
biCall.on('error', (error) => {
  console.error('Bi-directional stream error:', error);
});

gRPC-Web Client Example with @improbable-eng/grpc-web

import { grpc } from '@improbable-eng/grpc-web';
import { ServiceName } from './path/to/protofile_pb';

// Unary call
grpc.unary(ServiceName.UnaryMethodName, {
  request: { data: 'data' },
  host: 'http://localhost:50051',
  onEnd: (response) => {
    const { status, message } = response;
    if (status === 200) {
      console.log('Response:', message);
    } else {
      console.error('Error:', status, message);
    }
  },
});

// Bi-directional streaming
const stream = grpc.invoke(ServiceName.BiDirectionalStreamingMethod, {
  request: { data: 'data' },
  host: 'http://localhost:50051',
  onMessage: (message) => {
    console.log('Received:', message);
  },
  onEnd: (status, message) => {
    console.log('Stream ended:', status, message);
  },
});

// Send a message
stream.send({ data: 'data' });

gRPC-Web Client Example with grpc-web

import { grpc } from '@improbable-eng/grpc-web';
import { ServiceName } from './path/to/protofile_pb';

// Unary call
grpc.unary(ServiceName.UnaryMethodName, {
  request: { data: 'data' },
  host: 'http://localhost:50051',
  onEnd: (response) => {
    const { status, message } = response;
    if (status === 200) {
      console.log('Response:', message);
    } else {
      console.error('Error:', status, message);
    }
  },
});

// Streaming call
const stream = grpc.invoke(ServiceName.StreamingMethodName, {
  request: { data: 'data' },
  host: 'http://localhost:50051',
  onMessage: (message) => {
    console.log('Received:', message);
  },
  onEnd: (status, message) => {
    console.log('Stream ended:', status, message);
  },
});