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

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

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

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]刪除
最新教學 更多>
  • 使用 Slack、GitHub、Jira、Google 工具等進行有用的自動化
    使用 Slack、GitHub、Jira、Google 工具等進行有用的自動化
    我們使用與各種應用程式(如GitHub、Slack、Jira、Google Calendar、Google Sheets 等)的集成,在AutoKitteh 上部署的Python 中構建了相對簡單但有用的自動化。例如: 使用 ChatGPT 對 Gmail 收件匣中的新電子郵件進行分類,並將通知傳送...
    程式設計 發佈於2024-11-08
  • 如何使用 Kubernetes go-client 檢索詳細的 pod 信息,類似於“kubectl get pods”命令?
    如何使用 Kubernetes go-client 檢索詳細的 pod 信息,類似於“kubectl get pods”命令?
    Kubernetes go-client:檢索Pod 詳細資訊像kubectl get pods使用client-go 庫獲取Kubernetes 叢集中的pod 詳細資訊,類似於kubectl get pods -n 命令,按照以下步驟操作:建立Kubernetes 用戶端:取得Kubernet...
    程式設計 發佈於2024-11-08
  • 使用 nodeJS 從頭開始建立 ReAct Agent(維基百科搜尋)
    使用 nodeJS 從頭開始建立 ReAct Agent(維基百科搜尋)
    Introduction We'll create an AI agent capable of searching Wikipedia and answering questions based on the information it finds. This ReAct (R...
    程式設計 發佈於2024-11-08
  • 為什麼 Streams API 改變了 Web 開發者的遊戲規則
    為什麼 Streams API 改變了 Web 開發者的遊戲規則
    我们首先解释一下数据是如何通过网络发送的。它不是作为单个连续流发送的;相反,它被分成更小的块。在接收端,消费者或应用程序负责在收到所有数据后以正确的顺序和格式重新组装这些块。对于图像、视频和其他相对较大的数据类型,此过程会自动发生。 因此 Streams API 提供的是一种无需等待完整数据可用的方...
    程式設計 發佈於2024-11-08
  • 如何在處理 UTF-8 編碼的同時在 JavaScript 中解碼 Base64 字串?
    如何在處理 UTF-8 編碼的同時在 JavaScript 中解碼 Base64 字串?
    使用 JavaScript atob 解碼 Base64 函數:處理 UTF-8JavaScript 的 atob() 函數旨在解碼 Base64 編碼的字串。使用者在解碼 UTF-8 編碼字串時可能會遇到問題,導致產生 ASCII 編碼字元而不是正確的 UTF-8 表示形式。 挑戰:理解 Unic...
    程式設計 發佈於2024-11-08
  • ES6 模板文字真的可以重複使用嗎?
    ES6 模板文字真的可以重複使用嗎?
    ES6 模板文字中的可重用性難題ES6 模板文字中的可重用性難題本次討論中提出的主要問題圍繞著ES6 模板文字中假定缺乏可重用性的問題。傳統的演示強調聲明時的替換,不允許運行時修改。 解決方案:利用函數建構子const templateString = `Hello ${this.name}!`; ...
    程式設計 發佈於2024-11-08
  • 單元測試框架-Python 中的單元測試
    單元測試框架-Python 中的單元測試
    在Python中,最常用的單元測試框架之一是unittest,它包含在標準庫中。它提供了一套豐富的工具來創建和運行測試以及報告結果。 單元測試架構的主要特點 測試案例:測試案例是透過子類化unittest.TestCase來創建的。類別中以 test_ 開頭的每個方法都被視為一個測試。 Asse...
    程式設計 發佈於2024-11-08
  • 使用 React 建立 Sunnyside Agency 網站
    使用 React 建立 Sunnyside Agency 網站
    Introduction Welcome to the detailed breakdown of the Sunnyside Agency website, a modern and stylish site built using React. This project sho...
    程式設計 發佈於2024-11-08
  • 在 Next.js 專案中透過裁剪和壓縮優化圖像上傳
    在 Next.js 專案中透過裁剪和壓縮優化圖像上傳
    作為前端開發人員,您很有可能曾經或正在從事涉及發布和顯示圖像的專案。如果你還沒有,那你很快就會的。因此,最近,在我們完成專案後,我們發現在顯示用戶提供的圖像時遇到了麻煩。 這一切是如何解開的 最大的問題是如何處理尺寸,尤其是影像的高度與寬度。將圖像設為 object-fit: cover 似乎是填...
    程式設計 發佈於2024-11-08
  • 為什麼 JavaScript 中的「this」運算子不一致以及如何解決?
    為什麼 JavaScript 中的「this」運算子不一致以及如何解決?
    在 Javascript 中,為什麼「this」運算子不一致? 在 JavaScript 中,「this」運算子表現出不同的行為,取決於呼叫上下文。這可能會導致混亂和意外結果,特別是在使用回調和物件時。 呼叫模式與「this」綁定「this」運算子綁定到函數呼叫期間的物件或類別,此綁定由呼叫模式決定...
    程式設計 發佈於2024-11-08
  • 如何產生等概率地求和到預定義值的隨機數?
    如何產生等概率地求和到預定義值的隨機數?
    產生隨機數求和到預定義值在這種情況下,我們的目標是產生一個偽隨機數列表,這些偽隨機數共同添加直至特定的預定值。一種方法是隨機產生指定範圍內的數字,將其從總數中減去,然後重複此過程,直到總和等於所需值。然而,這種方法在對總和的貢獻方面有利於第一個產生的數字。 為了確保一致性,開發了更複雜的解決方案:i...
    程式設計 發佈於2024-11-08
  • 如何在 Matplotlib 中正確對齊旋轉的 XTickLabels?
    如何在 Matplotlib 中正確對齊旋轉的 XTickLabels?
    對齊旋轉的XTickLabels 以實現精確對齊在給定的圖中,旋轉的x 軸刻度標籤看起來向右移動而不是對齊與他們各自的刻度線。出現這種不對齊的原因是預設圍繞文字標籤中間的旋轉居中。 要解決此問題,您可以使用 ha 參數指定刻度標籤的水平對齊方式。此參數定義旋轉標籤周圍的假想矩形框的哪一側應與刻度點對...
    程式設計 發佈於2024-11-08
  • Java 記憶體模型:深入理解並發性
    Java 記憶體模型:深入理解並發性
    介紹 Java 記憶體模型 (JMM) 是 Java 並發程式設計的一個基本但經常被誤解的面向。 JMM 是隨 Java 5 引入的,它定義了執行緒如何與記憶體交互,確保多執行緒程式的一致性和可預測性。在本文中,我們將深入探討 JMM,探討其關鍵概念,並研究它如何影響並發 Java...
    程式設計 發佈於2024-11-08
  • 如何在 JavaScript 中存取 iFrame 元素並與之互動?
    如何在 JavaScript 中存取 iFrame 元素並與之互動?
    在 JavaScript 中存取 iFrame 元素瀏覽錯綜複雜的 JavaScript 通常會帶來挑戰,尤其是在處理 iFrame 時。當嘗試從 iFrame 的子頁面擷取駐留在 iFrame 中的文字區域的值時,會出現常見的困境。傳統方法在這方面有不足之處。 要深入研究解決方案,承認瀏覽器施加的...
    程式設計 發佈於2024-11-08
  • 如何透過修改 PYTHONPATH 或 ~/.pylintrc 解決 PyLint 中的「無法匯入」錯誤?
    如何透過修改 PYTHONPATH 或 ~/.pylintrc 解決 PyLint 中的「無法匯入」錯誤?
    如何透過設定PYTHONPATH 解決PyLint 中的「無法匯入」錯誤使用時遇到「無法匯入X」錯誤時PyLint,特別是對於從子目錄匯入的模組,根本原因可能在於Python路徑中解決方案1:修改PYTHONPATH環境變數一個有效的解決方案是調整PYTHONPATH環境變數以合併包含導入的目錄,確...
    程式設計 發佈於2024-11-08

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

Copyright© 2022 湘ICP备2022001581号-3