釋放即時 UI 的力量：使用 React.js、gRPC、Envoy 和 Golang 串流資料的初學者指南

作者：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 代理，您可以跳到第二部分（Envoy 作為Kubernetes 中的前端代理）並探索該方面，或者只是對前端部分，那你可以直接查看部落格的前端部分。
在最初的部分中，我們將重點關注該系列中最簡單的部分：「如何使用 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;
}

在此原型檔案中，我們有一個名為 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中文網其他相關文章！