Wie bringt man eine gRPC-definierte API in den Webbrowser?

Leider gibt es noch keine gute Antwort für Sie.

Die vollständige Unterstützung des Streaming von RPCs aus dem Browser erfordert, dass HTTP2-Trailer von den Browsern unterstützt werden. Zum Zeitpunkt des Schreibens dieser Antwort ist dies nicht der Fall.

Siehe diese Ausgabe für die Diskussion zum Thema.

Ansonsten, ja, Sie benötigen ein vollständiges Übersetzungssystem zwischen WebSockets und gRPC. Vielleicht wird die Inspiration von grpc-gateway der Beginn eines solchen Projekts sein, aber das ist immer noch eine sehr lange Sicht.

Eine offizielle Implementierung von Grpc-Web (Beta) wurde am 23.03.2014 veröffentlicht. Sie finden es bei

https://github.com/grpc/grpc-web

Die folgenden Anweisungen stammen aus der Readme-Datei:

Definieren Sie Ihren gRPC-Dienst:

service EchoService {
  rpc Echo(EchoRequest) returns (EchoResponse);

  rpc ServerStreamingEcho(ServerStreamingEchoRequest)
      returns (stream ServerStreamingEchoResponse);
}

Erstellen Sie den Server in der gewünschten Sprache.

Erstellen Sie Ihren JS-Client, um Anrufe vom Browser aus zu tätigen:

var echoService = new proto.grpc.gateway.testing.EchoServiceClient(
  'http://localhost:8080');

Machen Sie einen unären RPC-Aufruf

var unaryRequest = new proto.grpc.gateway.testing.EchoRequest();
unaryRequest.setMessage(msg);
echoService.echo(unaryRequest, {},
  function(err, response) {
    console.log(response.getMessage());
  });

Streams vom Server zum Browser werden unterstützt:

var stream = echoService.serverStreamingEcho(streamRequest, {});
stream.on('data', function(response) {
  console.log(response.getMessage());
});

Bidirektionale Streams werden NICHT unterstützt:

Dies ist eine Arbeit in Arbeit und auf der grpc-web roadmap . Während es ein example protobuf gibt, das Bidi-Streaming zeigt, macht dieser Kommentar klar, dass dieses Beispiel noch nicht funktioniert.

Hoffentlich wird sich das bald ändern. :)

Die grpc-Leute bei https://github.com/grpc/ bauen derzeit ein js Implementierung .

Die Reproduktion ist bei https://github.com/grpc/grpc-web (ergibt 404 ->), die sich derzeit (2016-12-20) im frühen Zugriff befindet, so dass Sie anfordern) müssen Zugriff .

https://github.com/tmc/grpc-websocket-proxy klingt so, als könnte es Ihren Bedürfnissen entsprechen. Dies übersetzt Json über Web-Sockets in Grpc (Layer auf dem Grpc-Gateway).

GRPC-Bus WebSocket-Proxy tut genau dies, indem er alle GRPC-Aufrufe über eine WebSocket-Verbindung weiterleitet, um Ihnen etwas zu vermitteln, das der Node-GRPC-API im Browser sehr ähnlich sieht. Im Gegensatz zu GRPC-Gateway werden sowohl Streaming-Anforderungen und Streaming-Antworten als auch nicht-Streaming-Anrufe verwendet. 

Es gibt eine Server- und eine Client-Komponente ..__ Der GRPC Bus WebSocket-Proxyserver kann mit Docker ausgeführt werden, indem docker run gabrielgrant/grpc-bus-websocket-proxy ausgeführt wird.

Auf der Browserseite müssen Sie den GRPC Bus WebSocket Proxy-Client mit npm install grpc-bus-websocket-client installieren.

und erstellen Sie ein neues GBC-Objekt mit: new GBC(<grpc-bus-websocket-proxy address>, <protofile-url>, <service map>)

Zum Beispiel:

var GBC = require("grpc-bus-websocket-client");

new GBC("ws://localhost:8080/", 'helloworld.proto', {helloworld: {Greeter: 'localhost:50051'}})
  .connect()
  .then(function(gbc) {
    gbc.services.helloworld.Greeter.sayHello({name: 'Gabriel'}, function(err, res){
      console.log(res);
    });  // --> Hello Gabriel
  });

Die Clientbibliothek erwartet, dass sie die .proto-Datei mit der Anforderung AJAX herunterladen kann. service-map enthält die URLs der verschiedenen Dienste, die in Ihrer Proto-Datei definiert sind, wie vom Proxy-Server angezeigt.

Weitere Informationen finden Sie im GRPC Bus WebSocket Proxy-Client README

Ich sehe, dass viele Antworten nicht auf eine bidirektionale Lösung über WebSocket hinwiesen, da das OP die Browserunterstützung anforderte.

Sie können JSON-RPC anstelle von gRPC verwenden, um einen bidirektionalen RPC über WebSocket zu erhalten, der sehr viel mehr unterstützt, einschließlich WebRTC (Browser-Browser).

Ich denke, es könnte geändert werden, um gRPC zu unterstützen, wenn Sie diese Art der Serialisierung wirklich benötigen.

Anforderungsobjekte werden jedoch von Browser-Registerkarte zu Browser-Registerkarte nicht serialisiert und nativ übertragen. Dies gilt auch für NodeJS-Cluster oder -Thread-Worker, was erheblich mehr Leistung bietet.

Sie können auch "Zeiger" an SharedArrayBuffer übertragen, anstatt das gRPC-Format zu serialisieren.

Die JSON-Serialisierung und Deserialisierung in V8 ist ebenfalls unschlagbar.

https://github.com/bigstepinc/jsonrpc-bidirectional

Wenn Sie sich die aktuellen Lösungen mit gRPC über das Web anschauen, finden Sie Folgendes zum Zeitpunkt des Schreibens (und was ich gefunden habe):

• gRPC-web : erfordert TypeScript für den Client
• gRPC-Web-Proxy : erfordert Go
• gRPC-gateway : erfordert .proto-Änderungen und Dekorationen
• gRPC-Bus-Websocket-Proxy-Server : zum Zeitpunkt der Abfassung dieses Dokuments mangelt es an Tests und scheint aufgegeben zu sein (edit: schau dir die Kommentare des ursprünglichen Autors an!)
• gRPC-Dynamic-Gateway : Ein bisschen Overkill für einfache gRPC-Dienste und Authentifizierung ist umständlich
• gRPC-Bus : erfordert etwas für den Transport

Ich möchte auch meine eigene Lösung schamlos anschließen, die ich für mein Unternehmen geschrieben habe. Sie wird in der Produktion verwendet, um Anfragen an einen gRPC-Dienst zu senden, der nur unäre und Server-Streaming-Aufrufe enthält:

• gRPC-Express

Jeder Zoll des Codes wird durch Tests abgedeckt. Da es sich um eine Express-Middleware handelt, sind keine weiteren Änderungen an Ihrem gRPC-Setup erforderlich. Sie können die HTTP-Authentifizierung auch an Express delegieren (z. B. mit Passport).