×

gRPC-Web访问gRPC服务的Web客户端

消耗积分:0 | 格式:zip | 大小:0.24 MB | 2022-06-22

分享资料个

授权协议 Apache-2.0
开发语言 Java C/C++ JavaScript
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发、 RPC/XMLRPC项目

软件简介

gRPC-Web 即 gRPC for Web Clients。顾名思义，gRPC-Web 是一个 JavaScript 库，使 Web 应用程序能够直接与后端 gRPC 服务通信，不需要 HTTP 服务器充当中介。

gRPC-Web GA 正式版已发布，稳定性也已足够，并可在生产环境中使用。

目前 gRPC-Web 通过特殊网关代理连接到 gRPC 服务：默认情况下，当前版本的库使用了 Envoy 代理，它内置了对 gRPC-Web 的支持。

开发团队表示，希望将来 gRPC-Web 在特定于某一语言的 Web 框架中得到支持，例如 Python，Java 和 Node。可查看官方的开发路线图了解更多。

gRPC-Web 简介

gRPC-Web 让你能够使用.proto 来定义客户端 Web 应用程序和后端 gRPC 服务器之间的服务“契约”，并自动生成客户端 JavaScript（你可以选择 Closure 编译器或使用更为广泛的 CommonJS）。你可以不用再为这些事情操心：创建自定义 JSON 序列化和反序列化逻辑、处理 HTTP 状态代码（可能因REST API 而异）、Content-Type 协商等。

从更广泛的架构角度来看，gRPC-Web 让端到端的 gRPC 成为可能。如下图所示：

poYBAGKn5weAPInoAAApeYtzFbI486.png

在左侧，一个客户端应用程序通过 Protocol Buffers 与一个 gRPC 后端服务器通信，然后这个服务器也通过 Protocol Buffers 与其他的 gRPC 后端服务器通信。在右侧，Web 应用程序通过 HTTP 与后端 REST API 服务器通信，然后这个服务器又通过 Protocol Buffers 与其他后端服务通信。

需要明确指出的是，右侧的 REST 应用程序本身没有任何问题。已经有大量非常成功的应用程序是基于 REST API 服务器而构建的，这些服务器使用非 HTTP 协议与后端服务进行通信。但如果这些应用程序的开发过程只围绕一个协议和一组.proto 接口（以及一组服务契约）进行，那么就可以节省无数个小时的时间以及避免那些令人头疼的问题。

gRPC-Web 的好处不仅仅体现在“技术”方面，还体现在对组织的影响上。图中的亮橙色线不仅仅是一个协议——它代表的是独立的工作和认知负荷来源，而现在，你完全可以把它变成亮绿色。

部分内容来自 前端之巅

 

下载并关注上传者 低至0.43元/天 开通VIP 免费下载

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容侵权或者其他违规问题，请联系本站处理。 举报投诉

评论(0)
发评论

下载排行榜

全部0条评论

快来发表一下你的评论吧 !

'+ '

'+ '

