"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Page de garde > La programmation > Libérez la puissance de l'interface utilisateur en temps réel : guide du débutant pour le streaming de données avec React.js, gRPC, Envoy et Golang

Libérez la puissance de l'interface utilisateur en temps réel : guide du débutant pour le streaming de données avec React.js, gRPC, Envoy et Golang

Publié le 2024-11-08
Parcourir:630

Unlock the Power of Real-Time UI: A Beginner

Écrit par Naveen M

Arrière-plan

En tant que membre de notre équipe de plateforme Kubernetes, nous sommes confrontés au défi constant de fournir une visibilité en temps réel sur les charges de travail des utilisateurs. De la surveillance de l'utilisation des ressources au suivi de l'activité du cluster Kubernetes et de l'état des applications, il existe de nombreuses solutions open source disponibles pour chaque catégorie spécifique. Cependant, ces outils sont souvent dispersés sur différentes plateformes, ce qui entraîne une expérience utilisateur fragmentée. Pour résoudre ce problème, nous avons exploité la puissance du streaming côté serveur, nous permettant de fournir en direct l'utilisation des ressources, les événements Kubernetes et l'état des applications dès que les utilisateurs accèdent à notre portail de plateforme.

Introduction

En mettant en œuvre le streaming côté serveur, nous pouvons diffuser de manière transparente des données vers l'interface utilisateur, fournissant des informations à jour sans avoir besoin d'actualisations manuelles ou d'appels API constants. Cette approche révolutionne l'expérience utilisateur, permettant aux utilisateurs de visualiser instantanément l'état et les performances de leurs charges de travail de manière unifiée et simplifiée. Qu'il s'agisse de surveiller l'utilisation des ressources, de rester informé des événements Kubernetes ou de garder un œil sur l'état des applications, notre solution de streaming côté serveur rassemble toutes les informations critiques dans un tableau de bord unique en temps réel, mais cela sera applicable à tous ceux qui souhaitent fournir des données de diffusion en direct à l'interface utilisateur.
Il est révolu le temps où il fallait naviguer à travers plusieurs outils et plateformes pour recueillir des informations essentielles. Grâce à notre approche rationalisée, les utilisateurs peuvent accéder à un aperçu complet de leur environnement Kubernetes dès leur arrivée sur le portail de notre plateforme. En exploitant la puissance du streaming côté serveur, nous avons transformé la façon dont les utilisateurs interagissent avec leurs charges de travail et les surveillent, rendant leur expérience plus efficace, intuitive et productive.
À travers notre série de blogs, nous visons à vous guider à travers les subtilités de la configuration du streaming côté serveur avec des technologies telles que React.js, Envoy, gRPC et Golang.

Trois composants principaux sont impliqués dans ce projet :
1. Le backend, qui est développé à l'aide de Golang et utilise le streaming côté serveur gRPC pour transmettre des données.
2. Le proxy Envoy, chargé de rendre le service backend accessible au monde extérieur.
3. Le frontend, qui est construit à l'aide de React.js et utilise grpc-web pour établir la communication avec le backend.
La série est divisée en plusieurs parties pour s'adapter aux diverses préférences linguistiques des développeurs. Si vous êtes spécifiquement intéressé par le rôle d'Envoy dans le streaming ou si vous souhaitez en savoir plus sur le déploiement d'un proxy Envoy dans Kubernetes, vous pouvez passer à la deuxième partie (Envoy en tant que proxy frontend dans Kubernetes) et explorer cet aspect ou simplement vous intéresser au partie frontale, vous pouvez alors simplement consulter la partie frontale du blog.
Dans cette première partie, nous nous concentrerons sur le segment le plus simple de la série : « Comment configurer le streaming côté serveur gRPC avec Go ». Nous allons montrer des exemples d'applications avec streaming côté serveur. Heureusement, il existe une multitude de contenus disponibles sur Internet sur ce sujet, adaptés à votre langage de programmation préféré.

PARTIE 1 : Comment configurer le streaming côté serveur gRPC avec Go

Il est temps de mettre notre plan à exécution ! En supposant que vous ayez une compréhension de base des concepts suivants, passons directement à la mise en œuvre :

  1. gRPC : C'est un protocole de communication qui permet au client et au serveur d'échanger des données efficacement.
  2. Streaming côté serveur : Cette fonctionnalité est particulièrement utile lorsque le serveur doit envoyer une grande quantité de données au client. En utilisant le streaming côté serveur, le serveur peut diviser les données en portions plus petites et les envoyer une par une. Le client peut alors choisir de ne plus recevoir de données s'il en a reçu suffisamment ou s'il a attendu trop longtemps.

Maintenant, commençons par l'implémentation du code.

Étape 1 : Créer le fichier proto
Pour commencer, nous devons définir un fichier protobuf qui sera utilisé à la fois côté client et côté serveur. Voici un exemple simple :

syntax = "proto3";

package protobuf;

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

message Request {
  int32 id = 1;
}

message Response {
  string result = 1;
}

Dans ce fichier proto, nous avons une seule fonction appelée FetchResponse qui prend un paramètre Request et renvoie un flux de messages de réponse.

Étape 2 : générer le fichier tampon de protocole

Avant de continuer, nous devons générer le fichier pb correspondant qui sera utilisé dans notre programme Go. Chaque langage de programmation possède sa propre manière de générer le fichier tampon de protocole. Dans Go, nous utiliserons la bibliothèque de protocoles.
Si vous ne l'avez pas encore installé, vous pouvez trouver le guide d'installation fourni par Google.
Pour générer le fichier tampon de protocole, exécutez la commande suivante :

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

Maintenant, nous avons le fichier data.pb.go prêt à être utilisé dans notre implémentation.

Étape 3 : implémentation côté serveur
Pour créer le fichier serveur, suivez l'extrait de code ci-dessous :

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 



Dans ce fichier serveur, j'ai implémenté la fonction FetchResponse, qui reçoit une requête du client et renvoie un flux de réponses. Le serveur simule un traitement simultané à l'aide de goroutines. Pour chaque demande, il renvoie cinq réponses au client. Chaque réponse est retardée d'une certaine durée pour simuler différents temps de traitement.
Le serveur écoute sur le port 50005 et enregistre le StreamServiceServer auprès du serveur créé. Enfin, il commence à répondre aux requêtes et enregistre un message indiquant que le serveur a démarré.
Vous disposez désormais du fichier serveur prêt à gérer les demandes de streaming des clients.

Partie 2

Restez à l'écoute pour la partie 2 où nous continuerons à plonger dans le monde passionnant du streaming de données et comment il peut révolutionner votre interface utilisateur.

Déclaration de sortie Cet article est reproduit sur : https://dev.to/marscode/unlock-the-power-of-real-time-ui-a-beginners-guide-to-streaming-data-with-reactjs-grpc-envoy- and- golang-271p?1 S'il y a une infraction, veuillez contacter [email protected] pour la supprimer
Dernier tutoriel Plus>

Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.

Copyright© 2022 湘ICP备2022001581号-3