„Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Werkzeuge schärfen.“ – Konfuzius, „Die Gespräche des Konfuzius. Lu Linggong“
Titelseite > Programmierung > 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

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

Veröffentlicht am 08.11.2024
Durchsuche:260

Unlock the Power of Real-Time UI: A Beginner

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 die Benutzererfahrung 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 Blogserie 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 Implementierung 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 Client 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 Proto-Datei
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 Stream von Antwortnachrichten zurückgibt.

Schritt 2: Generieren Sie die Protokollpufferdatei

Bevor wir fortfahren, müssen wir die entsprechende PB-Datei generieren, die in unserem Go-Programm verwendet wird. Jede Programmiersprache hat ihre eigene Art, die Protokollpufferdatei zu generieren. In Go werden wir die Protoc-Bibliothek verwenden.
Wenn Sie es noch nicht installiert haben, finden Sie die Installationsanleitung von Google.
Um die Protokollpufferdatei zu generieren, führen Sie den folgenden Befehl aus:

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

Jetzt haben wir die Datei data.pb.go für die Verwendung in unserer Implementierung bereit.

Schritt 3: Serverseitige Implementierung
Um die Serverdatei zu erstellen, befolgen Sie den folgenden Codeausschnitt:

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 



In dieser Serverdatei habe ich die FetchResponse-Funktion implementiert, die eine Anfrage vom Client empfängt und einen Strom von Antworten zurücksendet. Der Server simuliert die gleichzeitige Verarbeitung mithilfe von Goroutinen. Für jede Anfrage werden fünf Antworten an den Client zurückgesendet. Jede Antwort wird um eine bestimmte Dauer verzögert, um unterschiedliche Bearbeitungszeiten zu simulieren.
Der Server überwacht Port 50005 und registriert den StreamServiceServer beim erstellten Server. Schließlich beginnt es mit der Bearbeitung von Anfragen und protokolliert eine Meldung, die angibt, dass der Server gestartet wurde.
Jetzt haben Sie die Serverdatei bereit, Streaming-Anfragen von Clients zu verarbeiten.

Teil 2

Seien Sie gespannt auf Teil 2, in dem wir weiter in die aufregende Welt des Daten-Streamings eintauchen und erfahren, wie es Ihre Benutzeroberfläche revolutionieren kann.

Freigabeerklärung Dieser Artikel ist abgedruckt unter: https://dev.to/marscode/unlock-the-power-of-real-time-ui-a-beginners-guide-to-streaming-data-with-reactjs-grpc-envoy- und- golang-271p?1 Wenn es einen Verstoß gibt, wenden Sie sich bitte an [email protected], um ihn zu löschen
Neuestes Tutorial Mehr>

Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.

Copyright© 2022 湘ICP备2022001581号-3