Creating a real time graph using SignalR

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.

cd SignalR_LiveGraph 
dotnet build

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 Startup.cs

We have mapped the path /graphHub to the GraphHub class. We are done with the signalR server, now we need to create the client.

Create index.html under 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.

Written by

Angular, Web, Java and other tech stuff

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store