Grpc Web: a JavaScript library package to replace rest grpc

Jiedao jdon 2021-05-04 04:44:14
grpc web javascript library package

gRPC-Web It's a JavaScript Client library , send Web Applications can interact directly with the back end gRPC Service communications , Without the need for HTTP The server acts as a mediator . That means you can now use .proto  File definition client and Server side data types and service interfaces , Easy to build real end-to-end gRPC Application Architecture . therefore ,gRPC-Web For the whole REST Development Web The paradigm offers a compelling new choice .

Just to be clear ,REST Applications In itself There is no problem . Use REST API The server builds a lot of very successful applications , But if these servers use non HTTP The protocol communicates with the back end service , So a lot of conversion is needed gRPC-Web The benefits of this project come from “ technology ” To solve this problem in the future .

Use gRPC-Web The advantages of

as time goes on ,gRPC-Web Will provide a broader set of features . But I can see it has provided some great victories from the beginning :

  • End to end gRPC - As mentioned above , Use gRPC-Web, Can be formally removed from the stack REST Component and replace it with pure gRPC, So that you can use Protocol Buffers establish Whole  RPC The Conduit .

  • Closer coordination between front-end and back-end teams - Use Protocol Buffers Define the whole RPC The Conduit , Will no longer be needed “ Micro service team ” And “ Client team ” Separate . client - Back end interaction is just a gRPC layer .

  • Easy to build client Libraries - Use gRPC-Web, It means that the back-end server is gRPC Servers, not HTTP The server , This means that all your services are client libraries or gRPC library . need Ruby,Python,Java And others 4 A client library in two languages ? You no longer need to write for all of these clients HTTP client .

Here's a Protocol Buffer Format definition :

syntax = “proto3”;
package todos;
message Todo {
  string content = 1;
  bool finished = 2;
message GetTodoRequest {
  int32 id = 1;
service TodoService {
  rpc GetTodoById (GetTodoRequest) returns (Todo);

have access to protoc  Command line tools based on this .proto  Define use generation CommonJS Client code :

protoc echo.proto \

--js_out = import_style = commonjs:./ output \

--grpc-web_out = import_style = CommonJS Of :./ Output

Now from the back end gRPC Server acquisition TODO The list can be that simple :

const {GetTodoRequest} = require(‘./todos_pb.js’);
const {TodoServiceClient} = require(‘./todos_grpc_web_pb.js’);
const todoService = new proto.todos.TodoServiceClient(‘http://localhost:8080’);
const todoId = 1234;
var getTodoRequest = new proto.todos.GetTodoRequest();
var metadata = {};
var getTodo = todoService.getTodoById(getTodoRequest, metadata, (err, response) => {
 if (err) {
 } else {
   const todo = response.todo();
   if (todo == null) {
     console.log(`A TODO with the ID ${todoId} wasn’t found`);
   } else {
     console.log(`Fetched TODO with ID ${todoId}: ${todo.content()}`);

Again , No, HTTP Code or method , No, JSON analysis , No head Header negotiation . You declared the data type and service interface , also gRPC-Web Excerpts of all “hard wiring” Sample code , Provides you with a clean and humanized API( Basically the same as the current be used for gRPC API Of Node.js same API, Just transferred to the client ).

On the back end ,gRPC The server can use any support gRPC In the language of , Include Go,Java,C ++,Ruby,Node.js wait . The last piece of the puzzle is the service agent . from the beginning ,gRPC-Web Will support Envoy As the default service proxy , It has built-in envoy.grpc_web  filter , Just a few lines of replication and configurable configuration to apply .



本文为[Jiedao jdon]所创,转载请带上原文链接,感谢

  1. 21. Object oriented foundation "problems and solutions of object traversal"
  2. Discussion on hot micro front end: Google AdWords is a real micro front end
  3. Usecallback and usememo for real performance optimization
  4. 【前端圭臬】十一:从规范看 JavaScript 执行上下文(下)
  5. [front end standard] 11: Javascript execution context from the perspective of specification (2)
  6. Hexagonal六角形架构ReactJS的实现方式 - Janos Pasztor
  7. Transaction of spring's reactive / imperative relational database
  8. The implementation of hexagonal hexagonal reactjs Janos pasztor
  9. HTTP状态码:402 Payment Required需要付款 - mozilla
  10. HTTP status code: 402 payment required - Mozilla
  11. Factory mode, constructor mode and prototype mode
  12. Build the scaffold of react project from scratch (Series 1: encapsulating a request method with cache function based on Axios)
  13. Cocos Quick Start Guide
  14. Comparison of three default configurations of webpack5 modes
  15. A case study of the combination of flutter WebView and Vue
  16. CSS: BFC and IFC
  17. A common error report and solution in Vue combat
  18. JS: this point
  19. JS: prototype chain
  20. JavaScript series -- promise, generator, async and await
  21. JS: event flow
  22. Front end performance optimization: rearrangement and redrawing
  23. JS - deep and shallow copy
  24. JavaScript异步编程3——Promise的链式使用
  25. JavaScript asynchronous programming 3 -- chain use of promise
  26. Vue.js组件的使用
  27. The use of vue.js component
  28. How to judge whether a linked list has links
  29. Element UI custom theme configuration
  30. Text image parallax effect HTML + CSS + JS
  31. Spring的nohttp宣言:消灭http://
  32. Vue3 intermediate guide - composition API
  33. Analysis of URL
  34. These 10 widgets that every developer must know
  35. Spring's nohttp Manifesto: eliminate http://
  36. Learn more about JS prototypes
  37. Refer to await to JS to write an await error handling
  38. A short article will directly let you understand what the event loop mechanism is
  39. Vue3 uses mitt for component communication
  40. Characteristics and thinking of ES6 symbol
  41. Two way linked list: I'm no longer one-way driving
  42. Vue event and form processing
  43. Reactive TraderCloud实时外汇开源交易平台
  44. Reactive tradercloud real time foreign exchange open source trading platform
  45. Node.js REST API的10个最佳实践
  46. Ten best practices of node.js rest API
  47. Fiddler advanced usage
  48. Process from Vue template to render
  49. Promise up (asynchronous or synchronous)
  50. Principle and implementation of promise
  51. Vs code plug in sharing - run code
  52. Vue practical notes (1) introduction of Ant Design
  53. Vue actual combat notes (2) introduction of element plus
  54. Introduction to webpack
  55. Webpack construction process
  56. Vue notes
  57. The experience and lessons of moving from ruby megalith architecture to go microservice
  58. Using leancloud to add artitalk module to hexo blog
  59. Implementation of chrome request filtering extension
  60. Detailed introduction of beer import declaration elements and label quarantine [import knowledge]