"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Desbloqueie o poder da IU em tempo real: um guia para iniciantes em streaming de dados com React.js, gRPC, Envoy e Golang

Desbloqueie o poder da IU em tempo real: um guia para iniciantes em streaming de dados com React.js, gRPC, Envoy e Golang

Publicado em 2024-11-08
Navegar:569

Unlock the Power of Real-Time UI: A Beginner

Escrito por Naveen M

Fundo

Como parte de nossa equipe da plataforma Kubernetes, enfrentamos o desafio constante de fornecer visibilidade em tempo real das cargas de trabalho dos usuários. Do monitoramento do uso de recursos ao rastreamento da atividade do cluster Kubernetes e do status do aplicativo, existem inúmeras soluções de código aberto disponíveis para cada categoria específica. No entanto, essas ferramentas geralmente estão espalhadas por diferentes plataformas, resultando em uma experiência de usuário fragmentada. Para resolver esse problema, adotamos o poder do streaming no servidor, o que nos permite fornecer uso de recursos ao vivo, eventos do Kubernetes e status de aplicativos assim que os usuários acessam o portal da nossa plataforma.

Introdução

Ao implementar o streaming no servidor, podemos transmitir dados perfeitamente para a interface do usuário, fornecendo informações atualizadas sem a necessidade de atualizações manuais ou chamadas constantes de API. Essa abordagem revoluciona a experiência do usuário, permitindo que eles visualizem instantaneamente a integridade e o desempenho de suas cargas de trabalho de maneira unificada e simplificada. Seja monitorando a utilização de recursos, mantendo-se informado sobre eventos do Kubernetes ou controlando o status do aplicativo, nossa solução de streaming do lado do servidor reúne todas as informações críticas em um único painel em tempo real, mas isso será aplicável a qualquer pessoa que queira fornece dados de transmissão ao vivo para a interface do usuário.
Já se foram os dias em que era necessário navegar por diversas ferramentas e plataformas para coletar insights essenciais. Com nossa abordagem simplificada, os usuários podem acessar uma visão geral abrangente de seu ambiente Kubernetes no momento em que acessam o portal da nossa plataforma. Ao aproveitar o poder do streaming no servidor, transformamos a forma como os usuários interagem e monitoram suas cargas de trabalho, tornando sua experiência mais eficiente, intuitiva e produtiva.
Através de nossa série de blogs, pretendemos guiá-lo através dos meandros da configuração de streaming do lado do servidor com tecnologias como React.js, Envoy, gRPC e Golang.

Existem três componentes principais envolvidos neste projeto:
1. O backend, que é desenvolvido usando Golang e utiliza streaming do lado do servidor gRPC para transmitir dados.
2. O proxy Envoy, responsável por tornar o serviço de back-end acessível ao mundo exterior.
3. O frontend, que é construído usando React.js e emprega grpc-web para estabelecer comunicação com o backend.
A série é dividida em várias partes para acomodar as diversas preferências de idioma dos desenvolvedores. Se você estiver interessado especificamente na função do Envoy em streaming ou quiser aprender sobre a implantação de um proxy Envoy no Kubernetes, você pode pular para a segunda parte (Envoy como proxy frontend no Kubernetes) e explorar esse aspecto ou apenas interessado no parte frontal, então você pode simplesmente conferir a parte frontal do blog.
Nesta parte inicial, vamos nos concentrar no segmento mais fácil da série: “Como configurar o streaming do lado do servidor gRPC com Go”. Mostraremos exemplos de aplicativos com streaming no servidor. Felizmente, existe uma grande variedade de conteúdo disponível na Internet sobre este tópico, adaptado à sua linguagem de programação preferida.

PARTE 1: Como configurar o streaming do lado do servidor gRPC com Go

É hora de colocar nosso plano em ação! Supondo que você tenha um conhecimento básico dos conceitos a seguir, vamos direto à implementação:

  1. gRPC: É um protocolo de comunicação que permite que cliente e servidor troquem dados de forma eficiente.
  2. Streaming do lado do servidor: Este recurso é particularmente útil quando o servidor precisa enviar uma grande quantidade de dados ao cliente. Ao usar o streaming do lado do servidor, o servidor pode dividir os dados em porções menores e enviá-los um por um. O cliente pode então optar por parar de receber dados se tiver recebido dados suficientes ou se estiver esperando por muito tempo.

Agora, vamos começar com a implementação do código.

Etapa 1: Crie o arquivo proto
Para começar, precisamos definir um arquivo protobuf que será usado tanto pelo cliente quanto pelo servidor. Aqui está um exemplo simples:

syntax = "proto3";

package protobuf;

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

message Request {
  int32 id = 1;
}

message Response {
  string result = 1;
}

Neste arquivo proto, temos uma única função chamada FetchResponse que recebe um parâmetro Request e retorna um fluxo de mensagens de resposta.

Etapa 2: gerar o arquivo de buffer de protocolo

Antes de prosseguirmos, precisamos gerar o arquivo pb correspondente que será usado em nosso programa Go. Cada linguagem de programação possui sua própria maneira de gerar o arquivo de buffer de protocolo. No Go, usaremos a biblioteca protoc.
Se ainda não o instalou, você pode encontrar o guia de instalação fornecido pelo Google.
Para gerar o arquivo de buffer de protocolo, execute o seguinte comando:

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

Agora temos o arquivo data.pb.go pronto para ser usado em nossa implementação.

Etapa 3: implementação no lado do servidor
Para criar o arquivo do servidor, siga o trecho de código abaixo:

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 



Neste arquivo do servidor, implementei a função FetchResponse, que recebe uma solicitação do cliente e envia de volta um fluxo de respostas. O servidor simula o processamento simultâneo usando goroutines. Para cada solicitação, ele transmite cinco respostas de volta ao cliente. Cada resposta é atrasada por um determinado período para simular diferentes tempos de processamento.
O servidor escuta na porta 50005 e registra o StreamServiceServer no servidor criado. Por fim, ele começa a atender solicitações e registra uma mensagem indicando que o servidor foi iniciado.
Agora você tem o arquivo do servidor pronto para lidar com solicitações de streaming de clientes.

Parte 2

Fique ligado na Parte 2, onde continuaremos a mergulhar no emocionante mundo do streaming de dados e como ele pode revolucionar sua interface de usuário.

Declaração de lançamento Este artigo foi reproduzido em: https://dev.to/marscode/unlock-the-power-of-real-time-ui-a-beginners-guide-to-streaming-data-with-reactjs-grpc-envoy- e- golang-271p?1 Se houver alguma violação, entre em contato com [email protected] para excluí-la
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3