gRPC og højtydende API'er · Lektion

Integration med gRPC-Web

Lær at aktivere gRPC-kommunikation direkte fra webbrowsere ved hjælp af gRPC-Web-proxyen.

Lektion 1 af 411 trin

Integration med gRPC-Web er en gratis gRPC og højtydende API'er-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i gRPC og højtydende API'er, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. gRPC og højtydende API'er-kurset indeholder 4 lektioner i alt.

Forbindelse mellem browsere og gRPC

Velkommen til gRPC-Web-integration!

Du har lært om gRPC's styrke til højtydende kommunikation. Men hvad nu, hvis du vil have, at dine webbrowserapplikationer kommunikerer direkte med gRPC-tjenester? Det er her, gRPC-Web kommer ind i billedet.

I denne lektion undersøger vi, hvordan gRPC-Web gør det muligt for browserbaserede klienter at kommunikere med gRPC-backends.

Hvorfor browsere har brug for gRPC-Web

Moderne browsere giver ikke fuld adgang til de lavniveaufunktioner i HTTP/2, som native gRPC er afhængig af, især når det gælder avancerede streamingfunktioner.

Ingen fuld kontrol over HTTP/2: Browsere skjuler direkte manipulation af HTTP/2-frames.
CORS-begrænsninger: Politikker for Cross-Origin Resource Sharing (CORS) kan gøre direkte gRPC-forbindelser mere komplicerede.
Begrænset adgang til headere: Nogle gRPC-specifikke headere er muligvis ikke tilgængelige eller kan ikke ændres.

Disse begrænsninger forhindrer en standard-gRPC-klient i at køre direkte i en browser.

Introduktion til gRPC-Web-proxyen

Grundideen bag gRPC-Web er at bruge en proxy. Denne proxy sidder mellem din browserklient og din gRPC-server.

Browserklienten sender forespørgsler i et gRPC-Web-kompatibelt format, ofte HTTP/1.1 eller begrænset HTTP/2.
gRPC-Web-proxyen oversætter disse forespørgsler til native gRPC (fuld HTTP/2) og videresender dem til din gRPC-server.
Den oversætter også gRPC-serverens svar tilbage til et format, som browserklienten forstår.

Tænk på den som en oversætter, der gør det muligt for din browser at tale gRPC.

Almindelige proxy-løsninger

Selv om du kunne skrive din egen, findes der flere robuste proxyer:

Envoy Proxy: En populær open source-edge- og serviceproxy med høj ydeevne. Den har indbygget understøttelse af gRPC-Web.
grpcwebproxy: En dedikeret proxy skrevet i Go, specifikt udviklet til gRPC-Web.

Disse værktøjer håndterer det komplekse oversættelseslag, så din gRPC-server kan forblive en standard-gRPC-server.

Kommunikationsforløbet

Her er en forenklet oversigt over, hvordan et gRPC-Web-kald fungerer:

Browserklient: Sender en HTTP/1.1- eller begrænset HTTP/2-forespørgsel til proxyen.
gRPC-Web-proxy: Modtager forespørgslen og konverterer den til en standardiseret HTTP/2-gRPC-forespørgsel.
gRPC-server: Behandler den native gRPC-forespørgsel og sender et natives gRPC-svar tilbage.
gRPC-Web-proxy: Modtager gRPC-svaret og konverterer det tilbage til et HTTP/1.1- eller begrænset HTTP/2-svar.
Browserklient: Modtager og behandler det konverterede svar.

Protobuf til webklienter

Ligesom med almindelig gRPC definerer du din tjeneste og dine meddelelser ved hjælp af Protocol Buffers (Protobuf).

Hvis du vil generere kode på klientsiden til browsere, bruger du et særligt Protobuf-plugin, typisk protoc-gen-grpc-web. Det genererer JavaScript- eller TypeScript-kode, der fungerer i browsermiljøer.

Den genererede kode ved, hvordan forespørgsler skal formateres til gRPC-Web-proxyen, og hvordan dens svar skal fortolkes.

Eksempel: Kald fra en webklient

Efter at du har genereret dine klientstubs, ser et gRPC-Web-kald fra JavaScript/TypeScript velkendt ud. Her er et konceptuelt kodestykke til en GreeterService:

(Bemærk: Denne kode er illustrativ og kan ikke køres uden en komplet gRPC-Web-opsætning, herunder proto-kompilering, en kørende proxy og en 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());
});

Serversiden forbliver standardiseret

En af de store fordele ved gRPC-Web er, at din gRPC-server ikke behøver at vide noget om det!

Serveren modtager ganske enkelt standardiserede gRPC-forespørgsler (HTTP/2) fra proxyen og sender standardiserede gRPC-svar tilbage. Det betyder, at du ikke behøver at ændre dine eksisterende gRPC-tjenesteimplementeringer for at understøtte browserklienter.

Denne adskillelse af ansvarsområder gør udvikling og vedligeholdelse enklere.

Streamingbegrænsninger i gRPC-Web

Selv om gRPC-Web er effektivt, har det nogle begrænsninger sammenlignet med native gRPC:

Enheds-RPC'er: Fuldt understøttet (forespørgsel-svar).
Serverstreaming: Generelt understøttet (serveren sender flere svar på én forespørgsel).
Klientstreaming: Understøttes typisk ikke på grund af browsernes begrænsninger ved streaming af forespørgsler.
Tovejsstreaming: Understøttes typisk ikke af samme årsag.

Til applikationer, der i høj grad er afhængige af klientstreaming eller tovejsstreaming, kræves der normalt native gRPC-klienter, f.eks. i Node.js eller mobilapps.

Hurtig kontrol: gRPC-Webs formål

Hvilke af følgende udsagn beskriver præcist det primære formål med eller de vigtigste egenskaber ved gRPC-Web?

Besvar den i den interaktive lektion

Opsummering: Forbindelse mellem browsere og gRPC

Du har nu lært om gRPC-Web!

Det er en løsning, der gør det muligt for webbrowserklienter at kommunikere med gRPC-tjenester.
Det fungerer ved hjælp af en proxy som Envoy eller grpcwebproxy, der oversætter forespørgsler og svar.
Din gRPC-server forbliver standardiseret og er ikke klar over gRPC-Web-laget.
Selv om det understøtter enheds-RPC'er og serverstreaming, understøttes klientstreaming og tovejsstreaming typisk ikke.

Dette effektive værktøj bygger bro mellem teknologierne og bringer fordelene ved gRPC til dine webapplikationer!

Gratis at komme i gang

Lær gRPC og højtydende API'er med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Integration med gRPC-Web” gratis?

Ja — hele teksten til “Integration med gRPC-Web” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af gRPC og højtydende API'er-kurset, skal du opgradere til CoddyKit PRO. gRPC og højtydende API'er-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Integration med gRPC-Web”?

Lær at aktivere gRPC-kommunikation direkte fra webbrowsere ved hjælp af gRPC-Web-proxyen. Du øver dig i gRPC og højtydende API'er med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på gRPC og højtydende API'er?

Der kræves ingen tidligere erfaring. gRPC og højtydende API'er på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Integration med gRPC-Web”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne gRPC og højtydende API'er-lektion?

Ja. Alle gRPC og højtydende API'er-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til gRPC og højtydende API'er