Introduction to Signal-R

Signal R Simplified

It’s been long I have been searching for a good and working Signal-R blog, but trust me there are none. Some are marginally good but again, the code they offer does not work. After lot of concept seeking and code searching I finally able to create a working demo. In this blog post, we will go step by step on understanding of Signal-R.

What is Signal-R

If client needs data from server, it simply pings server and ask for data. But there are case when client need to constantly ping server to see if server has any data of it’s interest, if yes, client fetches the data and if no, it will ping the server again. Let’s not get confused on this, let’s go through an example to rather simplify the situation.

Imagine your mom ask you to bring some groceries back home when you return. You know Moms are so impatient, and you can trust on that. On the same evening, when you are on the way back she would continuously ring you and remind you that you need to purchase groceries, you need to purchase groceries, you need to purchase groceries…You can say yes to any one of the call if you have bought it already, else your answer would be no.

Consider the same scenario where instead of your Mom, your Dad has given you same task. He won’t ping you constantly to inspect whether or not you are done, but instead you have to call him back once you are done purchasing.

In the above analogy, if you consider yourself a server and your parents as Client, the later communication with Dad is called as duplex communication and the former with Mom is simplex communication. In duplex communication, not only client can ask server for data, server could also ping its client with the set of data it has.

There are various other techniques you can use to attain this, in this blog however, we would be focusing on the aspects of Signal-R.

Signal-R getting started

To get started, we need to first create an empty ASP.Net website and here we go.

Once the Web Site is created, go to solution explorer –> Right click on project and choose "Manage Nuget Package".

When the Packet manager Window is opened search for the signal-r package.

Install the Microsoft ASP.NET SignalR package. When the Visual Studio is done installing the package, you are good to go.

Add two classes and one HTML page after that in the solution.

ChatHub.cs
Startup.cs
index.html

ChatHub Class

This is what I have in my class:

1: using Microsoft.AspNet.SignalR;
2: using System;
3: using System.Collections.Generic;
4: using System.Linq;
5: using System.Threading;
6: using System.Web;
7:
8: namespace MySignalRDemo
9: {
10: public class ChatHub : Hub
11: {
12: /// <summary>
13: /// Send the value to the server after every two seconds
14: /// </summary>
15: public void Send()
16: {
17: // Call the broadcastMessage method to update clients.
18: for (int i = 0; i <= 100; i++)
19: {
20: //"All" is dynamic, and broadcastMessage is the method that we'll
21: //create in JavaScript at client side.
22: Clients.All.broadcastMessage(i.ToString());
23: Thread.Sleep(2000);
24: }
25: }
26: }
27: }

I have a method in my Class called “Send” you can have any method of any name in this class. But you must remember the name of the method because you have to call this method from JavaScript in the client. Notice also that the class is inheriting another class Hub. What it will do is, it would generate a JavaScript file which would have every method that the class inheriting class Hub have. For instance, in this case, the generated JavaScript file would have a Method named Send(). We will look into more theory at the later stage but for now, what this class do basically is that it broadcast messages in every 2 seconds to all its clients.

Startup.cs Class

This is what I have in my startup class.

1: using Microsoft.Owin;
2: using Owin;
3:
4: [assembly: OwinStartup(typeof(SignalRDemo.Startup))]
5: namespace MySignalRDemo
6: {
7: public class Startup
8: {
9: public void Configuration(IAppBuilder app)
10: {
11: // Any connection or hub wire up and configuration should go here
12: app.MapSignalR();
13: }
14: }
15: }

This class is kind of like a configuration that would help in routing the connection from server to client.

Index.html file

This is what my UI has:

1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title>SignalR BroadCast</title>
5: </head>
6: <body>
7: <div class="container">
8: <h1 id="message"></h1>
9: </div>
10:
11:
12: <script src="Scripts/jquery-1.6.4.min.js" ></script>
13:
14: <script src="Scripts/jquery.signalR-2.0.2.min.js"></script>
15: <script src="Scripts/jquery.signalR-2.0.3.js"></script>
16:
17: <script src="/signalr/hubs"></script>
18:
19: <script type="text/javascript">
20:
21: $(function () {
22: // Declare a proxy to reference the hub.
23: var chat = $.connection.chatHub;
24: //BroadcastMessage, the same method that we have set in
25: //Cleints.All.broadcastMessage()
26: chat.client.broadcastMessage = function (value) {
27: $('#message').text(value.toString());
28: };
29:
30: $.connection.hub.start().done(function () {
31: //send, the same method that we have in our chathub class
32: chat.server.send();
33: });
34: });
35:
36: </script>
37: </body>
38: </html>

In line #23 I have created a client of our ChatHub class in JavaScript. Next in line #26 I’ve created a method named broadcastMessage, the same method that we have in line #22 of ChatHub class. Inchathub class, we are passing the values in the broadcastMessage method, which we are catching it here and displaying it on the UI.

When the connection with the server is established successfully, I have initiated the communication by calling the Send method of the server in line #32.

If you run the application now, it will show you the number count on the screen, which would update in every 2 seconds.

I hope this post would help you to understand Signal-R better.

You can download the project from MySignalRDemo

8 Comments

Join the conversation! Your thoughts help the community grow.

Pradeep S5y ago
Good article. When counter goes from 0..100 and if I refresh browser then it shows broadcast message from both the call i.e it shows 12..1..13..2..14..3 and so on. How to avoid broadcast message from old call and show only from latest call. Thanks
Umair Hassan8y ago
Appreciate your work! But dont copy paste.
avinash bhujan9y ago
Copycat! You have not created a working demo but copied it from here: https://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr
Umamaheswara Rao Dasari10y ago
Yes...u r a good teacher. Very interesting article.
Mohammad Khalid11y ago
Very good article...You are a good teacher
Santhakumar Munuswamy11y ago
Thanks for nice article
Rajeev Ranjan12y ago
such a good article.. we wish you can write some more article on SignalR . I am really new for SignalR , and trying to learn more
Pankaj Bajaj12y ago
nice introduction