」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 釋放即時 UI 的力量:使用 React.js、gRPC、Envoy 和 Golang 串流資料的初學者指南

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

發佈於2024-11-08
瀏覽:344

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 代理,您可以跳到第二部分(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 的函数,它接受请求参数并返回响应消息流。

第 2 步:生成协议缓冲区文件

在继续之前,我们需要生成将在 Go 程序中使用的相应 pb 文件。每种编程语言都有自己的生成协议缓冲区文件的方法。在 Go 中,我们将使用协议库。
如果您还没有安装,可以找到Google提供的安装指南。
要生成协议缓冲区文件,请运行以下命令:

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

现在,我们已经准备好在我们的实现中使用 data.pb.go 文件。

第三步:服务器端实现
要创建服务器文件,请按照以下代码片段操作:

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 函数,该函数接收来自客户端的请求并发送回响应流。服务器使用 goroutine 模拟并发处理。对于每个请求,它将五个响应流式传输回客户端。每个响应都会延迟一定的持续时间,以模拟不同的处理时间。
服务器侦听端口 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