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

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

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

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中如何並發運行異步操作並正確處理錯誤?
    在JavaScript中如何並發運行異步操作並正確處理錯誤?
    同意操作execution 在執行asynchronous操作時,相關的代碼段落會遇到一個問題,當執行asynchronous操作:此實現在啟動下一個操作之前依次等待每個操作的完成。要啟用並發執行,需要進行修改的方法。 第一個解決方案試圖通過獲得每個操作的承諾來解決此問題,然後單獨等待它們: c...
    程式設計 發佈於2025-04-25
  • 左連接為何在右表WHERE子句過濾時像內連接?
    左連接為何在右表WHERE子句過濾時像內連接?
    左JOIN CONUNDRUM:WITCHING小時在數據庫Wizard的領域中變成內在的加入很有趣,當將c.foobar條件放置在上面的Where子句中時,據說左聯接似乎會轉換為內部連接。僅當滿足A.Foo和C.Foobar標準時,才會返回結果。 為什麼要變形?關鍵在於其中的子句。當左聯接的右側...
    程式設計 發佈於2025-04-25
  • 反射動態實現Go接口用於RPC方法探索
    反射動態實現Go接口用於RPC方法探索
    在GO 使用反射來實現定義RPC式方法的界面。例如,考慮一個接口,例如:鍵入myService接口{ 登錄(用戶名,密碼字符串)(sessionId int,錯誤錯誤) helloworld(sessionid int)(hi String,錯誤錯誤) } 替代方案而不是依靠反射...
    程式設計 發佈於2025-04-25
  • Java為何無法創建泛型數組?
    Java為何無法創建泛型數組?
    通用陣列創建錯誤 arrayList [2]; JAVA報告了“通用數組創建”錯誤。為什麼不允許這樣做? 答案:Create an Auxiliary Class:public static ArrayList<myObject>[] a = new ArrayList<my...
    程式設計 發佈於2025-04-25
  • 如何從2D數組中提取元素?使用另一數組的索引
    如何從2D數組中提取元素?使用另一數組的索引
    Using NumPy Array as Indices for the 2nd Dimension of Another ArrayTo extract specific elements from a 2D array based on indices provided by a second ...
    程式設計 發佈於2025-04-25
  • Java中如何使用觀察者模式實現自定義事件?
    Java中如何使用觀察者模式實現自定義事件?
    在Java 中創建自定義事件的自定義事件在許多編程場景中都是無關緊要的,使組件能夠基於特定的觸發器相互通信。本文旨在解決以下內容:問題語句我們如何在Java中實現自定義事件以促進基於特定事件的對象之間的交互,定義了管理訂閱者的類界面。 以下代碼片段演示瞭如何使用觀察者模式創建自定義事件: args...
    程式設計 發佈於2025-04-25
  • Async Void vs. Async Task在ASP.NET中:為什麼Async Void方法有時會拋出異常?
    Async Void vs. Async Task在ASP.NET中:為什麼Async Void方法有時會拋出異常?
    在ASP.NET async void void async void void void void void的設計無需返回asynchroncon而無需返回任務對象。他們在執行過程中增加未償還操作的計數,並在完成後減少。在某些情況下,這種行為可能是有益的,例如未期望或明確預期操作結果的火災和...
    程式設計 發佈於2025-04-25
  • 如何使用Depimal.parse()中的指數表示法中的數字?
    如何使用Depimal.parse()中的指數表示法中的數字?
    在嘗試使用Decimal.parse(“ 1.2345e-02”中的指數符號表示法表示的字符串時,您可能會遇到錯誤。這是因為默認解析方法無法識別指數符號。 成功解析這樣的字符串,您需要明確指定它代表浮點數。您可以使用numbersTyles.Float樣式進行此操作,如下所示:[&& && && ...
    程式設計 發佈於2025-04-25
  • 如何使用FormData()處理多個文件上傳?
    如何使用FormData()處理多個文件上傳?
    )處理多個文件輸入時,通常需要處理多個文件上傳時,通常是必要的。 The fd.append("fileToUpload[]", files[x]); method can be used for this purpose, allowing you to send multi...
    程式設計 發佈於2025-04-25
  • 如何使用“ JSON”軟件包解析JSON陣列?
    如何使用“ JSON”軟件包解析JSON陣列?
    parsing JSON與JSON軟件包 QUALDALS:考慮以下go代碼:字符串 } func main(){ datajson:=`[“ 1”,“ 2”,“ 3”]`` arr:= jsontype {} 摘要:= = json.unmarshal([] byte(...
    程式設計 發佈於2025-04-25
  • Python高效去除文本中HTML標籤方法
    Python高效去除文本中HTML標籤方法
    在Python中剝離HTML標籤,以獲取原始的文本表示Achieving Text-Only Extraction with Python's MLStripperTo streamline the stripping process, the Python standard librar...
    程式設計 發佈於2025-04-25
  • Python元類工作原理及類創建與定制
    Python元類工作原理及類創建與定制
    python中的metaclasses是什麼? Metaclasses負責在Python中創建類對象。就像類創建實例一樣,元類也創建類。他們提供了對類創建過程的控制層,允許自定義類行為和屬性。 在Python中理解類作為對象的概念,類是描述用於創建新實例或對象的藍圖的對象。這意味著類本身是使用...
    程式設計 發佈於2025-04-25
  • CSS強類型語言解析
    CSS強類型語言解析
    您可以通过其强度或弱输入的方式对编程语言进行分类的方式之一。在这里,“键入”意味着是否在编译时已知变量。一个例子是一个场景,将整数(1)添加到包含整数(“ 1”)的字符串: result = 1 "1";包含整数的字符串可能是由带有许多运动部件的复杂逻辑套件无意间生成的。它也可以是故意从单个真理...
    程式設計 發佈於2025-04-25
  • 如何同步迭代並從PHP中的兩個等級陣列打印值?
    如何同步迭代並從PHP中的兩個等級陣列打印值?
    同步的迭代和打印值來自相同大小的兩個數組使用兩個數組相等大小的selectbox時,一個包含country代碼的數組,另一個包含鄉村代碼,另一個包含其相應名稱的數組,可能會因不當提供了exply for for for the uncore for the forsion for for ytry...
    程式設計 發佈於2025-04-25
  • 如何在Java字符串中有效替換多個子字符串?
    如何在Java字符串中有效替換多個子字符串?
    在java 中有效地替換多個substring,需要在需要替換一個字符串中的多個substring的情況下,很容易求助於重複應用字符串的刺激力量。 However, this can be inefficient for large strings or when working with nu...
    程式設計 發佈於2025-04-25

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3