”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 释放实时 UI 的力量:使用 React.js、gRPC、Envoy 和 Golang 流式传输数据的初学者指南

释放实时 UI 的力量:使用 React.js、gRPC、Envoy 和 Golang 流式传输数据的初学者指南

发布于2024-11-08
浏览:697

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]删除
最新教程 更多>
  • 如何在不离开当前页面的情况下打开下载窗口?
    如何在不离开当前页面的情况下打开下载窗口?
    在不离开当前页面的情况下打开下载窗口的最简单方法要在不离开当前页面或打开弹出窗口的情况下打开下载对话框,使用以下跨浏览器 JavaScript:window.location.assign(url);此方法不会打开新窗口或选项卡,即使在 Internet Explorer 6 中也能正常工作。通过将...
    编程 发布于2024-11-08
  • 如何在 C++ 中使用虚拟模板方法实现多态性?
    如何在 C++ 中使用虚拟模板方法实现多态性?
    C 虚拟模板方法在 C 中,将静态时间多态性(模板)与运行时多态性结合起来可能具有挑战性。这在以下抽象类中很明显:class AbstractComputation { public: template <class T> virtual void setData...
    编程 发布于2024-11-08
  • 多线程:工程师的关键概念 - 第 1 部分
    多线程:工程师的关键概念 - 第 1 部分
    了解关键的多线程概念对于软件开发人员至关重要,因为它不仅可以增强技能,还可以直接影响应用程序开发、可扩展性和软件解决方案的整体质量。 原子性 在多线程上下文中,原子操作确保一个线程可以执行一系列操作而不会被其他线程中断。多个线程可能会尝试同时读取或写入共享数据。如果没有原子性,并发...
    编程 发布于2024-11-08
  • 后端开发路线图
    后端开发路线图
    对于所有有抱负的后端开发人员,我知道导航您的学习道路是多么令人畏惧。这就是为什么我很高兴能够提供详细的路线图来帮助您掌握用于后端开发的 JavaScript!? 1️⃣ 从基础开始:熟悉 JavaScript 基础知识。理解变量、函数和控制结构至关重要。 2️⃣ 深入了解 Node.js:这个强大的...
    编程 发布于2024-11-08
  • 如何在Go中调用Linux共享库函数?
    如何在Go中调用Linux共享库函数?
    在 Go 中调用 Linux 共享库函数在此问题中,开发人员寻求从共享对象 (.so) 调用函数的帮助他们的 Go 代码中的文件。 Python 中的 ctypes 包可以访问 C 函数,可以作为所需的功能。使用 cgo 进行静态共享库加载静态调用函数在编译时已知共享库,可以使用 cgo 包。以下是...
    编程 发布于2024-11-08
  • Java 中的字符串文字是否会被垃圾收集?
    Java 中的字符串文字是否会被垃圾收集?
    字符串文字的垃圾收集Q1:如果一个字符串在编译时被定义为文字(例如,String str = "java"),它会被垃圾收集吗?通常不会。代码对象包含对文字 String 对象的引用,使它们保持可访问性。垃圾回收仅在代码对象变得不可访问时发生。Q2:如果使用 intern 方法(...
    编程 发布于2024-11-08
  • 跨平台使用 RSA 加密和解密保护数据
    跨平台使用 RSA 加密和解密保护数据
    RSA加密简介 在当今的数字环境中,保护敏感数据对于个人和组织都至关重要。 RSA (Rivest-Shamir-Adleman) 加密作为保护数据的强大解决方案脱颖而出。它是一种非对称加密算法,这意味着它使用一对密钥:用于加密的公钥和用于解密的私钥。 RSA 加密的主要好处之一是...
    编程 发布于2024-11-08
  • 如何利用导师在数字营销中实现职业发展
    如何利用导师在数字营销中实现职业发展
    在当今快速发展的数字营销环境中,保持领先趋势并提高您的技能至关重要。加速该领域职业发展的最有效方法之一是利用指导。无论您是刚刚起步还是希望晋升为领导角色,数字营销导师都可以提供宝贵的指导和见解,帮助您实现职业目标。本文探讨了指导如何塑造您的职业轨迹,并提供了充分利用指导经验的策略。 ...
    编程 发布于2024-11-08
  • 将 Cloudinary 集成到 Next.js 应用程序中
    将 Cloudinary 集成到 Next.js 应用程序中
    了解 Cloudinary 及其定价。 1. 创建一个Cloudinary账户 如果您没有帐户,请在 Cloudinary 注册并创建一个新帐户。 2.安装Cloudinary SDK 您可以使用npm或yarn安装Cloudinary SDK: npm instal...
    编程 发布于2024-11-08
  • 我们如何在 CSS 中对后代元素进行分组?
    我们如何在 CSS 中对后代元素进行分组?
    用于后代分组的难以捉摸的 CSS 选择器虽然 CSS 为样式元素提供了强大的选项,但一个值得注意的缺失是轻松对后代进行分组的能力。当对 HTML 表格等复杂元素进行样式设计时,这种限制变得很明显,其中为列标题和单元格分配相同的样式需要繁琐的选择器。后代样式设计的困境考虑下面的表示例:<tabl...
    编程 发布于2024-11-08
  • ## 如何在 PHP 中可靠地确定目录是否为空?
    ## 如何在 PHP 中可靠地确定目录是否为空?
    在 PHP 中验证目录是否为空确定目录是否为空可能是各种 Web 开发场景中的一项重要任务。但是,某些脚本可能会遇到问题,即输出错误地建议空或非空目录,尽管其中存在或不存在文件。原始脚本提供的脚本尝试使用以下代码检查目录是否为空:$q = (count(glob("$dir/*"...
    编程 发布于2024-11-08
  • `&deployment` 指针如何实现 Kubernetes 中的 `runtime.Object` 接口?
    `&deployment` 指针如何实现 Kubernetes 中的 `runtime.Object` 接口?
    &deployment指针如何满足运行时对象接口在Kubernetes代码中,kubectl/run.go中的Generate函数返回包含runtime.Object 和错误的结果列表。函数最后一行,return &deployment, nil,将局部变量deployment的地址赋值给r...
    编程 发布于2024-11-08
  • 用于带或不带协议的 URL 匹配的通用正则表达式
    用于带或不带协议的 URL 匹配的通用正则表达式
    匹配带或不带协议的 URL 的正则表达式对于可能包含或不包含“http://www”前缀的 URL ,可以使用正则表达式来执行匹配操作。下面提供了详细的正则表达式模式:((https?|ftp)://)?([a-z0-9 !*(),;?&amp=$_.-] (:[a-z0-9 !*(),;?...
    编程 发布于2024-11-08
  • 如何防止 Foreach 循环输出中出现尾随逗号?
    如何防止 Foreach 循环输出中出现尾随逗号?
    消除 Foreach 循环中的尾随逗号在编程中,通常需要迭代项目列表并单独输出每个项目通过分隔符,例如逗号。但是,当使用 foreach 循环执行此任务时,您可能会遇到最后一项后面出现尾随逗号的问题。考虑以下 PHP 代码:foreach ($this->sinonimo as $s){ ...
    编程 发布于2024-11-08
  • LZ C++ React Native 绑定,实现极快的压缩算法
    LZ C++ React Native 绑定,实现极快的压缩算法
    我最近开始涉足 JSI 和 C,因此,我必须构建一个名为react-native-lz4 的小包。它是一个在 React Native 中使用 C 编写的 LZ4 算法进行快速文件压缩的​​库。 它仍处于实验阶段,因为我仍在完善错误处理并扩展其 API,但它已经可以使用(谨慎!) 包:https:/...
    编程 发布于2024-11-08

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3