Real-Time Web Functionality for ASP.NET apps using SignalR

Wolf Hoffman
Aug 24, 2017 · 5 min read

The total eclipse just came to Boise and with that crowds of tourists from all over the world. I spent the last week avoiding them by going backpacking in the Gros Ventre Wilderness Area near Hoback Junction, Wyoming. I am constantly finding myself in a dichotomy between my passion for writing code and my constant need to spend large amounts of time in wilderness areas.

Sitting at my desk, it’s time to get back to code. This post will be about a useful library that I have been using in Microsoft .NET projects. This would be a great read for anyone looking to either start or refresh their knowledge of SignalR. We will build a very simple chat app.

What is SignalR and who cares?
SignalR allows clients to receive server data as it becomes available, and saves the client from having to make expensive HTTP requests to view that data.

Once upon a time, users of .NET applications would have to refresh their browser anytime they wanted to view updated data. Today, clients receive data immediately. Think of Facebook or Twitte. They immediately notify you if someone sent you a message or liked a picture of your cats. Having to refresh your browser every time you wanted to know if anyone liked your picture of Fluffykins would be a colossal deterrent for your users.

SignalR is only one way to fix this problem, but it is simple and we will overview it here.

How does SignalR work?
Microsoft’s SignalR library has a hard dependency with jQuery. At runtime, the SignalR library will dynamically compile JavaScript file which will manage all of the client-server communication you need.

There are two main parts to how SignalR works:

1. The Hub which sits on the server and is the main point of communication between the client that is sending data and the client(s) that will receive it. As a message or data comes into the hub, it can then be broadcasted out to the rest of the users (or whichever users you specify in the method on the Hub being invoked). The Hub class consists of public methods that clients will be able to access. Those methods can then specify where the data that the hub receives should be sent to. Do you want to notify one user or all users? For example, if you are sending a private message to a user, you wouldn’t want to notify every user that they received a message each time only one user receives a message. The hub is responsible for determining this and is composed of one or more public methods that we will see soon.

2. The jQuery/SignalR scripts. You will see this in the project below as well, but the jQuery scripts will call the public methods on your Hub when they send data. By calling a method on the server, you will be able to broadcast the data back out to the other users as determined by whatever method you are invoking in the Hub.

Let’s Build Something
We will build a browser-based chat app. This will be very similar to the Microsoft doc’s tutorial, but I’m hoping I’ll be able to break this down a little more simply.

System Requirements:
I will be using .NET 4.6 and Visual Studio 2017.

Step 1: Create a new ASP.NET web app in Visual Studio 2017.
I am calling mine ‘SignalrTutorial’ and will create an entirely ‘Empty’ .NET project.

Step 2: Create a new class in the Solution Explorer. Call it ‘MainHub.cs’

Step 3: We need to install SignalR. This can be done by browsing the Nuget package manager, or in the console run:
install-package Microsoft.AspNet.SignalR

Step 4: Create a Hub.
The hub, as mentioned above, is an incredibly important part of SignalR because this is the class on the server that will communicate directly with your client. All of the data will be sent through the hub before being returned to the users.

Add a using statement for the Microsoft.AspNet.SignalR library you just installed and have your MainHubclass inherit from the Hub class.

Step 5: Broadcast the Message to the Client
This broadcastMessage( string name, string message) method will be called each time the hub receives a message. Any client subscribed to this hub will then receive the broadcasted message. Most often, you will have many more public methods here. We could include one that takes a user ID and then will only notify that userID, for instance if you were sending a direct message to a user. For the scope of this tutorial, that will complicate things and I really just want to focus on setting up a signalR project here, but this is where you would do that in a larger app.

Step 6: Register the SignalR middlewear to the app’s middleware pipeline.
We will do this be creating a new class in the Solution Explorer called Startup.cs with the following code.

Step 7: Add an HTML Page.
In the Solution Explorer, add an HTML page called index.html. After this, I also right clicked on index.html in the Solution Explorer and chose ‘Set as Start Page’. Use the code below and read the comments to understand the last few scripts.

Step 8: Add the jQuery script to send data to the MainHub class. To start, add a new JavaScript file. I called it chat.js.

Step 9: Run the app. Select F5 to run the app. You should be prompted for a username and then be able to run this app.

Overview:
SignalR is a great tool for adding real-time events to your app. It uses websockets and takes a lot of the code you would have to otherwise write manually if you were using websockets alone. Feel free to play around with this app a bit and add some features. Leave a comment if this was helpful or if you have questions/comments.

)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade