Nutzen Sie die Leistungsfähigkeit der Echtzeit-Benutzeroberfläche: Ein Leitfaden für Einsteiger zum Streamen von Daten mit React.js, gRPC, Envoy und Golang

Geschrieben von Naveen M

Hintergrund

Als Teil unseres Kubernetes-Plattformteams stehen wir vor der ständigen Herausforderung, Echtzeit-Einblick in die Arbeitslasten der Benutzer zu bieten. Von der Überwachung der Ressourcennutzung bis hin zur Verfolgung der Kubernetes-Clusteraktivität und des Anwendungsstatus stehen für jede spezifische Kategorie zahlreiche Open-Source-Lösungen zur Verfügung. Allerdings sind diese Tools oft über verschiedene Plattformen verteilt, was zu einer fragmentierten Benutzererfahrung führt. Um dieses Problem anzugehen, haben wir uns die Leistungsfähigkeit des serverseitigen Streaming zunutze gemacht, das es uns ermöglicht, Live-Ressourcennutzung, Kubernetes-Ereignisse und Anwendungsstatus bereitzustellen, sobald Benutzer auf unser Plattformportal zugreifen.

Einführung

Durch die Implementierung von serverseitigem Streaming können wir Daten nahtlos an die Benutzeroberfläche streamen und so aktuelle Informationen bereitstellen, ohne dass manuelle Aktualisierungen oder ständige API-Aufrufe erforderlich sind. Dieser Ansatz revolutioniert das Benutzererlebnis und ermöglicht es Benutzern, den Zustand und die Leistung ihrer Arbeitslasten sofort auf einheitliche und vereinfachte Weise zu visualisieren. Ganz gleich, ob es darum geht, die Ressourcennutzung zu überwachen, über Kubernetes-Ereignisse auf dem Laufenden zu bleiben oder den Anwendungsstatus im Auge zu behalten – unsere serverseitige Streaming-Lösung fasst alle wichtigen Informationen in einem einzigen Echtzeit-Dashboard zusammen, das jedoch für jeden anwendbar ist, der dies möchte Bereitstellung von Live-Streaming-Daten für die Benutzeroberfläche.
Vorbei sind die Zeiten, in denen Sie durch mehrere Tools und Plattformen navigieren mussten, um wichtige Erkenntnisse zu gewinnen. Mit unserem optimierten Ansatz können Benutzer von dem Moment an, in dem sie auf unserem Plattformportal landen, auf einen umfassenden Überblick über ihre Kubernetes-Umgebung zugreifen. Durch die Nutzung der Leistungsfähigkeit des serverseitigen Streamings haben wir die Art und Weise, wie Benutzer mit ihren Arbeitslasten interagieren und diese überwachen, verändert und ihre Erfahrung effizienter, intuitiver und produktiver gemacht.
Mit unserer Blogreihe möchten wir Sie durch die Feinheiten der Einrichtung von serverseitigem Streaming mit Technologien wie React.js, Envoy, gRPC und Golang führen.

An diesem Projekt sind drei Hauptkomponenten beteiligt:
1. Das Backend, das mit Golang entwickelt wurde und serverseitiges gRPC-Streaming zur Datenübertragung nutzt.
2. Der Envoy-Proxy, der dafür verantwortlich ist, den Backend-Dienst für die Außenwelt zugänglich zu machen.
3. Das Frontend, das mit React.js erstellt wurde und grpc-web verwendet, um die Kommunikation mit dem Backend herzustellen.
Die Serie ist in mehrere Teile gegliedert, um den unterschiedlichen Sprachpräferenzen der Entwickler gerecht zu werden. Wenn Sie sich speziell für die Rolle des Envoy beim Streaming interessieren oder mehr über die Bereitstellung eines Envoy-Proxys in Kubernetes erfahren möchten, können Sie zum zweiten Teil (Envoy als Frontend-Proxy in Kubernetes) springen und diesen Aspekt erkunden oder einfach nur daran interessiert sein Front-End-Teil, dann können Sie sich einfach den Front-End-Teil des Blogs ansehen.
In diesem ersten Teil konzentrieren wir uns auf den einfachsten Abschnitt der Serie: „So richten Sie serverseitiges gRPC-Streaming mit Go ein.“ Wir zeigen Beispielanwendungen mit serverseitigem Streaming. Glücklicherweise gibt es im Internet eine Fülle von Inhalten zu diesem Thema, die auf Ihre bevorzugte Programmiersprache zugeschnitten sind.

TEIL 1: So richten Sie serverseitiges gRPC-Streaming mit Go ein

Es ist Zeit, unseren Plan in die Tat umzusetzen! Vorausgesetzt, Sie haben ein grundlegendes Verständnis der folgenden Konzepte, tauchen wir gleich in die Umsetzung ein:

1. gRPC: Es handelt sich um ein Kommunikationsprotokoll, das es Client und Server ermöglicht, Daten effizient auszutauschen.
2. Serverseitiges Streaming: Diese Funktion ist besonders nützlich, wenn der Server eine große Datenmenge an den Client senden muss. Durch die Verwendung von serverseitigem Streaming kann der Server die Daten in kleinere Teile aufteilen und diese einzeln senden. Der Kunde kann dann den Empfang von Daten beenden, wenn er genügend Daten empfangen hat oder zu lange gewartet hat.

Jetzt beginnen wir mit der Code-Implementierung.

Schritt 1: Erstellen Sie die Protodatei
Zunächst müssen wir eine Protobuf-Datei definieren, die sowohl von der Client- als auch von der Serverseite verwendet wird. Hier ist ein einfaches Beispiel:

syntax = "proto3";

package protobuf;

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

message Request {
  int32 id = 1;
}

message Response {
  string result = 1;
}

In dieser Protodatei haben wir eine einzelne Funktion namens FetchResponse, die einen Request-Parameter entgegennimmt und einen Strom von Antwortnachrichten zurückgibt.

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.

Das obige ist der detaillierte Inhalt vonNutzen Sie die Leistungsfähigkeit der Echtzeit-Benutzeroberfläche: Ein Leitfaden für Einsteiger zum Streamen von Daten mit React.js, gRPC, Envoy und Golang. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!