浏览器可直接访问 Dubbo、gRPC 后端微服务，Dubbo-js 首个alpha 版本来了！

Dubbo-js首个alpha版本已发布，支持浏览器直接访问Dubbo、gRPC后端微服务，基于Dubbo3的Triple协议实现兼容性通信。

• 协议与兼容性Dubbo-js基于Dubbo3定义的Triple协议开发，支持浏览器和gRPC兼容的RPC服务，可同时运行在HTTP/1和HTTP/2上。Triple协议通过标准化接口定义（IDL）和轻量级API，简化了前后端服务通信的复杂性。

• 核心功能与开发模式Dubbo TypeScript SDK提供两种服务定义方式：

  IDL模式：通过Protocol Buffer（.proto文件）定义服务接口，生成TypeScript代码后调用。示例流程包括：

  使用Vite初始化React-TS项目，安装依赖（如@bufbuild/protoc-gen-es、@apachedubbo/dubbo-web）。

  编写.proto文件定义服务（如ExampleService），通过protoc工具生成客户端代码。

  在前端代码中创建Dubbo传输层（createDubboTransport）和客户端（createPromiseClient），调用后端服务。

  // IDL模式客户端调用示例const client = createPromiseClient(ExampleService, transport, { serviceGroup: 'dubbo', serviceVersion: '1.0.0' });const response = await client.say({ sentence: inputValue });

  无IDL模式：直接通过服务名和方法名调用后端，无需预先生成代码。适用于快速集成无IDL定义的后端服务，调用方式更灵活：

  // 无IDL模式客户端调用示例const response = await client.call( "apache.dubbo.demo.example.v1.ExampleService", "say", { sentence: inputValue });

• 后端服务适配后端可使用Java、Go、Node.js等Dubbo支持的语言开发。以Node.js为例：

  使用Fastify框架嵌入Dubbo服务，需安装@fastify/cors解决跨域问题。

  示例代码片段：

  import cors from "@fastify/cors";await server.register(cors, { origin: true }); // 启用跨域await server.listen({ host: "localhost", port: 8080 });

• 开发环境与运行

  前端项目需安装依赖并启动开发服务器：

  npm install @apachedubbo/dubbo-web @fastify/corsnpm run dev

  后端服务通过npx tsx server.ts启动，与前端通过

  http://localhost:8080
  通信。

• 项目现状与参与方式Dubbo-js于2023年9月发布首个alpha版本，目前处于快速发展阶段。开发者可通过以下途径参与：

  搜索钉钉群29775027779加入开发者群组。

  关注公众号「apachedubbo」，回复“dubbojs”获取邀请链接。

• 相关资源

  Dubbo TypeScript SDK GitHub仓库
  Node.js开发Dubbo后端服务示例

总结：Dubbo-js通过Triple协议和TypeScript SDK，实现了浏览器与后端Dubbo/gRPC服务的直接通信，为微服务架构提供了更灵活的前后端解耦方案。其双模式设计（IDL/无IDL）兼顾了类型安全与开发效率，未来有望推动微服务通信模式的革新。