Hello Everyone, if you havenāt read Part 1 of this article where I go over setting up a gRPC server and client in typescript and making a unary call. In this part we are going to go over client streaming and server streaming, we will go over the 4th(bidirectional) in Part 3.
AS USUAL! IF YOUāRE INTERESTED IN THE VIDEO VERSION OF THIS ARTICLE HERE IS THE LINK:
Server Streaming
Letās modify our .proto file accept a new rpc function called RandomNumbers where the server will take in a maxVal key which will be used to streaming back 10 random numbers below the maxVal number. It should look something like this:
Notice the key word stream on the return argument for RandomNumbers it will allow us to use gRPC to stream back numbers in chunks. Donāt forget, every time we modify our proto file we need to generate our typescript definitions, just run the shell script we created proto-gen.sh
Lets modify our server.ts to create the logic for this handler. It will look something like this:
Notice how compared to the PingPong function which has two parameters, RandomNumbers has one, ironically called call. First we extract maxVal through descructuring and we default it to 10(JavaScript specific). Then we create a interval to run 10 times, and on the 11th time to trigger ācall.end()ā which closes the connection between the client and server. Pretty cool right?
Now lets create out client! All we have to do is to call it!
All we do here is we call our RandomNumbers function with our maxVal and we get back a stream object which we can attach callback functions to the data and end event. Lets give it a run!
What you will notice is that you will get a number every 500ms, just like how we coded it in! š
Client Streaming
I honestly canāt think of many applications where this sort of streaming is useful, and might just be the least used, but at least gRPC supports it because you never know when you might need it!
It is very similar to Server Streaming just the logic is flipped the other way around. In this example we are going to streaming a todo to the server and before the connection is closed we will send back the list of todos. LETS MODIFY OUR PROTO FILE
Notice how how instead of the stream being in the return argument it is now in the function argument which means the server is going to get the stream of data! Again donāt forget to use proto-gen.sh to get those sweet type definitions š¤¤
Iām going to past both the server.ts and client.ts code and we will briefly go over it because its just the reverse of client streaming.
Note: I remove the previous 2 handlers/callers because it was taking up to much space, you can keep it if you like š
On our server.ts we get call and callback. The call is where we can listen to the data and end events. What we are doing is storing the clientās todos and storing it a variable, this way the state is maintained between request. And finally we use callback, the first argument will be an error if needed and the second will be the payload returned.
On our client.ts we call our TodoList with a callback function that returns an error(null if nothing) and a result is the final result received that we send in our callback from the server. After I use the write method to send 4 todos, they are completely random š, finally make sure you call the end function on line 38 to end the stream connection.
Running both server and client we get!
It does go by very fast, you could debounce/throttle sending todos to the server using setInterval like we done before, but essentially we send 4 different todos and at the very end the server sends us our array of todos š
This is an example of our unidirectional streaming, either from the client or server end. In our last part we are going to be going over bidirectional streaming which I personally like the best. Iām going to be demoing that capability by making a chat app, where they can be mulitple clients talking to each other in one room šš
Thanks for reading!
Github Code: https://github.com/floydjones1/ts-node-grpc
Personal Website: https://tdotcode.com/
