So bringen Sie eine gRPC-definierte API in den Webbrowser

Wir wollen eine Javascript / HTML-GUI für unsere gRPC-Microservices erstellen. Da gRPC auf der Browserseite nicht unterstützt wird, haben wir uns überlegt, Web-Sockets zu verwenden, um eine Verbindung zu einem node.js-Server herzustellen, der den Zieldienst über grpc aufruft. Wir bemühen uns, eine elegante Lösung dafür zu finden. Zumal wir gRPC-Streams verwenden, um Ereignisse zwischen unseren Mikrodiensten zu übertragen. Es scheint, dass wir ein zweites RPC-System benötigen, um zwischen dem Front-End und dem node.js-Server zu kommunizieren. Dies scheint viel Aufwand und zusätzlichen Code zu sein, der gepflegt werden muss.

Hat jemand Erfahrung damit oder hat eine Idee, wie dies gelöst werden könnte?

Bearbeiten: Seit dem 23. Oktober 2008 ist das gRPC-Web-Projekt GA , was möglicherweise die offiziellste / standardisierteste Methode zur Lösung Ihres Problems ist. (Auch wenn es jetzt schon 2018 ist ...;))

Aus dem GA-Blog: "Mit gRPC-Web können Sie genau wie mit gRPC den Dienstvertrag zwischen Client- (Web-) und Back-End-gRPC-Diensten mithilfe von Protokollpuffern definieren. Der Client kann dann automatisch generiert werden. [...]"

Wir haben kürzlich gRPC-Web ( https://github.com/improbable-eng/grpc-web ) erstellt - einen Browser-Client- und Server-Wrapper, der dem vorgeschlagenen gRPC-Web-Protokoll folgt. Das Beispiel in diesem Repo sollte einen guten Ausgangspunkt bieten.

Für die Verwendung von Golang ist entweder ein eigenständiger Proxy oder ein Wrapper für Ihren gRPC-Server erforderlich. Der Proxy / Wrapper ändert die Antwort, um die Trailer in den Antworttext zu packen, damit sie vom Browser gelesen werden können.

Offenlegung: Ich bin ein Betreuer des Projekts.

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

Um Streaming-RPCs vom Browser vollständig zu unterstützen, müssen HTTP2-Trailer von den Browsern unterstützt werden, und zum Zeitpunkt des Schreibens dieser Antwort sind dies nicht der Fall.

In dieser Ausgabe finden Sie die Diskussion zum Thema.

Andernfalls benötigen Sie ein vollständiges Übersetzungssystem zwischen WebSockets und gRPC. Vielleicht könnte die Inspiration von grpc-gateway der Beginn eines solchen Projekts sein, aber das ist noch ein sehr langer Weg.

Eine offizielle Implementierung von grpc-web (Beta) wurde am 23.03.2008 veröffentlicht. Sie finden es unter

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

Die folgenden Anweisungen stammen aus der README-Datei:

Definieren Sie Ihren gRPC-Service:

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

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

Erstellen Sie den Server in einer beliebigen Sprache.

Erstellen Sie Ihren JS-Client, um Anrufe über den Browser zu tätigen:

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

Machen Sie einen unären RPC-Anruf

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 laufende Arbeit und an der grpc-web-Roadmap . Während es ein Beispielprotobuf gibt, das Bidi-Streaming zeigt, macht dieser Kommentar deutlich, dass dieses Beispiel noch nicht funktioniert.

Hoffentlich ändert sich das bald. :) :)

Die grpc-Leute unter https://github.com/grpc/ erstellen derzeit eine js- Implementierung .

Der Repro befindet sich unter https://github.com/grpc/grpc-web (gibt 404 ->), der sich derzeit (2016-12-20) im frühen Zugriff befindet, sodass Sie den Zugriff anfordern müssen .

https://github.com/tmc/grpc-websocket-proxy klingt so, als würde es Ihren Anforderungen entsprechen. Dies übersetzt json über Web-Sockets in grpc (Schicht über dem grpc-Gateway).

GRPC Bus WebSocket Proxy führt genau dies durch, indem alle GRPC-Aufrufe über eine WebSocket-Verbindung übertragen werden, um etwas zu erhalten, das der Node GRPC-API im Browser sehr ähnlich sieht. Im Gegensatz zu GRPC-Gateway funktioniert es sowohl mit Streaming-Anforderungen und Streaming-Antworten als auch mit Nicht-Streaming-Anrufen.

Es gibt sowohl eine Server- als auch eine Client-Komponente. Der GRPC Bus WebSocket Proxy-Server kann mit Docker ausgeführt werdendocker run gabrielgrant/grpc-bus-websocket-proxy

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

und erstellen Sie dann 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 die .protoDatei mit einer AJAX-Anforderung heruntergeladen werden kann. Hier finden Sie service-mapdie URLs der verschiedenen Dienste, die in Ihrer Protodatei definiert sind und vom Proxyserver angezeigt werden.

Weitere Informationen finden Sie in der README-Datei des GRPC Bus WebSocket Proxy-Clients

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

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

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

Für Browser-Tab zu Browser-Tab werden Anforderungsobjekte jedoch nicht serialisiert und nativ übertragen. Dies gilt auch für NodeJS-Cluster- oder Thread-Worker, die wesentlich mehr Leistung bieten.

Sie können auch "Zeiger" auf SharedArrayBuffer übertragen, anstatt über 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 Internet ansehen, sehen Sie hier, was zum Zeitpunkt des Schreibens verfügbar war (und was ich gefunden habe):

• gRPC-web : Benötigt TypeScript für den Client
• gRPC-Web-Proxy : erfordert Go
• gRPC-Gateway : erfordert .proto Modifikation und Dekoration
• gRPC-Bus-Websocket-Proxy-Server : Zum Zeitpunkt des Schreibens dieses Dokuments fehlen Tests und es scheint verlassen zu sein (Bearbeiten: Sehen Sie sich die Kommentare des ursprünglichen Autors an!)
• gRPC-dynamic-gateway : Ein kleiner Overkill für einfache gRPC-Dienste und die Authentifizierung ist umständlich
• gRPC-Bus : Benötigt etwas für den Transport

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

• gRPC-Express

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