'+ ''+ '
'+ ''+ ''+ '
'+ ''+ '' ); $.get('/article/vipdownload/aid/'+webid,function(data){ if(data.code ==5){ $(pop_this).attr('href',"/login/index.html"); return false } if(data.code == 2){ //跳转到VIP升级页面 window.location.href="//m.obk20.com/vip/index?aid=" + webid return false } //是会员 if (data.code > 0) { $('body').append(htmlSetNormalDownload); var getWidth=$("#poplayer").width(); $("#poplayer").css("margin-left","-"+getWidth/2+"px"); $('#tips').html(data.msg) $('.download_confirm').click(function(){ $('#dialog').remove(); }) } else { var down_url = $('#vipdownload').attr('data-url'); isBindAnalysisForm(pop_this, down_url, 1) } }); }); //是否开通VIP $.get('/article/vipdownload/aid/'+webid,function(data){ if(data.code == 2 || data.code ==5){ //跳转到VIP升级页面 $('#vipdownload>span').text("开通VIP 免费下载") return false }else{ // 待续费 if(data.code == 3) { vipExpiredInfo.ifVipExpired = true vipExpiredInfo.vipExpiredDate = data.data.endoftime } $('#vipdownload .icon-vip-tips').remove() $('#vipdownload>span').text("VIP免积分下载") } }); }).on("click",".download_cancel",function(){ $('#dialog').remove(); }) var setWeixinShare={};//定义默认的微信分享信息，页面如果要自定义分享，直接更改此变量即可 if(window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger'){ var d={ title:'gRPC-Web访问gRPC服务的Web客户端',//标题 desc:$('[name=description]').attr("content"), //描述 imgUrl:'https://'+location.host+'/static/images/ele-logo.png',// 分享图标,默认是logo link:'',//链接 type:'',// 分享类型,music、video或link，不填默认为link dataUrl:'',//如果type是music或video，则要提供数据链接，默认为空 success:'', // 用户确认分享后执行的回调函数 cancel:''// 用户取消分享后执行的回调函数 } setWeixinShare=$.extend(d,setWeixinShare); $.ajax({ url:"//www.obk20.com/app/wechat/index.php?s=Home/ShareConfig/index", data:"share_url="+encodeURIComponent(location.href)+"&format=jsonp&domain=m", type:'get', dataType:'jsonp', success:function(res){ if(res.status!="successed"){ return false; } $.getScript('https://res.wx.qq.com/open/js/jweixin-1.0.0.js',function(result,status){ if(status!="success"){ return false; } var getWxCfg=res.data; wx.config({ //debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId:getWxCfg.appId, // 必填，公众号的唯一标识 timestamp:getWxCfg.timestamp, // 必填，生成签名的时间戳 nonceStr:getWxCfg.nonceStr, // 必填，生成签名的随机串 signature:getWxCfg.signature,// 必填，签名，见附录1 jsApiList:['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 }); wx.ready(function(){ //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口 wx.onMenuShareTimeline({ title: setWeixinShare.title, // 分享标题 link: setWeixinShare.link, // 分享链接 imgUrl: setWeixinShare.imgUrl, // 分享图标 success: function () { setWeixinShare.success; // 用户确认分享后执行的回调函数 }, cancel: function () { setWeixinShare.cancel; // 用户取消分享后执行的回调函数 } }); //获取“分享给朋友”按钮点击状态及自定义分享内容接口 wx.onMenuShareAppMessage({ title: setWeixinShare.title, // 分享标题 desc: setWeixinShare.desc, // 分享描述 link: setWeixinShare.link, // 分享链接 imgUrl: setWeixinShare.imgUrl, // 分享图标 type: setWeixinShare.type, // 分享类型,music、video或link，不填默认为link dataUrl: setWeixinShare.dataUrl, // 如果type是music或video，则要提供数据链接，默认为空 success: function () { setWeixinShare.success; // 用户确认分享后执行的回调函数 }, cancel: function () { setWeixinShare.cancel; // 用户取消分享后执行的回调函数 } }); //获取“分享到QQ”按钮点击状态及自定义分享内容接口 wx.onMenuShareQQ({ title: setWeixinShare.title, // 分享标题 desc: setWeixinShare.desc, // 分享描述 link: setWeixinShare.link, // 分享链接 imgUrl: setWeixinShare.imgUrl, // 分享图标 success: function () { setWeixinShare.success; // 用户确认分享后执行的回调函数 }, cancel: function () { setWeixinShare.cancel; // 用户取消分享后执行的回调函数 } }); //获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口 wx.onMenuShareWeibo({ title: setWeixinShare.title, // 分享标题 desc: setWeixinShare.desc, // 分享描述 link: setWeixinShare.link, // 分享链接 imgUrl: setWeixinShare.imgUrl, // 分享图标 success: function () { setWeixinShare.success; // 用户确认分享后执行的回调函数 }, cancel: function () { setWeixinShare.cancel; // 用户取消分享后执行的回调函数 } }); //获取“分享到QQ空间”按钮点击状态及自定义分享内容接口 wx.onMenuShareQZone({ title: setWeixinShare.title, // 分享标题 desc: setWeixinShare.desc, // 分享描述 link: setWeixinShare.link, // 分享链接 imgUrl: setWeixinShare.imgUrl, // 分享图标 success: function () { setWeixinShare.success; // 用户确认分享后执行的回调函数 }, cancel: function () { setWeixinShare.cancel; // 用户取消分享后执行的回调函数 } }); }); }); } }); } function openX_ad(posterid, htmlid, width, height) { if ($(htmlid).length > 0) { var randomnumber = Math.random(); var now_url = encodeURIComponent(window.location.href); var ga = document.createElement('iframe'); ga.src = 'https://www1.elecfans.com/www/delivery/myafr.php?target=_blank&cb=' + randomnumber + '&zoneid=' + posterid+'&prefer='+now_url; ga.width = width; ga.height = height; ga.frameBorder = 0; ga.scrolling = 'no'; var s = $(htmlid).append(ga); } } openX_ad(828, '#berry-300', 300, 250);