GRPC在网页前端的使用

一直以来都是一个桌面端程序狗,某天突发奇想,想用网页实现一个客户端,于是开始了electron+vue+asp.netcore的探寻之路,这条道路很坎坷主要是css让我头疼不已(当然我们并没有放弃使用wpf,我是一个wpf老手,最近项目使用到GRPC特此分享一下入坑经验)。

      我们总是依赖于使用Axios来进行远程数据传递,Axios是以json明文方式传递数据,这个方式对于调试非常友好,但是却没法节省网络带宽,而且我个人是比较热衷于更前沿的技术,所以我选择使用grpc(对了忘了说一句,如果你是用的nodejs那么恭喜你你没有这么多坑爹问题,因为nodejs使用的是完整版的grpc,而JavaScript使用的是grpc-web,)废话不多说,说干就干。

       首先需要准备一个可靠的后台程序,因为我实在是太喜欢C#了,所以我选择使用Asp.net.core(其实主要原因是Asp.net.core官方对grpc-web支持最好,这里不得不说一句微软牛B,其他的后台我只能呵呵,因为都需要使用代理服务器,如果有不需要的欢迎打脸, 当然反向代理那也是代理),使用Asp.Net.Core创建一个Grpc服务器也很简单,只需要在创建grpc工程时选择gRPC即可。

Ø 这是一个Grpc服务器的创建过程:

6de827a8769dcf5880692c937ff135c2.png

Ø 这是我的pb文件(是由vs默认生成):

5427079bb318ccb2911c133b1df21a08.png

  • 这是Grpc的一个服务(是由vs默认生成)

9a36c283f72e81d583b5dd5e45a8bddc.png

Ø 启动Grpc服务

57316aa938cd5919295c1c2dcebec11c.png

    接着使用npm安装grpc-web +gooble-protobuf (因为本人使用的是typescript所以我还安装了@improbable-eng/grpc-web + @types/google-protobuf)(另外如果你希望在执行自动编译protobuffer文件编译的话还建议安装grpc-tools ,如果你需要这样的功能那么可以跟我深入探讨一下,这里需要自己做一个编译脚本)。

       完成了上面的准备工作,那么恭喜你,你已经完成了80%的工作了,你可以开始在前台使用grpc服务了,经过一通折腾(包括拷贝protobuffer文件,将protobuffer文件编译成对应的js文件)(对了在vue中如果想要做一个plugins那么请查阅vue的官方描述文档,这个文档说了跟没说差别不大,说得太简单了 -- 为什么要这么做,当然就是可以实现一个单例啊)。

Ø 这是我的typescript调用方式:

b31dac2a7f3e533d1242592b3e413822.png

Ø 编译工程运行前台网页程序:

da482b360fde895896958389e874976c.png

       没错结果就是这样,我在前面说了javascript只支持grpc-web,而我们却把grpc-web当成grpc在使用,为了解决这个问题,我经过多方查证(grpc-web官网以及微软Asp.net.core的官网),找到了两个解决方案

