gRPC en API's met hoge prestaties · Les

gRPC-Web-integratie

Leer gRPC-communicatie rechtstreeks vanuit webbrowsers mogelijk te maken met de gRPC-Web-proxy.

Les 1 van 411 stappen

gRPC-Web-integratie is een gratis gRPC en API's met hoge prestaties-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject gRPC en API's met hoge prestaties. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus gRPC en API's met hoge prestaties bevat in totaal 4 lessen.

Browsers met gRPC verbinden

Welkom bij gRPC-Web-integratie!

Je hebt geleerd hoe krachtig gRPC is voor communicatie met hoge prestaties. Maar wat als je wilt dat je webbrowserapplicaties rechtstreeks met gRPC-services communiceren? Daarvoor is gRPC-Web bedoeld.

In deze les leer je hoe gRPC-Web clients in browsers laat communiceren met gRPC-backends.

Waarom browsers gRPC-Web nodig hebben

Moderne browsers stellen de HTTP/2-functies op laag niveau waarop native gRPC vertrouwt niet volledig beschikbaar, vooral niet voor geavanceerde streamingmogelijkheden.

Geen volledige controle over HTTP/2: Browsers verbergen directe bewerking van HTTP/2-frames.
CORS-beperkingen: Beleidsregels voor Cross-Origin Resource Sharing (CORS) kunnen rechtstreekse gRPC-verbindingen ingewikkeld maken.
Beperkte toegang tot headers: Sommige specifieke gRPC-headers zijn mogelijk niet toegankelijk of aanpasbaar.

Door deze beperkingen kan een standaard gRPC-client niet rechtstreeks in een browser worden uitgevoerd.

Kennismaken met de gRPC-Web-proxy

Het kernidee achter gRPC-Web is het gebruik van een proxy. Deze proxy bevindt zich tussen je browserclient en je gRPC-server.

De browserclient verstuurt aanvragen in een formaat dat compatibel is met gRPC-Web, vaak HTTP/1.1 of een beperkte vorm van HTTP/2.
De gRPC-Web-proxy vertaalt deze aanvragen naar native gRPC, met volledig HTTP/2, en stuurt ze door naar je gRPC-server.
De proxy vertaalt ook de antwoorden van de gRPC-server terug naar een formaat dat de browserclient begrijpt.

Je kunt de proxy zien als een vertaler waarmee je browser gRPC kan spreken.

Veelgebruikte proxyoplossingen

Je zou zelf een proxy kunnen schrijven, maar er zijn ook verschillende robuuste proxy's beschikbaar:

Envoy Proxy: Een populaire, krachtige open-source edge- en serviceproxy. Deze biedt ingebouwde ondersteuning voor gRPC-Web.
grpcwebproxy: Een speciale proxy, geschreven in Go, die specifiek is ontworpen voor gRPC-Web.

Deze hulpmiddelen verzorgen de complexe vertaal-laag, zodat je gRPC-server een standaard gRPC-server kan blijven.

De communicatiestroom

Hier volgt een vereenvoudigd overzicht van de werking van een gRPC-Web-aanroep:

Browserclient: Stuurt een HTTP/1.1-aanvraag (of een aanvraag via beperkte HTTP/2) naar de proxy.
gRPC-Web-proxy: Ontvangt de aanvraag en zet deze om in een standaard HTTP/2-gRPC-aanvraag.
gRPC-server: Verwerkt de native gRPC-aanvraag en stuurt een native gRPC-antwoord terug.
gRPC-Web-proxy: Ontvangt het gRPC-antwoord en zet dit terug om in een HTTP/1.1-antwoord (of een antwoord via beperkte HTTP/2).
Browserclient: Ontvangt en verwerkt het omgezette antwoord.

Protobuf voor webclients

Net als bij gewone gRPC definieer je je service en berichten met Protocol Buffers (Protobuf).

Om clientcode voor browsers te genereren, gebruik je een speciale Protobuf-plugin, meestal protoc-gen-grpc-web. Deze genereert JavaScript- of TypeScript-code die in browseromgevingen werkt.

