This is a PoC for testing grpc's usability with VueJs (with TypeScript) client and .Net 5 server
- .Net 5 SDK
- Visual Studio 2019
- NodeJs or NPM (Can install with Visual Studio)
- VueJS
- protoc (For compiling proto files)
- grpc-web (For compilig proto files to js & d.ts files)
- Docker (Used for runnig service & proxy)
Please read related documents about gRPC for further information.
For a typical .net developer, we can say proto files are basically as interfaces. But .net is not natively support proto files, so this is why proto files need to be compiled to C# code. Visual Studio 19 handles this internally with using grpc tools, for working with grpc and .net please read the microsoft docs.
For using grpc with web frameworks we need to use grpc-web cause we genrally use js or typescript files at frontend code and protoc can not support them offically.
In this PoC, both client and server is in the same solution and we can use server's protp files directly. But if you want to change this please read grpc-web's documentation for protoc commands for web.
At the transport layer gRPC uses HTTP/2 for request/response multiplexing by which client and servers can both initiate multiple streams on a single underlying TCP connection. We're able to communicate between services or micro-services over HTTP/2 natively but not all browsers can use HTTP/2, some browsers still uses HTTP/1.1. At this point we wanted to stay at the safe point and decided to use a proxy to convert our packages from HTTP/1 to HTTP/2
.Net Server is ready to run. From the solution's root directory run those docker commands:
$ docker-compose build
$ docker-compose upTo shutdown: docker-compose down.
For Client, you need to install neccessary npm packages at package.json and compile proto file.
From the client's root directory (/GrpcClient) run this command for installing npm packages:
$ npm install
For compiling proto files use script named proto defined at package.json file.
After those steps you can run client
On this PoC, Client creates a request for Eight thousand sensor and loads Highchats Gauge for every sensor. With buttons on the top you can create a stream request or cancel the request and stop the data flow.
Note: Loading this many chart is a burden for a browser so I added extra control for rendering only charts visible on screen with scroll. This can be helpfull for you if you use Highcharts with many charts or series.
When you run the client you should see something like below:
