Buka Kunci Kuasa UI Masa Nyata: Panduan Pemula untuk Menstrim Data dengan React.js, gRPC, Envoy dan Golang

Ditulis oleh Naveen M

Latar belakang

Sebagai sebahagian daripada pasukan platform Kubernetes kami, kami menghadapi cabaran berterusan untuk menyediakan keterlihatan masa nyata ke dalam beban kerja pengguna. Daripada memantau penggunaan sumber hingga menjejaki aktiviti kluster Kubernetes dan status aplikasi, terdapat banyak penyelesaian sumber terbuka yang tersedia untuk setiap kategori tertentu. Walau bagaimanapun, alat ini sering bertaburan di seluruh platform yang berbeza, menghasilkan pengalaman pengguna yang berpecah-belah. Untuk menangani isu ini, kami telah menerima kuasa penstriman bahagian pelayan, membolehkan kami menyampaikan penggunaan sumber langsung, acara Kubernetes dan status aplikasi sebaik sahaja pengguna mengakses portal platform kami.

pengenalan

Dengan melaksanakan penstriman bahagian pelayan, kami boleh menstrim data dengan lancar ke antara muka pengguna, memberikan maklumat terkini tanpa memerlukan penyegaran manual atau panggilan API berterusan. Pendekatan ini merevolusikan pengalaman pengguna, membolehkan pengguna memvisualisasikan serta-merta kesihatan dan prestasi beban kerja mereka dalam cara yang bersatu dan dipermudahkan. Sama ada memantau penggunaan sumber, sentiasa dimaklumkan tentang acara Kubernetes atau memantau status aplikasi, penyelesaian penstriman bahagian pelayan kami menghimpunkan semua maklumat kritikal dalam satu papan pemuka masa nyata, tetapi ini akan terpakai kepada sesiapa sahaja yang ingin menyediakan data penstriman langsung kepada antara muka pengguna.
Sudah berlalu hari-hari menavigasi melalui pelbagai alatan dan platform untuk mengumpulkan cerapan penting. Dengan pendekatan kami yang diperkemas, pengguna boleh mengakses gambaran keseluruhan menyeluruh tentang persekitaran Kubernetes mereka sebaik sahaja mereka mendarat di portal platform kami. Dengan memanfaatkan kuasa penstriman sebelah pelayan, kami telah mengubah cara pengguna berinteraksi dan memantau beban kerja mereka, menjadikan pengalaman mereka lebih cekap, intuitif dan produktif.
Melalui siri blog kami, kami berhasrat untuk membimbing anda melalui selok-belok menyediakan penstriman sisi pelayan dengan teknologi seperti React.js, Envoy, gRPC dan Golang.

Terdapat tiga komponen utama yang terlibat dalam projek ini:
1. Bahagian belakang, yang dibangunkan menggunakan Golang dan menggunakan penstriman sebelah pelayan gRPC untuk menghantar data.
2. Proksi Utusan, yang bertanggungjawab untuk menjadikan perkhidmatan bahagian belakang boleh diakses oleh dunia luar.
3. Bahagian hadapan, yang dibina menggunakan React.js dan menggunakan grpc-web untuk mewujudkan komunikasi dengan bahagian belakang.
Siri ini dibahagikan kepada beberapa bahagian untuk menampung pilihan bahasa pembangun yang pelbagai. Jika anda berminat secara khusus dalam peranan Envoy dalam penstriman atau ingin mengetahui tentang menggunakan proksi Utusan dalam Kubernetes, anda boleh beralih ke bahagian kedua (Utusan sebagai proksi frontend dalam Kubernetes) dan meneroka aspek itu atau hanya berminat dengan bahagian hujung depan, kemudian anda boleh lihat bahagian hujung hadapan blog.
Dalam bahagian awal ini, kami akan menumpukan pada segmen siri yang paling mudah: "Cara Menyediakan Penstriman Sisi Pelayan gRPC dengan Go." Kami akan menunjukkan contoh aplikasi dengan penstriman sisi pelayan. Nasib baik, terdapat banyak kandungan yang tersedia di internet untuk topik ini, disesuaikan dengan bahasa pengaturcaraan pilihan anda.

BAHAGIAN 1: Cara Menyediakan Penstriman Bahagian Pelayan gRPC dengan Go

Sudah tiba masanya untuk melaksanakan rancangan kami! Dengan mengandaikan anda mempunyai pemahaman asas tentang konsep berikut, mari kita selami pelaksanaannya:

1. gRPC: Ia adalah protokol komunikasi yang membolehkan pelanggan dan pelayan bertukar data dengan cekap.
2. Penstriman sisi pelayan: Ciri ini amat berguna apabila pelayan perlu menghantar sejumlah besar data kepada pelanggan. Dengan menggunakan penstriman sebelah pelayan, pelayan boleh membahagikan data kepada bahagian yang lebih kecil dan menghantarnya satu demi satu. Pelanggan kemudiannya boleh memilih untuk berhenti menerima data jika ia telah menerima cukup atau jika ia telah menunggu terlalu lama.

Sekarang, mari kita mulakan dengan pelaksanaan kod.

Langkah 1: Cipta Fail Proto
Untuk memulakan, kita perlu menentukan fail protobuf yang akan digunakan oleh kedua-dua pihak klien dan pelayan. Berikut ialah contoh mudah:

syntax = "proto3";

package protobuf;

service StreamService {
  rpc FetchResponse (Request) returns (stream Response) {}
}

message Request {
  int32 id = 1;
}

message Response {
  string result = 1;
}

Dalam fail proto ini, kami mempunyai satu fungsi yang dipanggil FetchResponse yang mengambil parameter Permintaan dan mengembalikan aliran mesej Respons.

Step 2: Generate the Protocol Buffer File

Before we proceed, we need to generate the corresponding pb file that will be used in our Go program. Each programming language has its own way of generating the protocol buffer file. In Go, we will be using the protoc library.
If you haven't installed it yet, you can find the installation guide provided by Google.
To generate the protocol buffer file, run the following command:

protoc --go_out=plugins=grpc:. *.proto

Now, we have the data.pb.go file ready to be used in our implementation.

Step 3: Server side implementation
To create the server file, follow the code snippet below:

package main

import (
        "fmt"
        "log"
        "net"
        "sync"
        "time"

        pb "github.com/mnkg561/go-grpc-server-streaming-example/src/proto"
        "google.golang.org/grpc"
)

type server struct{}

func (s server) FetchResponse(in pb.Request, srv pb.StreamService_FetchResponseServer) error {

        log.Printf("Fetching response for ID: %d", in.Id)

        var wg sync.WaitGroup
        for i := 0; i < 5; i++ {
                wg.Add(1)
                go func(count int) {
                        defer wg.Done()

                        time.Sleep(time.Duration(count)  time.Second)
                        resp := pb.Response{Result: fmt.Sprintf("Request #%d for ID: %d", count, in.Id)}
                        if err := srv.Send(&resp); err != nil {
                                log.Printf("Error sending response: %v", err)
                        }
                        log.Printf("Finished processing request number: %d", count)
                }(i)
        }

        wg.Wait()
        return nil
}

func main() {
        lis, err := net.Listen("tcp", ":50005")
        if err != nil {
                log.Fatalf("Failed to listen: %v", err)
        }

        s := grpc.NewServer()
        pb.RegisterStreamServiceServer(s, server{})

        log.Println("Server started")
        if err := s.Serve(lis); err != nil {
                log.Fatalf("Failed to serve: %v", err)
        }
}

In this server file, I have implemented the FetchResponse function, which receives a request from the client and sends a stream of responses back. The server simulates concurrent processing using goroutines. For each request, it streams five responses back to the client. Each response is delayed by a certain duration to simulate different processing times.
The server listens on port 50005 and registers the StreamServiceServer with the created server. Finally, it starts serving requests and logs a message indicating that the server has started.
Now you have the server file ready to handle streaming requests from clients.

Part 2

Stay tuned for Part 2 where we will continue to dive into the exciting world of streaming data and how it can revolutionize your user interface.

Atas ialah kandungan terperinci Buka Kunci Kuasa UI Masa Nyata: Panduan Pemula untuk Menstrim Data dengan React.js, gRPC, Envoy dan Golang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!