首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在grpc-web中使用grpc流?

在gRPC-Web中使用gRPC流需要一些特定的配置和代码实现。以下是一个基本的指南,展示如何在gRPC-Web中使用服务器流(Server Streaming)和客户端流(Client Streaming)。

1. 定义gRPC服务和消息

首先,你需要定义你的gRPC服务和消息。假设你有一个简单的服务,支持服务器流和客户端流。

代码语言:javascript
复制
syntax = "proto3";

package stream;

service StreamService {
  rpc ServerStreaming (ServerStreamingRequest) returns (stream ServerStreamingResponse);
  rpc ClientStreaming (stream ClientStreamingRequest) returns (ClientStreamingResponse);
}

message ServerStreamingRequest {
  string message = 1;
}

message ServerStreamingResponse {
  string response = 1;
}

message ClientStreamingRequest {
  string message = 1;
}

message ClientStreamingResponse {
  string response = 1;
}

2. 生成gRPC-Web客户端代码

使用protocprotoc-gen-grpc-web插件生成gRPC-Web客户端代码。

代码语言:javascript
复制
protoc -I=. --grpc-web_out=import_style=commonjs:./src stream.proto

3. 配置gRPC-Web代理

由于浏览器的安全限制,gRPC-Web不能直接与gRPC服务器通信。你需要一个代理服务器来转发请求。常用的代理服务器有Envoy和grpcwebproxy。

使用Envoy代理

  1. 安装Envoy并配置它作为gRPC-Web代理。
代码语言:javascript
复制
static_resources:
  listeners:
  - name: listener_0
    address:
      socket_address: { address: 0.0.0.0, port_value: 8080 }
    filter_chains:
    - filters:
      - name: envoy.filters.network.http_connection_manager
        typed_config:
          "@type": type.googleapis.com/envoy.extensions.filters.network.http_connection_manager.v3.HttpConnectionManager
          codec_type: AUTO
          stat_prefix: ingress_http
          route_config:
            name: local_route
            virtual_hosts:
            - name: local_service
              domains: ["*"]
              routes:
              - match: { prefix: "/" }
                route:
                  cluster: grpc_service
          http_filters:
          - name: envoy.filters.http.grpc_web
          - name: envoy.filters.http.router
  clusters:
  - name: grpc_service
    connect_timeout: 0.25s
    type: LOGICAL_DNS
    lb_policy: ROUND_ROBIN
    load_assignment:
      cluster_name: grpc_service
      endpoints:
      - lb_endpoints:
        - endpoint:
            address:
              socket_address: { address: your-grpc-server, port_value: 50051 }
  1. 启动Envoy代理。
代码语言:javascript
复制
envoy -c envoy.yaml

4. 在客户端代码中使用gRPC流

服务器流示例

代码语言:javascript
复制
import { StreamServiceClient } from './stream_grpc_web_pb';
import { ServerStreamingRequest } from './stream_pb';

const client = new StreamServiceClient('http://localhost:8080');

const request = new ServerStreamingRequest();
request.setMessage('Hello');

const call = client.serverStreaming(request, {}, (err, response) => {
  if (err) {
    console.error(err);
  }
});

call.on('data', (response) => {
  console.log(response.getResponse());
});

call.on('end', () => {
  console.log('Server streaming ended');
});

客户端流示例

代码语言:javascript
复制
import { StreamServiceClient } from './stream_grp_web_pb';
import { ClientStreamingRequest, ClientStreamingResponse } from './stream_pb';

const client = new StreamServiceClient('http://localhost:8080');

const call = client.clientStreaming({}, (err, response) => {
  if (err) {
    console.error(err);
  } else {
    console.log(response.getResponse());
  }
});

call.on('end', () => {
  console.log('Client streaming ended');
});

// 发送多个请求
for (let i = 0; i < 5; i++) {
  const request = new ClientStreamingRequest();
  request.setMessage(`Message ${i}`);
  call.write(request);
}

call.end();
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

浏览器引入gRPC的现况

然而,随着gRPC-Web的发布,gRPC有望成为前端开发者工具箱的有价值补充。 在这篇文章,我将描述gRPC在浏览器的一些历史,探索当前的状态,并分享对未来的一些看法。...例如:没有办法强制使用HTTP/2,即使有,也无法在浏览器访问原始HTTP/2帧。gRPC-Web规范从HTTP/2规范的角度出发,然后定义差异。...在请求/响应主体的最末端发送gRPC跟踪程序,gRPC消息头(4)的新位所示。 用于在gRPC-Web请求和gRPC HTTP/2响应之间进行转换的强制代理。...但是,gRPC-Web规范并未强制要求任何客户端或双向支持,只是在浏览器实现WHATWG Streams(18)后才会实现。...Envoy将适合某些场景,而进程的Go代理有其自身的优势。 如果你今天开始使用gRPC-Web,请先试用Google客户端。

