Socket
Socket
Sign inDemoInstall

grpc-web

Package Overview
Dependencies
0
Maintainers
2
Versions
22
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

grpc-web


Version published
Maintainers
2
Install size
44.1 kB
Created

Changelog

Source

1.5.0

  • #1369 (Typescript) Mark some metadata parameters as optional @andrewmbenton
  • #1335 Update Debian (and other deps) and remove Java In-process Proxy
  • #1334 Allow mixed-case headers
  • #1330 Update ES6 .d.ts imports with comment about corresponding proto import... @gonzojive
  • #1313 Update ES6 imports with comment about corresponding proto import path. @reddaly

Readme

Source

gRPC-Web Client Runtime Library

gRPC-Web provides a Javascript library that lets browser clients access a gRPC service. You can find out much more about gRPC in its own website.

gRPC-Web is now Generally Available, and considered stable enough for production use.

gRPC-Web clients connect to gRPC services via a special gateway proxy: the current version of the library uses Envoy by default, in which gRPC-Web support is built-in.

In the future, we expect gRPC-Web to be supported in language-specific Web frameworks, such as Python, Java, and Node. See the roadmap doc.

Quick Start

This example is using the echo.proto file from the Echo Example.

  1. Add grpc-web as a dependency using npm.
$ npm i grpc-web
  1. Download protoc and the protoc-gen-grpc-web protoc plugin.

You can download the protoc binary from the official protocolbuffers release page.

You can download the protoc-gen-grpc-web protoc plugin from our Github release page.

Make sure they are both executable and are discoverable from your PATH.

  1. Generate your proto messages and the service client stub classes with protoc and the protoc-gen-grpc-web plugin. You can set the import_style=commonjs option for both --js_out and --grpc-web_out.
$ protoc -I=$DIR echo.proto \
--js_out=import_style=commonjs:generated \
--grpc-web_out=import_style=commonjs,mode=grpcwebtext:generated
  1. Start using your generated client!
const {EchoServiceClient} = require('./generated/echo_grpc_web_pb.js');
const {EchoRequest} = require('./generated/echo_pb.js');

const client = new EchoServiceClient('localhost:8080');

const request = new EchoRequest();
request.setMessage('Hello World!');

const metadata = {'custom-header-1': 'value1'};

client.echo(request, metadata, (err, response) => {
  // ...
});

What's Next

To complete the example, you need to run a proxy that understands the gRPC-Web protocol between your browser client and your gRPC service. The default proxy currently is Envoy. Please visit our Github repo for more information.

Here's a quick way to get started!

$ git clone https://github.com/grpc/grpc-web
$ cd grpc-web
$ docker-compose up node-server envoy commonjs-client

Open a browser tab, and go to:

http://localhost:8081/echotest.html

TypeScript Support

The grpc-web module can now be imported as a TypeScript module. This is currently an experimental feature. Any feedback welcome!

When using the protoc-gen-grpc-web protoc plugin, mentioned above, pass in either:

  • import_style=commonjs+dts: existing CommonJS style stub + .d.ts typings
  • import_style=typescript: full TypeScript output
import * as grpcWeb from 'grpc-web';
import {EchoServiceClient} from './echo_grpc_web_pb';
import {EchoRequest, EchoResponse} from './echo_pb';

const echoService = new EchoServiceClient('http://localhost:8080', null, null);

const request = new EchoRequest();
request.setMessage('Hello World!');

const call = echoService.echo(request, {'custom-header-1': 'value1'},
  (err: grpcWeb.RpcError, response: EchoResponse) => {
    console.log(response.getMessage());
  });
call.on('status', (status: grpcWeb.Status) => {
  // ...
});

See a full TypeScript example here.

Run Tests

Pre-requisites:

  • protoc
  • protoc-gen-grpc-web plugin
$ npm test

FAQs

Last updated on 09 Nov 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc