<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Web on Apache Dubbo</title><link>https://deploy-preview-3202--dubbo.netlify.app/zh-cn/blog/-web/</link><description>Recent content in Web on Apache Dubbo</description><generator>Hugo</generator><language>zh-cn</language><atom:link href="https://deploy-preview-3202--dubbo.netlify.app/zh-cn/blog/-web/index.xml" rel="self" type="application/rss+xml"/><item><title>Web 浏览器页面也能访问dubbo、grpc微服务？Dubbo-js alpha版本正式发布</title><link>https://deploy-preview-3202--dubbo.netlify.app/zh-cn/blog/2023/10/07/web-%E6%B5%8F%E8%A7%88%E5%99%A8%E9%A1%B5%E9%9D%A2%E4%B9%9F%E8%83%BD%E8%AE%BF%E9%97%AEdubbogrpc%E5%BE%AE%E6%9C%8D%E5%8A%A1dubbo-js-alpha%E7%89%88%E6%9C%AC%E6%AD%A3%E5%BC%8F%E5%8F%91%E5%B8%83/</link><pubDate>Sat, 07 Oct 2023 00:00:00 +0000</pubDate><guid>https://deploy-preview-3202--dubbo.netlify.app/zh-cn/blog/2023/10/07/web-%E6%B5%8F%E8%A7%88%E5%99%A8%E9%A1%B5%E9%9D%A2%E4%B9%9F%E8%83%BD%E8%AE%BF%E9%97%AEdubbogrpc%E5%BE%AE%E6%9C%8D%E5%8A%A1dubbo-js-alpha%E7%89%88%E6%9C%AC%E6%AD%A3%E5%BC%8F%E5%8F%91%E5%B8%83/</guid><description>&lt;p>基于 Dubbo3 定义的 Triple 协议，你可以轻松编写浏览器、gRPC 兼容的 RPC 服务，并让这些服务同时运行在 HTTP/1 和 HTTP/2 上。&lt;a href="https://github.com/apache/dubbo-js/">Dubbo TypeScript SDK&lt;/a> 支持使用 IDL 或编程语言特有的方式定义服务，并提供一套轻量的 APl 来发布或调用这些服务。&lt;/p>
&lt;p>Dubbo-js 已于 9 月份发布支持 Dubbo3 协议的首个 alpha 版本，它的发布将有机会彻底改变微服务前后端的架构与通信模式，让你能直接在浏览器页面或web服务器中访问后端 Dubbo RPC 服务。目前项目快速发展中，对参与 apache/dubbo-js 项目感兴趣的开发者，欢迎搜索钉钉群：&lt;strong>29775027779&lt;/strong> 加入开发者群组。&lt;/p>
&lt;p>&lt;img alt="Web 浏览器页面也能访问dubbo、grpc微服务" src="https://deploy-preview-3202--dubbo.netlify.app/imgs/blog/2023/9/web/img.png">&lt;/p>
&lt;h1 id="浏览器-web-应用示例">浏览器 Web 应用示例&lt;/h1>
&lt;p>本示例演示了如何使用 dubbo-js 开发运行在浏览器上的 web 应用程序，web 页面将调用 dubbo node.js 开发的后端服务并生成页面内容。本示例演示基于 IDL 和非 IDL 两种编码模式。&lt;/p>
&lt;p>&lt;img alt="Web 浏览器页面也能访问dubbo、grpc微服务" src="https://deploy-preview-3202--dubbo.netlify.app/imgs/blog/2023/9/web/img_1.png">&lt;/p>
&lt;h2 id="idl-模式">IDL 模式&lt;/h2>
&lt;h3 id="前置条件">前置条件&lt;/h3>
&lt;p>首先，我们将使用 Vite 来生成我们的前端项目模板，它内置了我们稍后需要的所有功能支持。&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" style="color:#93a1a1;background-color:#002b36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">&lt;code class="language-shell" data-lang="shell">&lt;span style="display:flex;">&lt;span>npm create vite@latest -- dubbo-web-example --template react-ts
&lt;/span>&lt;/span>&lt;span style="display:flex;">&lt;span>&lt;span style="color:#b58900">cd&lt;/span> dubbo-web-example
&lt;/span>&lt;/span>&lt;span style="display:flex;">&lt;span>npm install
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>因为使用 Protocol Buffer 的原因，我们首先需要安装相关的代码生成工具，这包括 &lt;code>@bufbuild/protoc-gen-es&lt;/code>、&lt;code>@bufbuild/protobuf&lt;/code>、&lt;code>@apachedubbo/protoc-gen-apache-dubbo-es&lt;/code>、&lt;code>@apachedubbo/dubbo&lt;/code>。&lt;/p></description></item></channel></rss>