2.1K60
  • 一个新实验:使用gRPC-Web从浏览器调用.NET gRPC服务

    .NET的gRPC-Web承诺将gRPC的许多出色功能引入浏览器应用程序: 强类型代码生成的客户端 紧凑的Protobuf消息 服务 什么是gRPC-Web 无法在浏览器实现gRPC HTTP /...请注意,gRPC-Web的性能成本较低,并且不再支持两个gRPC功能:客户端和双向。(仍然支持服务端!)...服务端gRPC-Web说明 如果您是.NETgRPC的新手,那么这里有一个简单的入门指南。 gRPC-Web不需要对服务进行任何更改,唯一的修改是启动配置。...要在ASP.NET Core gRPC服务启用gRPC-Web,请添加对Grpc.AspNetCore.Web包的引用。...通过在启动文件添加AddGrpcWeb(...)和UseGrpcWeb(),将应用程序配置为使用gRPC-Web : Startup.cs public void ConfigureServices(

    1.5K30

    【译】gRPC vs HTTP APIs

    ASP.NET Core 3.0集成了gRPC,因此您可以结合使用现有的ASP.NET Core日志系统,配置系统,身份验证模式来构建新的gRPC服务。 ?   ...无需编写客户端,可在拥有许多服务的应用程序为开发者节省大量开发时间。 2、高性能   gRPC消息使用Protobuf(一种有效的二进制消息格式)进行序列化。...gRPC服务支持所有组合: 一元(无串流) 服务器到客户端 客户端到服务器 双向   请注意,将消息广播到多个连接的概念本身并不天然存在于gRPC。...gRPC-Web由两部分组成:一个支持所有现代浏览器的JavaScript客户端,以及服务器上的一个gRPC-Web代理。gRPC-Web客户端调用代理,代理将gRPC请求转发到gRPC服务器。   ...gRPC-Web并非支持所有gRPC的功能。例如,它不支持客户端和双向,并且对服务器的支持也很有限。 不可读   使用JSON的HTTP API请求以文本形式发送,并且适合利于阅读和创建。

    2K20

    gRPC-Web迈向GA

    在左侧的gRPC-Web世界,客户端应用程序发送Protocol Buffers到gRPC后端服务器,该服务器发送Protocol Buffers到其他gRPC后端服务。...使用gRPC-Web的优点 随着时间的推移,gRPC-Web将提供更广泛的功能集。...但我可以看到它从一开始就提供了一些巨大的便利: 端到端gRPC - 如上所述,使用gRPC-Web,您可以正式从堆栈删除REST组件并将其替换为纯gRPC,从而使您能够使用Protocol Buffers...一个gRPC-Web示例 上一节介绍了gRPC-Web在大规模应用的一些高级优势。 现在让我们通过一个例子来展示:一个简单的TODO应用程序。...如果您有兴趣为gRPC-Web做出贡献,那么核心团队会喜欢社区帮助的一些事项: 前端框架集成 - 常用的前端框架( React,Angular 和 Vue)尚未提供对gRPC-Web的官方支持。

    1K30

    Envoy和gRPC-Web:REST的鲜新替代方案

    gRPC-Web是一个JavaScript客户机库,它允许web应用程序使用Envoy来与后端gRPC服务交互,而不是使用自定义HTTP服务器作为中介。...REST的方式 下图展示了两种构建基于gRPC的服务体系结构的web应用程序的方法。在左侧面板,你将看到基于REST的“传统”方式,而在右侧面板,你将看到gRPC-Web方式。 ?...REST API与gRPC-Web的客户机-后端交互 在左侧面板,你将注意到REST API服务器充当web应用程序和后端之间的联系人。...在右边的面板,你可以看到新的gRPC-Web替代方案。你将注意到:拼图的碎片更少了,一个协议(绿色的行!),没有HTTP逻辑,所有数据接口都使用.proto文件定义。...Envoy在gRPC-Web应用程序的角色 gRPC-Web是一个巨大的胜利,因为你不需要创建那个翻译层——你只需要为Envoy提供一些基本的配置。

    2.7K20

    使用gRPC基于Protobuf传输大文件或数据

    使用gRPC基于Protobuf传输大文件或数据 在现代软件开发,性能通常是关键的考虑因素之一,尤其是在进行大文件传输时。高效的协议和工具可以显著提升传输速度和可靠性。...gRPC是一个高性能的远程过程调用(RPC)框架,由Google主导开发,使用HTTP/2作为传输层协议,支持多种开发语言,C++, Java, Python和Go等。...简洁: 简化了复杂数据结构的处理,易于开发者使用。 2. 项目配置与环境搭建 为了使用gRPC进行项目开发,首先需要在开发环境安装gRPC及其依赖的库。...库查找:使用 find_package() 或 find_library() 命令来查找和配置项目所需的依赖库, gRPC、protobuf、SSL 等。...4.2.3 传输时间和速率 gRPC在传输速度上极大超过了TCP socket。这种巨大的差异主要来自于gRPC使用HTTP/2的优势,头部压缩、二进制帧传输和连接复用。

    1.4K00

    Envoy架构概览(2):HTTP过滤器,HTTP路由,gRPC,WebSocket支持,集群管理器

    重试语义 Envoy允许在路由配置以及通过请求头对特定请求配置重试。以下配置是可能的: 最大重试次数:Envoy将继续重试任意次数。在每次重试之间使用指数退避算法。...gRPC gRPC是来自Google的RPC框架。它使用协议缓冲区作为基础的序列化/ IDL格式。在传输层,它使用HTTP / 2进行请求/响应复用。...Envoy在传输层和应用层都有一gRPC支持: gRPC使用HTTP / 2预告片来传送请求状态。...gRPC-Web由过滤器支持,它允许gRPC-Web客户端通过HTTP / 1.1向Envoy发送请求并代理到gRPC服务器。目前正处于积极的发展阶段,预计将成为gRPC桥式滤波器的后续产品。...WebSocket路由不支持某些HTTP请求级别的功能,重定向,超时,重试,速率限制和阴影。然而,支持前缀重写,显式和自动主机重写,流量转移和分离。

    2.2K60

    Linux|如何在 awk 中使用控制语句

    引言 当您从 Awk 系列一开始回顾我们迄今为止介绍的所有 Awk 示例时,您会注意到各个示例的所有命令都是按顺序执行的,即一个接一个。...if-else 语句 if 语句的预期语法与 shell if 语句的语法类似: if (condition1) { actions1 } else { actions2 } 在上述语法,...这是使用 if 语句的一个例子,我们有一个用户列表及其年龄存储在文件 users.txt 。 我们想要打印一条声明,指明用户的姓名以及用户的年龄是小于还是大于 25 岁。...下面是一个脚本来说明如何使用 while 语句来打印数字 0-10: #!...使用上面 while 语句下的示例,我们可以通过更改 test.sh 脚本的 Awk 命令来说明 do while 的用法,如下所示: #!

    8300

    进行API开发选gRPC还是HTTP APIs?

    gRPC消除了争论并节省了开发人员的时间,因为gPRC在各个平台和实现之间是一致的。 HTTP/2为长期的实时通信提供了基础。gRPC通过HTTP/2为流媒体提供一的支持。...gRPC服务支持所有组合: 一元(没有流媒体) 服务器到客户端 客户端到服务器 双向流媒体 截至时间/超时和取消 gRPC允许客户端指定他们愿意等待RPC完成的时间。...gRPC Web客户端调用代理,代理将在gRPC请求上转发到gRPC服务器。 gRPC Web并非支持所有gRPC功能。不支持客户端和双向,并且对服务器的支持有限。...不建议使用gRPC的场景 在以下场景,建议使用其他框架而不是gRPC: 浏览器可访问的API - 浏览器不完全支持gRPCgRPC-Web可以提供浏览器支持,但它有局限性并引入了服务器代理。...例如,在应该将新聊天消息发送到聊天室的所有客户端的聊天室场景,需要每个gRPC呼叫以单独地将新的聊天消息流传输到客户端。对于这种场景,SignalR是这种情况的有用框架。

    4K00

    看完这几道 JavaScript 面试题,让你与考官对答

    由于篇幅过长,我将此系列分成上中下三篇,上篇: 看完这几道 JavaScript 面试题,让你与考官对答(上) 26. 什么是IIFE,它的用途是什么? 27....它是一个类似数组的对象,因为它有一个length属性,我们可以使用数组索引表示法arguments[1]来访问单个值,但它没有数组的内置方法,:forEach、reduce、filter和map。...`; } 在 ES5 版本,如果需要在字符串添加表达式或值,则需要使用+运算符。 在模板字符串s,我们可以使用${expr}嵌入一个表达式,这使其比 ES5 版本更整洁。 46....我们可以使用has方法检查Set实例是否存在特定的值。...set2.size // returns 10 可以使用clear方法删除 Set 的数据。 set2.clear(); 我们可以使用Set对象来删除数组重复的元素。

    2K10
    领券