Projek ini menunjukkan cara menyediakan komunikasi gRPC mudah antara klien web dan pelayan dengan proksi Utusan.
Saya menggunakan perpustakaan gRPC-Web untuk tujuan ini. gRPC-Web ialah perpustakaan klien JavaScript yang membenarkan aplikasi web berinteraksi dengan perkhidmatan gRPC. Memandangkan penyemak imbas tidak menyokong HTTP/2 atau protokol binari yang digunakan oleh gRPC standard, gRPC-Web menyediakan cara untuk merapatkan jurang dengan menggunakan HTTP/1.1 atau HTTP/2 dan pengekodan mesej gRPC dengan cara yang boleh dikendalikan oleh penyemak imbas. Begini cara gRPC-Web berfungsi:
Permintaan dikodkan dalam format gRPC-Web, biasanya menggunakan pengekodan base64 untuk muatan gRPC binari. Pelanggan menghantar permintaan ini melalui HTTP/1.1 atau HTTP/2.
Pelayan gRPC memproses permintaan itu seolah-olah permintaan gRPC asli, menggunakan HTTP/2 untuk komunikasi.
Pelayan gRPC memproses permintaan gRPC yang masuk, melaksanakan logik perniagaan yang diperlukan dan menjana respons (dalam contoh ini ia adalah aplikasi bertulis Go). Respons dikodkan dalam format gRPC standard dan dihantar semula kepada Utusan.
Envoy menerima respons gRPC, mengekodnya dalam format gRPC-Web (biasanya menggunakan base64), dan menghantarnya kembali kepada klien gRPC-Web melalui HTTP/1.1 atau HTTP/2. Sebarang metadata yang disertakan dalam respons gRPC, seperti kod status, diterjemahkan dengan sewajarnya.
Pelanggan gRPC-Web menyahkod respons dan menukarnya kepada format yang boleh digunakan dalam aplikasi web. Aplikasi web memproses respons, mengemas kini UI atau mengendalikan ralat mengikut keperluan.
NOTA: penstriman sisi pelanggan dan dua arah tidak disokong pada masa ini (lihat peta jalan penstriman)
Berikut ialah projek GitHub untuknya:
https://github.com/ehsaniara/gRPC-web-example
syntax = "proto3"; package helloworld; option go_package = "./proto"; // Add this line service Greeter { rpc SayHello (HelloRequest) returns (HelloReply); } message HelloRequest { string name = 1; } message HelloReply { string message = 1; }
package main import ( "context" "google.golang.org/grpc/reflection" "log" "net" pb "github.com/ehsaniara/gRPC-web-example/proto" "google.golang.org/grpc" ) type server struct { pb.UnimplementedGreeterServer } func (s *server) SayHello(ctx context.Context, in *pb.HelloRequest) (*pb.HelloReply, error) { return &pb.HelloReply{Message: "Hello " + in.Name}, nil } func main() { lis, err := net.Listen("tcp", ":50051") if err != nil { log.Fatalf("failed to listen: %v", err) } s := grpc.NewServer() pb.RegisterGreeterServer(s, &server{}) // Register reflection service on gRPC server. reflection.Register(s) if err := s.Serve(lis); err != nil { log.Fatalf("failed to serve: %v", err) } log.Println("Server is running on port 50051") if err := s.Serve(lis); err != nil { log.Fatalf("failed to serve: %v", err) } }
... http_filters: - name: envoy.filters.http.grpc_web typed_config: "@type": type.googleapis.com/envoy.extensions.filters.http.grpc_web.v3.GrpcWeb - name: envoy.filters.http.cors typed_config: "@type": type.googleapis.com/envoy.extensions.filters.http.cors.v3.Cors - name: envoy.filters.http.router typed_config: "@type": type.googleapis.com/envoy.extensions.filters.http.router.v3.Router ...
// Import the generated gRPC-Web client stubs and message classes import {GreeterClient} from './generated/helloworld_grpc_web_pb'; import {HelloRequest} from './generated/helloworld_pb'; // Create an instance of the Greeter client const client = new GreeterClient('http://localhost:8080'); // Function to send a greeting request function sayHello(name) { // Create a new request const request = new HelloRequest(); request.setName(name); // Call the sayHello method on the Greeter client client.sayHello(request, {}, (err, response) => { if (err) { console.error('Error:', err.message); document.getElementById('output').textContent = 'Error: ' + err.message; } else { console.log('Greeting:', response.getMessage()); document.getElementById('output').textContent = 'Greeting: ' + response.getMessage(); } }); } // Example usage: sending a request when the page loads document.addEventListener('DOMContentLoaded', () => { const name = 'World'; sayHello(name); });
Berikut ialah projek GitHub yang berkaitan dengan projek ini
https://github.com/ehsaniara/gRPC-web-example
Atas ialah kandungan terperinci gRPC antara Web dan Pelayan.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!