"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > 실시간 UI의 강력한 기능 활용: React.js, gRPC, Envoy 및 Golang을 사용한 데이터 스트리밍을 위한 초보자 가이드

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

2024-11-08에 게시됨
검색:740

Unlock the Power of Real-Time UI: A Beginner

Naveen 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단계: 프로토 파일 생성
시작하려면 클라이언트 측과 서버 측 모두에서 사용할 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라는 단일 함수가 있습니다.

2단계: 프로토콜 버퍼 파일 생성

계속하기 전에 Go 프로그램에서 사용할 해당 pb 파일을 생성해야 합니다. 각 프로그래밍 언어에는 프로토콜 버퍼 파일을 생성하는 고유한 방법이 있습니다. Go에서는 protoc 라이브러리를 사용할 것입니다.
아직 설치하지 않으셨다면 구글에서 제공하는 설치가이드를 확인하실 수 있습니다.
프로토콜 버퍼 파일을 생성하려면 다음 명령을 실행하십시오.

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

이제 구현에 사용할 data.pb.go 파일이 준비되었습니다.

3단계: 서버측 구현
서버 파일을 생성하려면 아래 코드 조각을 따르십시오.

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 



이 서버 파일에서는 클라이언트로부터 요청을 받고 응답 스트림을 다시 보내는 FetchResponse 함수를 구현했습니다. 서버는 고루틴을 사용하여 동시 처리를 시뮬레이션합니다. 각 요청에 대해 5개의 응답을 클라이언트로 다시 스트리밍합니다. 각 응답은 다양한 처리 시간을 시뮬레이션하기 위해 특정 기간만큼 지연됩니다.
서버는 포트 50005에서 수신 대기하고 생성된 서버에 StreamServiceServer를 등록합니다. 마지막으로 요청 처리를 시작하고 서버가 시작되었음을 나타내는 메시지를 기록합니다.
이제 클라이언트의 스트리밍 요청을 처리할 수 있는 서버 파일이 준비되었습니다.

2부

스트리밍 데이터의 흥미진진한 세계와 그것이 사용자 인터페이스를 어떻게 혁신할 수 있는지 계속해서 알아볼 2부에서 계속 지켜봐 주시기 바랍니다.

릴리스 선언문 이 기사는 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 침해 내용이 있는 경우, [email protected]으로 연락하여 삭제해 주시기 바랍니다.
최신 튜토리얼 더>

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3