"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > Desbloquee el poder de la interfaz de usuario en tiempo real: una guía para principiantes sobre la transmisión de datos con React.js, gRPC, Envoy y Golang

Desbloquee el poder de la interfaz de usuario en tiempo real: una guía para principiantes sobre la transmisión de datos con React.js, gRPC, Envoy y Golang

Publicado el 2024-11-08
Navegar:168

Unlock the Power of Real-Time UI: A Beginner

Escrito por Naveen M

Fondo

Como parte de nuestro equipo de plataforma Kubernetes, enfrentamos el desafío constante de brindar visibilidad en tiempo real de las cargas de trabajo de los usuarios. Desde monitorear el uso de recursos hasta rastrear la actividad del clúster de Kubernetes y el estado de las aplicaciones, existen numerosas soluciones de código abierto disponibles para cada categoría específica. Sin embargo, estas herramientas suelen estar dispersas en diferentes plataformas, lo que da como resultado una experiencia de usuario fragmentada. Para abordar este problema, hemos adoptado el poder de la transmisión del lado del servidor, lo que nos permite ofrecer el uso de recursos en vivo, eventos de Kubernetes y el estado de la aplicación tan pronto como los usuarios acceden a nuestro portal de plataforma.

Introducción

Al implementar la transmisión del lado del servidor, podemos transmitir datos sin problemas a la interfaz de usuario, proporcionando información actualizada sin la necesidad de actualizaciones manuales o llamadas constantes a la API. Este enfoque revoluciona la experiencia del usuario, permitiéndoles visualizar instantáneamente el estado y el rendimiento de sus cargas de trabajo de una manera unificada y simplificada. Ya sea para monitorear la utilización de recursos, mantenerse informado sobre los eventos de Kubernetes o controlar el estado de la aplicación, nuestra solución de transmisión del lado del servidor reúne toda la información crítica en un único panel en tiempo real, pero esto será aplicable a cualquiera que quiera proporcionar datos de transmisión en vivo a la interfaz de usuario.
Atrás quedaron los días en que se navegaba a través de múltiples herramientas y plataformas para recopilar información esencial. Con nuestro enfoque optimizado, los usuarios pueden acceder a una descripción general completa de su entorno Kubernetes en el momento en que acceden a nuestro portal de plataforma. Al aprovechar el poder del streaming del lado del servidor, hemos transformado la forma en que los usuarios interactúan y monitorean sus cargas de trabajo, haciendo que su experiencia sea más eficiente, intuitiva y productiva.
A través de nuestra serie de blogs, pretendemos guiarlo a través de las complejidades de configurar la transmisión del lado del servidor con tecnologías como React.js, Envoy, gRPC y Golang.

Hay tres componentes principales involucrados en este proyecto:
1. El backend, que se desarrolla utilizando Golang y utiliza la transmisión del lado del servidor gRPC para transmitir datos.
2. El proxy Envoy, que es responsable de hacer que el servicio backend sea accesible para el mundo exterior.
3. El frontend, que se construye usando React.js y emplea grpc-web para establecer comunicación con el backend.
La serie se divide en varias partes para adaptarse a las diversas preferencias lingüísticas de los desarrolladores. Si está interesado específicamente en el rol de Envoy en la transmisión o desea aprender sobre cómo implementar un proxy Envoy en Kubernetes, puede saltar a la segunda parte (Envoy como proxy frontend en Kubernetes) y explorar ese aspecto o simplemente está interesado en el parte frontal, luego puedes consultar la parte frontal del blog.
En esta parte inicial, nos centraremos en el segmento más sencillo de la serie: "Cómo configurar la transmisión del lado del servidor de gRPC con Go". Vamos a mostrar aplicaciones de muestra con transmisión del lado del servidor. Afortunadamente, existe una gran cantidad de contenido disponible en Internet sobre este tema, adaptado a su lenguaje de programación preferido.

PARTE 1: Cómo configurar la transmisión del lado del servidor gRPC con Go

¡Es hora de poner nuestro plan en acción! Suponiendo que tiene un conocimiento básico de los siguientes conceptos, profundicemos en la implementación:

  1. gRPC: Es un protocolo de comunicación que permite al cliente y al servidor intercambiar datos de manera eficiente.
  2. Transmisión del lado del servidor: esta función es particularmente útil cuando el servidor necesita enviar una gran cantidad de datos al cliente. Al utilizar la transmisión del lado del servidor, el servidor puede dividir los datos en porciones más pequeñas y enviarlas una por una. Luego, el cliente puede optar por dejar de recibir datos si ha recibido suficientes o si ha estado esperando demasiado tiempo.

Ahora, comencemos con la implementación del código.

Paso 1: Crear el archivo Proto
Para comenzar, necesitamos definir un archivo protobuf que será utilizado tanto por el lado del cliente como por el del servidor. He aquí un ejemplo sencillo:

syntax = "proto3";

package protobuf;

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

message Request {
  int32 id = 1;
}

message Response {
  string result = 1;
}

En este archivo de prototipo, tenemos una única función llamada FetchResponse que toma un parámetro de Solicitud y devuelve un flujo de mensajes de Respuesta.

Paso 2: generar el archivo de búfer de protocolo

Antes de continuar, necesitamos generar el archivo pb correspondiente que se utilizará en nuestro programa Go. Cada lenguaje de programación tiene su propia forma de generar el archivo buffer de protocolo. En Go, usaremos la biblioteca de protocolos.
Si aún no lo has instalado, puedes encontrar la guía de instalación proporcionada por Google.
Para generar el archivo de búfer de protocolo, ejecute el siguiente comando:

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

Ahora tenemos el archivo data.pb.go listo para ser utilizado en nuestra implementación.

Paso 3: Implementación del lado del servidor
Para crear el archivo del servidor, siga el fragmento de código a continuación:

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 



En este archivo de servidor, he implementado la función FetchResponse, que recibe una solicitud del cliente y envía un flujo de respuestas. El servidor simula el procesamiento simultáneo mediante gorutinas. Para cada solicitud, transmite cinco respuestas al cliente. Cada respuesta se retrasa una cierta duración para simular diferentes tiempos de procesamiento.
El servidor escucha en el puerto 50005 y registra StreamServiceServer con el servidor creado. Finalmente, comienza a atender solicitudes y registra un mensaje que indica que el servidor se ha iniciado.
Ahora tiene el archivo del servidor listo para manejar las solicitudes de transmisión de los clientes.

parte 2

Estén atentos a la Parte 2, donde continuaremos sumergiéndonos en el apasionante mundo de la transmisión de datos y cómo puede revolucionar su interfaz de usuario.

Declaración de liberación Este artículo se reproduce en: https://dev.to/marscode/unlock-the-power-of-real-time-ui-a-beginners-guide-to-streaming-data-with-reactjs-grpc-envoy- y- golang-271p?1 Si hay alguna infracción, comuníquese con [email protected] para eliminarla.
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3