释放实时 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中文网其他相关文章！