Deze gegenereerde code weet hoe aanvragen voor de gRPC-Web-proxy moeten worden opgemaakt en hoe de antwoorden ervan moeten worden verwerkt.

Voorbeeld: een webclientaanroep

Nadat je je clientstubs hebt gegenereerd, ziet een gRPC-Web-aanroep vanuit JavaScript/TypeScript er vertrouwd uit. Hier volgt een conceptueel fragment voor een GreeterService:

(Opmerking: deze code is illustratief en kan niet worden uitgevoerd zonder een volledige gRPC-Web-configuratie met compilatie van proto-bestanden, een actieve proxy en een server.)

import {HelloRequest} from './helloworld_pb';
import {GreeterClient} from './HelloworldServiceClientPb';

const client = new GreeterClient(
  'http://localhost:8080', // Proxy address
  null, null
);

const request = new HelloRequest();
request.setName('CoddyKit User');

client.sayHello(request, {}, (err, response) => {
  if (err) {
    console.error(err.code, err.message);
    return;
  }
  console.log(response.getMessage());
});

De serverzijde blijft standaard

Een van de grote voordelen van gRPC-Web is dat je gRPC-server er niets van hoeft te weten!

De server ontvangt gewoon standaard gRPC-aanvragen (HTTP/2) van de proxy en stuurt standaard gRPC-antwoorden terug. Je hoeft je bestaande implementaties van gRPC-services dus niet aan te passen om browserclients te ondersteunen.

Door deze scheiding van verantwoordelijkheden worden ontwikkeling en onderhoud eenvoudiger.

Beperkingen van streaming in gRPC-Web

Hoewel gRPC-Web krachtig is, heeft het enkele beperkingen vergeleken met native gRPC:

Uniaire RPC's: Volledig ondersteund (aanvraag-antwoord).
Streaming vanaf de server: Over het algemeen ondersteund (de server stuurt meerdere antwoorden op één aanvraag).
Streaming vanaf de client: Gewoonlijk niet ondersteund vanwege browserbeperkingen voor streamingaanvragen.
Bidirectionele streaming: Gewoonlijk niet ondersteund om dezelfde reden.

Voor applicaties die sterk afhankelijk zijn van streaming vanaf de client of bidirectionele streaming, zijn meestal native gRPC-clients vereist, bijvoorbeeld in Node.js of mobiele apps.

Korte controle: doel van gRPC-Web

Welke van de volgende uitspraken beschrijft het belangrijkste doel of de belangrijkste kenmerken van gRPC-Web correct?

Beantwoord dit in de interactieve les

Samenvatting: browsers en gRPC verbinden

Je hebt met succes geleerd wat gRPC-Web is!

Het is een oplossing waarmee webbrowserclients met gRPC-services kunnen communiceren.
Het gebruikt een proxy, zoals Envoy of grpcwebproxy, om aanvragen en antwoorden te vertalen.
Je gRPC-server blijft standaard en is zich niet bewust van de gRPC-Web-laag.
Hoewel uniaire RPC's en streaming vanaf de server worden ondersteund, worden streaming vanaf de client en bidirectionele streaming meestal niet ondersteund.

Dit krachtige hulpmiddel overbrugt de kloof en brengt de voordelen van gRPC naar je webapplicaties!

Gratis beginnen

Leer gRPC en API's met hoge prestaties met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 12
Lessen: 48

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “gRPC-Web-integratie” gratis?

Ja — de volledige tekst van “gRPC-Web-integratie” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus gRPC en API's met hoge prestaties wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus gRPC en API's met hoge prestaties bevat in totaal 4 lessen.

Wat leer ik in “gRPC-Web-integratie”?

Leer gRPC-communicatie rechtstreeks vanuit webbrowsers mogelijk te maken met de gRPC-Web-proxy. Je oefent met gRPC en API's met hoge prestaties door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met gRPC en API's met hoge prestaties te beginnen?

Ervaring vooraf is niet nodig. gRPC en API's met hoge prestaties op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “gRPC-Web-integratie”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over gRPC en API's met hoge prestaties?

Ja. Elke les over gRPC en API's met hoge prestaties bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar gRPC en API's met hoge prestaties