실시간 UI의 강력한 기능 활용: React.js, gRPC, Envoy 및 Golang을 사용한 데이터 스트리밍을 위한 초보자 가이드

나빈M 작사

배경

Kubernetes 플랫폼 팀의 일원으로서 우리는 사용자 워크로드에 대한 실시간 가시성을 제공해야 하는 끊임없는 과제에 직면해 있습니다. 리소스 사용량 모니터링부터 Kubernetes 클러스터 활동 및 애플리케이션 상태 추적에 이르기까지 각 특정 카테고리에 사용할 수 있는 수많은 오픈 소스 솔루션이 있습니다. 그러나 이러한 도구는 다양한 플랫폼에 분산되어 있는 경우가 많아 사용자 경험이 단편화되는 경우가 많습니다. 이 문제를 해결하기 위해 우리는 서버 측 스트리밍의 기능을 활용하여 사용자가 플랫폼 포털에 액세스하는 즉시 실시간 리소스 사용량, Kubernetes 이벤트 및 애플리케이션 상태를 제공할 수 있습니다.

소개

서버 측 스트리밍을 구현하면 데이터를 사용자 인터페이스로 원활하게 스트리밍하여 수동으로 새로 고치거나 지속적인 API 호출 없이도 최신 정보를 제공할 수 있습니다. 이 접근 방식은 사용자 경험을 혁신하여 사용자가 통합되고 단순화된 방식으로 워크로드의 상태와 성능을 즉시 시각화할 수 있도록 합니다. 리소스 활용도 모니터링, Kubernetes 이벤트에 대한 정보 유지, 애플리케이션 상태 감시 등 당사의 서버 측 스트리밍 솔루션은 모든 중요한 정보를 단일 실시간 대시보드에 통합하지만 이는 다음을 원하는 누구에게나 적용 가능합니다. 사용자 인터페이스에 라이브 스트리밍 데이터를 제공합니다.
필수적인 통찰력을 수집하기 위해 여러 도구와 플랫폼을 탐색하는 시대는 지났습니다. 간소화된 접근 방식을 통해 사용자는 플랫폼 포털에 접속하는 순간 Kubernetes 환경에 대한 포괄적인 개요에 액세스할 수 있습니다. 서버 측 스트리밍의 강력한 기능을 활용하여 사용자가 워크로드와 상호 작용하고 모니터링하는 방식을 변화시켜 사용자 경험을 더욱 효율적이고 직관적이며 생산적으로 만들었습니다.
블로그 시리즈를 통해 React.js, Envoy, gRPC 및 Golang과 같은 기술을 사용하여 서버 측 스트리밍을 설정하는 복잡한 방법을 안내하는 것을 목표로 합니다.

이 프로젝트에는 세 가지 주요 구성 요소가 포함됩니다.
1. Golang을 사용하여 개발하고 gRPC 서버 측 스트리밍을 활용하여 데이터를 전송하는 백엔드입니다.
2. 백엔드 서비스를 외부 세계에 액세스할 수 있게 만드는 역할을 담당하는 Envoy 프록시
3. React.js를 사용하여 구축되고 grpc-web을 사용하여 백엔드와의 통신을 설정하는 프런트엔드입니다.
이 시리즈는 개발자의 다양한 언어 선호도를 수용하기 위해 여러 부분으로 나누어져 있습니다. 특히 스트리밍에서 Envoy의 역할에 관심이 있거나 Kubernetes에 Envoy 프록시를 배포하는 방법을 배우고 싶다면 두 번째 부분(Kubernetes에서 프런트엔드 프록시로서의 Envoy)으로 이동하여 해당 측면을 살펴보거나 프론트엔드 부분은 블로그의 프론트엔드 부분만 확인하시면 됩니다.
이 첫 번째 부분에서는 시리즈 중 가장 쉬운 부분인 "Go를 사용하여 gRPC 서버 측 스트리밍을 설정하는 방법"에 중점을 둘 것입니다. 서버 측 스트리밍이 포함된 샘플 애플리케이션을 보여 드리겠습니다. 다행스럽게도 이 주제에 대해 선호하는 프로그래밍 언어에 맞춰진 풍부한 콘텐츠가 인터넷에 있습니다.

1부: Go를 사용하여 gRPC 서버 측 스트리밍을 설정하는 방법

이제 우리의 계획을 실행에 옮길 시간입니다! 다음 개념에 대한 기본적인 이해가 있다고 가정하고 바로 구현을 살펴보겠습니다.

1. gRPC: 클라이언트와 서버가 효율적으로 데이터를 교환할 수 있게 해주는 통신 프로토콜입니다.
2. 서버 측 스트리밍: 이 기능은 서버가 클라이언트에 대량의 데이터를 전송해야 할 때 특히 유용합니다. 서버 측 스트리밍을 사용하면 서버는 데이터를 더 작은 부분으로 분할하여 하나씩 보낼 수 있습니다. 그런 다음 클라이언트는 충분히 수신되었거나 너무 오랫동안 대기한 경우 데이터 수신을 중지하도록 선택할 수 있습니다.

이제 코드 구현을 시작해 보겠습니다.

1단계: Proto 파일 생성
시작하려면 클라이언트 측과 서버 측 모두에서 사용할 protobuf 파일을 정의해야 합니다. 다음은 간단한 예입니다.

syntax = "proto3";

package protobuf;

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

message Request {
  int32 id = 1;
}

message Response {
  string result = 1;
}

이 proto 파일에는 요청 매개변수를 사용하고 응답 메시지 스트림을 반환하는 FetchResponse라는 단일 함수가 있습니다.

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.

위 내용은 실시간 UI의 강력한 기능 활용: React.js, gRPC, Envoy 및 Golang을 사용한 데이터 스트리밍을 위한 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!