方案1:使用官方推荐的代理,进行转发(grpcwebproxy 这是官方提供的代理服务,下载地址Releases · improbable-eng/grpc-web(github.com)

Ø 下载完成启动代理,以下是代理启动命令以及各参数的意义:

a1321614bcfbbda70ffa022ef980625b.png

e2d2d4d50974b23602a146338107228a.png

Ø  修改前台调用代码的端口定向到代理服务器(代理端口是5005)

e8820ee633066d933dde59c00794b11c.png

Ø  运行网页查看通讯:

354f94abe2a9205b6e06ed043ca32e9f.png

Good这是一个看似完美的解决方案,但是对于一个客户端来说你需要在一台机器上开两个后台,这个设定看上去很2。

方案2:使用Asp.Net.Core官网做法(在浏览器应用中使用 gRPC | Microsoft Docs),微软牛B

Ø在Asp.Net.Core的grpc工程中添加 Grpc.AspNetCore.Web支持库(nuget搜索添加即可)

Ø修改Startup配置

3475493d77046361499f306f592f31d1.png

Ø启动Grpc服务器

447f4073d29d6be012d0a605b0e69c83.png

Ø 修改javascript调用host(注意目前我只找到https的协议方式http仍然不能使用,我还不知道用什么办法解决)

eb01c401889b6dba939531f0aca356bb.png

Ø 编译运行网页客户端

ae91018430270b1e12be46073ab9aa9d.png

Good这是一个近乎完美的方案,这个方案简直是最佳方案,虽然我还没有找到怎么使用http而不使用https.

至此,终于可以安心的用网页写客户端了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/297542.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【转帖】配置管理计划(CM Plan)

作者:scmroad出自:配置管理之路 http://bbs.scmroad.com/ 版权所有,转载请注明原作者和出处,谢谢合作。目的:这篇文章主要想和大家交流下,我们在写配置管理计划的时候都应该写些什么。写配置管理计划对于一个CM来说是一…

vue 带全选和多选的表格怎么写_EXCEL五分钟,批量制作带照片的工地出入证

作者:祝洪忠 转自:Excel之家ExcelHome小伙伴们好啊,今天和大家分享一个邮件合并的技巧——批量制作带照片的工地出入证。先看效果图:要准备的材料包括:一、Excel资料表资料表中包括姓名、工号和用姓名命名的带格式后缀…

计算机统计字符数,怎么看word版本-Word文档中的字数和字符数是怎样统计的?

简介:大家知道,Word中具有字数、字符数自动统计功能,那Word文档中的字数和字符数是怎样统计的?下面给大家简单的介绍一下工具:Word2013方法一、1.点击【审阅】选项卡2.点击【字数统计】图1统计结果如图所示&#xff1a…

从小一看到数字,脑子里就开始搞颜色......

1 脑子里的数字有颜色估计都是它的锅▼2 不愧是你▼3 文科生考场惯用伎俩填满了就是胜利▼4 每年向社会输送大量精英人才▼5 ???▼6 高考最后一晚逆袭的答案在一本叫《刑法》的书里▼7 中国外卖VS俄罗斯外卖毛子送外卖坐公交你敢信&am…

android键盘弹出,聊天背景不变形

2019独角兽企业重金招聘Python工程师标准>>> android:transcriptMode"normal",如果软键盘弹出时候,设置该属性listview会自动调整到最后,这样弹出的软键盘就不会遮盖到listview了 背景图尽量用 getWindow().setBackgrou…

bpmn文件的标签为何都以bpmn2开头_C语言之两种作用域:函数的作用域与文件作用域...

作用域描述程序中可访问标识符的区域。一个C变量的作用域可以是块作用域、函数作用域、函数原型作用域或文件作用域。其中,块是用一对花括号括起来的代码区域。例如,整个函数体是一个块,函数中的任意复合语句也是一个块。定义在块中的变量具有…

集成开放平台标准化连接器之基于OAS3.0的API管理能力

源宝导读:随着企业信息化进程的逐步深入,互联网技术的发展和分布式系统应用的日益广泛,直接导致大量异构系统的存在,这些系统往往各自独立、封闭运行,相互之间不存在或很少存在数据的交互,由于这种应用分割…

数据库设计范式

数据库设计范式 范式的概念和理论是美国著名科学哲学家托马斯库恩(Thomas,Kunn) 提出并在《科学革命的结构》(The Structure of Scientific Revolutions)(1962)中系统阐述的,指常规科学所赖以运…

POJ 2533 Longest Ordered Subsequence

解题思路:最长递增子序列 #include <iostream>usingnamespacestd;intmain(){inti,j,k,n,p,q,m,len,num[1000],B[1001]; scanf("%d", &n);for(i0;i<n;i)scanf("%d", &num[i]);for(B[0]-1,B[1]num[0],len1,i1;i<n;i) {for(p0,qlen,m(pq)…

axure 组件_技巧分享 | Axure后台组件制作的全过程

点击上方蓝字&#xff0c;关注行设视觉黑马家族成员原创发布于行设视觉&#xff0c;转载请注明出处。作者 | 时光若刻http://www.woshipm.com/rp/2527010.html大家好&#xff0c;前一段时间我刚刚分享了一篇《打造高品质Axure组件库就是这么简单》&#xff0c;意在分享给大家一…

有没有测试人心里的软件,心理测评,认识自己的有效工具:(二)你做的可能是假的心理测试...

上一篇文章主要介绍了心理测评的基础知识&#xff0c;今天在上一篇的基础上&#xff0c;介绍下网上一些随处可见的心理测评&#xff0c;是如何的错误&#xff0c;以及怎么“迷惑”大家的&#xff1f;网上随便搜的一个阅读量超过10w的"心理"测试&#xff1a;测试他人会…

这相册一出手,哪个长辈搞不定?

1 这相册看着多喜庆看这花多美▼2 不会只有我一个人连最普通的都叠不好吧&#xff1f;▼3 真就史上最惨毕业生连毕业照都不配拥有吗&#xff1f;▼4 看起来经历了很严格的军训▼5 我闺蜜【偷】男票的钱给我买MAC air▼6 在台湾爸比和东北妈妈中间无缝切换▼7 先漱口、后…

医疗大数据:商业保险、移动医疗的崛起,正在形成闭环(二)

以下内容摘自华创证券分析师 吴晓雯、张伟光的《挖掘医疗大数据中的金矿》报告。 接上篇&#xff1a;医疗大数据&#xff1a;商业保险、移动医疗的崛起&#xff0c;正在形成闭环&#xff08;一&#xff09; 三、 商业保险、移动医疗等商业力量的崛起&#xff0c;加速医疗大数据…

WriteComponent,ReadComponent

WriteComponent,ReadComponent 代码 varForm1: TForm1; ms: TMemoryStream;implementation{$R *.dfm}procedureTForm1.Button1Click(Sender: TObject);varaBtn: TButton;beginaBtn :TButton.Create(Self); aBtn.Parent :Self; aBtn.Caption :Test; aBtn.Left :10; ms.WriteComp…

jquery 使用方法

jQuery是目前使用最广泛的javascript函数库。据统计&#xff0c;全世界排名前100万的网站&#xff0c;有46%使用jQuery&#xff0c;远远超过其他库。微软公司甚至把jQuery作为他们的官方库。对于网页开发者来说&#xff0c;学会jQuery是必要的。因为它让你了解业界最通用的技术…

bread是可数还是不可数_雅思官方语法教程之——这个名词到底可不可数?

名词是否可数&#xff0c;是非常隐形的扣分点。考生很可能意识不到自己犯错了&#xff0c;毕竟这是中文里不存在的语法点。这类语法点更应该重点备考。越练习&#xff0c;越熟悉&#xff0c;犯错扣分的几率也就越低。OK进入主题↓语法解释官方对可数和不可数名词的解释如下&…

PostgreSQL 统计所有数据表各自的总行数

一般来说&#xff0c;可以使用 count(*) 来获取具体某张表的总行数&#xff1a;SELECT count(0) FROM t_user;如果想获得所有表的行数信息&#xff0c;可以使用以下 SQL 语句&#xff1a;SELECTrelname,reltuples FROMpg_classCLS LEFT JOIN pg_namespace N ON ( N.oid CLS.re…

google的api key调用次数是多少_Sprint Boot如何基于Redis发布订阅实现异步消息系统的同步调用?...

前言在很多互联网应用系统中&#xff0c;请求处理异步化是提升系统性能一种常用的手段&#xff0c;而基于消息系统的异步处理由于具备高可靠性、高吞吐量的特点&#xff0c;因而在并发请求量比较高的互联网系统中被广泛应用。与此同时&#xff0c;这种方案也带来了调用链路处理…

加密、解密以及Openssl建立私有CA

一、openssl简介 OpenSSL 是一个强大的安全套接字层密码库&#xff0c;囊括主要的密码算法、常用的密钥和证书封装管理功能及SSL协议&#xff0c;并提供丰富的应用程序供测试或其它目的使用。 SSL:secure socket layer 安全套接层协议 可以在internet提供秘密性的传输。…

密西根州立大学计算机qs分数,2020年QS世界大学排名密歇根州立大学排名第144

2020年QS世界大学排名指标1.Academic Reputation 学术声誉(所占比重为40%)这项指标数据来源于QS学术调查。搜集了80,000多位高校领域大牛对教学和科研方面的意见。这也是世界上类似调查中规模最大&#xff0c;覆盖面最广的。2.Employer Reputation 雇主声誉(所占比重为10%)考察…