不使用NodeJS使用GRPC-Web

Question

如何在浏览器上使用GRPC-Web？ 我的意思是，在纯浏览器代码中，没有任何涉及NodeJS。

这里官方的示例：https://github.com/grpc/grpc-web/tree/master/net/grpc/gateway/examples/helloworld 主要面向NodeJS。

有没有办法以纯JavaScript形式使用GRPC-Web而不需要：

const {HelloRequest, HelloReply} = require('./helloworld_pb.js');
const {GreeterClient} = require('./helloworld_grpc_web_pb.js');

意思是，只需要按照标准的<script>方式添加JavaScript依赖项？ 并且能够执行：var client = new GreeterClient('http://localhost:8080');

- Fireburn

Answer 1

是的，你需要使用webpack来捆绑你的源代码。这个步骤也在你提到的文档中有描述。在readme的底部：

只需配置你的webpack以公开变量即可：

client.js

...
export function instantiateGreeterClient(...) { 
    return new GreeterClient(...)
};

webpack.config.js

module.exports = {
   ...
   entry: './path/to/client.js',
   output: {
      path: './bundle/js/',
      filename: 'grpc.js',
      library: {
          name: 'grpc',
          type: 'umd',
      },
   ...
}

然后像往常一样导入您的包。现在，您可以在脚本标记代码中使用所有定义的变量。

<script src="path/to/grpc.js"></script>
<script> 
    const client = grpc.instantiateGreeterClient(...)
    ...
</script>

更多信息可以在webpack文档中找到

- Viacheslav Bilohlazov

---

鼓励提供外部资源的链接，但请在链接周围添加一些上下文，以便其他用户了解它是什么以及为什么存在。如果目标网站无法访问或永久关闭，请始终引用重要链接的最相关部分。 - jasie

Answer 2

使用grpc-web而不是@grpc/grpc-js npm包。

编写客户端代码中提供的示例使用了@grpc/grpc-js，它只能在NodeJS上运行。

为了使用您在.proto文件中定义的protobuf和gRPC服务，您需要使用grpc-web生成您的代码。然后，导入这些生成的文件并使用它们。

---

我学到的一些东西:

• 在浏览器中，您不能真正使用protobufjs，您需要使用grpc-web和google-protobuf。如果有人有另一种解决方法，请让我知道。
• grpc-web生成的代码不太好看 - 它很难读取，并且没有所有protobuf的功能。您需要具备大量的JavaScript和打包经验才能使用它。
• grpc-web比gRPC更有限。NodeJS运行gRPC，但在浏览器中，您必须使用grpc-web，并必须运行一个gRPC代理将gRPC-web翻译成/从gRPC。

- Ben Butterworth