@connectrpc/connect-web

What is @connectrpc/connect-web?

@connectrpc/connect-web is a package designed to facilitate the use of gRPC-web, a protocol that allows for the use of gRPC in web applications. It provides tools for creating and managing gRPC-web clients, enabling communication between web applications and gRPC services.

What are @connectrpc/connect-web's main functionalities?

Creating a gRPC-web client

This code demonstrates how to create a gRPC-web client using @connectrpc/connect-web. It imports necessary functions and a service definition, sets up a transport with a base URL, and creates a client for the specified service.

import { createConnectTransport, createPromiseClient } from '@connectrpc/connect-web';
import { MyService } from './gen/my_service_connectweb';

const transport = createConnectTransport({
  baseUrl: 'https://my-grpc-service.com',
});

const client = createPromiseClient(MyService, transport);

Making a gRPC call

This code shows how to make a gRPC call using the client created with @connectrpc/connect-web. It calls a method on the client with a request object and logs the response.

async function fetchData() {
  const response = await client.myMethod({
    requestParam: 'value'
  });
  console.log(response);
}

fetchData();

Other packages similar to @connectrpc/connect-web

grpc-web

grpc-web is a JavaScript implementation of gRPC for web clients. It provides similar functionality to @connectrpc/connect-web, allowing web applications to communicate with gRPC services. However, grpc-web is more established and widely used, whereas @connectrpc/connect-web may offer a more modern or streamlined API.

grpc

grpc is the official Node.js library for gRPC, primarily used for server-side applications. While it supports full gRPC functionality, it does not directly support gRPC-web, which is specifically designed for web clients. @connectrpc/connect-web is tailored for web environments, making it more suitable for client-side use.

README

@connectrpc/connect-web

Connect is a family of libraries for building and consuming APIs on different languages and platforms. @connectrpc/connect brings type-safe APIs with Protobuf to TypeScript.

@connectrpc/connect-web provides the following adapters for web browsers, and any other platform that has the fetch API on board:

createConnectTransport()

Lets your clients running in the web browser talk to a server with the Connect protocol:

import { createClient } from "@connectrpc/connect";
+ import { createConnectTransport } from "@connectrpc/connect-web";
import { ElizaService } from "./gen/eliza_connect.js";

+ // A transport for clients using the Connect protocol with fetch()
+ const transport = createConnectTransport({
+   baseUrl: "https://demo.connectrpc.com",
+ });

const client = createClient(ElizaService, transport);
const { sentence } = await client.say({ sentence: "I feel happy." });
console.log(sentence) // you said: I feel happy.

createGrpcWebTransport()

Lets your clients running in the web browser talk to a server with the gRPC-web protocol:

import { createClient } from "@connectrpc/connect";
+ import { createGrpcWebTransport } from "@connectrpc/connect-web";
import { ElizaService } from "./gen/eliza_connect.js";

+ // A transport for clients using the Connect protocol with fetch()
+ const transport = createGrpcWebTransport({
+   baseUrl: "https://demo.connectrpc.com",
+ });

const client = createClient(ElizaService, transport);
const { sentence } = await client.say({ sentence: "I feel happy." });
console.log(sentence) // you said: I feel happy.

Getting started

To get started with Connect, head over to the docs for a tutorial, or take a look at our example.

Connect plays nice with Vue, Svelte, Remix, Next.js, Angular and many others. Take a look at our examples for various frameworks.