In this post, we’ll see how to stream the data in ASP.NET Core SignalR. With ASP.NET Core 2.1 released, SignalR now supports streaming content.
What is a Stream?
Streaming or media streaming is a technique for transferring data so that it can be processed as a steady and continuous stream. – webopedia.com
When to stream?
In the scenarios where the data will with some latency from the server and we don’t have to wait for the content to arrive. For this scenario, we can use data streaming.
This can also be useful when we don’t want to get all the data at a time as this might be time-consuming. So, we’ll send the data in chunks/fragments from the server to the client.
Now, we’ll see how to set up the
ASP.NET Core SignalR in Visual Studio.
Creating ASP.NET Core Application
It’s always the same thing Go over to
New Project and give it a name.
And now select
Web Application from the templates and your framework as
ASP.NET Core 2.1
Once you’re done with that you should have your project in the solution folder.
We’ll start writing our Hubs now.
Unlike normal signalR methods, the stream methods will be different as they have stream the content over time when the chunks of data are available.
Create a C# file in the project with the name as
StreamHub or whatever. It is better to add it in a Folder though.
Derive that from
Hub class and add a namespace in the file as
Now, create a method in the class with the return type as
ChannelReader<T> where T is the type of the value returned. The
ChannelReader return type on a method makes a streaming hub method. Here is the code for streaming our data.
DelayCounteris our streaming method, this takes a delay parameter to specify from the client end.
WriteItemsis a private method and this returns a
- The last line in the
.TryComplete()on the stream says the stream is completed and is closed to the client.
Configuring SignalR in the project
- Head over to the
Startupclass and locate
ConfigureServicesmethod and add the following line at the end (skip this if you can configure yourself).
- We also need to add a route for the signalR stream. Now, head over to the
Configuremethod in the Startup class and add the following.
Add SignalR client library
This is to add the signalR js on the client side.
Launch Package Manager Console (PMC) from the Visual Studio and navigate to project folder with the following command
Run npm init to create a package.json file
npm init -y
Ignore the warnings. Install the signalR client library
npm install @aspnet/signalr
The npm install downloads the signalR client library to a subfolder under
Copy the signalR from node_modules
Copy the signalr.js file from the
<projectfolder>\node_modules\@aspnet\signalr\dist\browser to a folder in
Alternatively, you could also make use of the
Microsoft Library Manager (libman.json) to restore it for you.
If you don’t have any idea of what libman.json is. Check this article on Libman.
So, your Libman for adding downloaded signalR should look like this.
Once you’ve saved libman.json our signalr.js will be available in the SignalR folder in lib.
HTML for streaming
Copy the following HTML into
Index.chtml. For the purpose of the article, I’m removing the existing HTML in
Index.cshtml and adding the following.
Notice we have
signalrstream.js at the end. Let’s add the js file to stream the content.
create a new
signalrstream.js file in
wwwroot\js folder. Add the following code into the js file.
As ASP.NET SignalR now uses ES 6 features and not all browsers support ES 6 features. So, in order for it to work in all browser, it is recommended to use transpilers such as babel.
Unlike traditional signalR, we now have different syntax for creating a connection.
And for regular signalR connections, we’ll add listeners with
.on method but this is stream so we have stream method that accepts two arguments.
- Hub method name: Our hub name is
- Arguments to the Hub method: In our case arguments is a delay between the streams.
connection.stream will have subscribe method to subscribe for events. We’ll wire up for next, complete and error events and display messages in the
The code before/after the stream connection is related to async and starting a connection as soon as we hit the js file.
Here is the output of the stream
See it in action
I’ve modified the
StreamHub class to have the count up to 10 in above gif image so that it won’t take any longer.
Notice the delay from the item 6-10 when streaming this is because we’ve doubled the amount of delay for every 5 items. This can be thought of as streaming the data only when available. So, the 6th item is streamed when it is available.
So, if you have a large amount of data to be sent to the client, then go for streaming instead of sending the data at once.
Source code download
source code on github. I’ve removed the
npm_modules from the solution to make it lightweight so install the npm modules with the following command and start the solution.
Streaming the content is not new but it is in signalR now and a great feature. Streaming will keep user experience pretty cool and also our server won’t have those high bars (peak timings).
Most of the developers know the limitations of SignalR not being able to transmit a huge amount of data.
With ASP.NET Core SignalR, streaming the data from the server to client overcomes the problem of transferring all the content at once.
I’d recommend going for streaming content when you think your data is large or if you want some user experience without blocking the client by showing endless spinners.
Subscribe to Code Rethinked
Get the latest posts delivered right to your inbox