SignalR is a ASP.NET/ASP.NET Core library that can be used to develop real time web applications.
What are real time web applications?
Real time web applications differ significantly from traditional web applications. Traditional web applications pull data from the server by making HTTP requests. In real time web applications the server and client are connected continuously and data flows in this connection without the need for establishing and terminating every connection for every request.
Let’s create a simple application where multiple users can add data points to a graph in real time. We will be using ASP.NET Core 2.1 for this project, the completed project will look like this
Setting up the project
dotnet new web -o SignalR_LiveGraph
This dotnet CLI command creates an empty ASP.NET Core web project in the folder SignalR_LiveGraph
Then we need to build the project once, so that the project dependencies will be downloaded.
If the build isn’t successful, there must be something wrong with your .NET Core installation
We are done with the setup, let’s dive into the actual code
First we should start by adding SignalR to our web application
The AddSignalR() method adds the necessary stuff required for SignalR to run properly.
Then in the Configure method,
Nothing big here, we just removed
app.Run() which returns "Hello World!" as the response for every request and added
app.UseFileServer() which enables the static file middleware, so that we can use a serve a index.html, and other static files.
Creating a SignalR Hub
A Hub enables us to call methods on connected clients from the server, Don’t worry if this doesn’t make sense to you, it will make sense once you see it in action.
We have created a class GraphHub that extends SignalR.Hub and added a method that we will be calling from the client.
Clients contains all the clients that are connected, we have used
Clients.All since we want to broadcast the value to all the connected clients.
Now we have to map the hub to a path, to do that we have to add the following to the
Configure method in
We have mapped the path
/graphHub to the
GraphHub class. We are done with the signalR server, now we need to create the client.
wwwroot and add the following scripts and stylesheets
We will be having a textbox for the user to enter a value, a button to submit, a button for providing random values and a line chart to display those values
Now, let’s test it
dotnet build dotnet run
What is the difference between WebSockets and SignalR?
WebSocket is a technology which is used for data transfer, SignalR is a library for ASP.NET developers. SignalR uses WebSockets if it is supported by the browser, else it will fallback to other methods that simulate a persistent connection such as long polling, Server Sent Events, Forever frame, etc.
How to debug SignalR applications?
In traditional web applications, we can use the browser’s developer tools to examine network requests and responses, it’s the same in the case of SignalR, when WebSockets are used, the request will be sent and the response contains a Upgrade header
For websocket connections, Chrome developer tools has the frames tab, which can be used to inspect individual frames in a WebSocket connection.
The full source code for this project can be found here.