A Basics on SignalR and its usage, by building a real-time communication and Reporting system.

1. KNOWLEDGE FOR LIFEKNOWLEDGE FOR LIFE
Tech Demo
Building Real-time
Applications with
SignalR
28th Feb 2017

2. KNOWLEDGE FOR LIFE
What we’ll be covering today
●What is SignalR?
●Why Use SignalR
●How Does SignalR Work
●The SignalR Hub Class & jQuery Plugin
●SignalR .NET Client
●Hubs and Persistent Connections
●SignalR Implementation

3. KNOWLEDGE FOR LIFE
SignalR is an abstraction that
intelligently decides how to
enable real-time over HTTP

4. KNOWLEDGE FOR LIFE
What is SignalR ?
●SignalR allows to create Real Time apps over Http.
●Http- A stateless protocol.
●Real Time-If something happens on the servers, the clients will be
notified without any post back.
●Good for chat applications, games, new and stock market updates.

5. KNOWLEDGE FOR LIFE
How Does SignalR Work?
●Example of Social Network.
●It Uses 4 Different Technologies-
1. Web Sockets
2. Event Source
3.Forever Frame
4.Long Polling
●SignalR Chooses among the technologies depending on the
requirements.

6. KNOWLEDGE FOR LIFE
Normal Http Web Request
Here’s some data!
No
Here’s some data!

7. KNOWLEDGE FOR LIFE
Ajax Request
●Client side validation not enough in web applications.
●Ajax can help in Server side validation without loading the whole page.

8. KNOWLEDGE FOR LIFE
Ajax Request Explained
Here’s some data!
No
Here’s the data you wanted!

9. KNOWLEDGE FOR LIFE
Limitation of Ajax Request
● Client needs to request to the server.
● Once the response comes, all the connection is lost.

10. KNOWLEDGE FOR LIFE
Long Polling Explained
Here’s some data!
Here’s some data!

11. KNOWLEDGE FOR LIFE
Limitation of Long Polling
● It is not a persistent connection.
● Internally it makes request to the server to remind who is it.
● It is one way only.
● Looks like a Persistent connection, but is not

12. KNOWLEDGE FOR LIFE
Forever Frame
●Best Example- Iframe
●E.g. YouTube Video on HTML
●Server can call Client side function, and push data as well.
PUSH DATA

13. KNOWLEDGE FOR LIFE
Limitation of Forever Frame
● Takes up RAM just by sitting there in the iframe.
● Client must support iframe, e.g. Web Browsers.
● It is one way only (Server to Client Only).

14. KNOWLEDGE FOR LIFE
Web Sockets
●Bi-Directional => Persistent Connection
●Multiple Users
●Full Duplex (Server to Client and Client to Server communication at the
same time)
●Asynchronous

15. KNOWLEDGE FOR LIFE
Yeah, dude!

16. KNOWLEDGE FOR LIFE
Real Time Field Status To Researchers
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
2013 2014 2015 2016
Pulses
Wheat
Rice

17. KNOWLEDGE FOR LIFE
Why use SignalR ?
●When we use SignalR, all the 4 technologies are implemented.
●In case of updates SignalR takes care of it.
●Abstraction-No need to understand the complexity.
●Cross compatible-Many browsers, Not only web but other apps.
●Easy
●Scalability- Multi Server situation. Just Need hardware to back it up.

18. KNOWLEDGE FOR LIFE
SignalR is built almost entirely
using async, so you don’t need
to worry about blocking
threads

19. KNOWLEDGE FOR LIFE
Try It Yourself
● PM> Install-Package Microsoft.AspNet.SignalR.Sample

20. KNOWLEDGE FOR LIFE
Server Side – Hub 1/2
● Top layer of Persistent Connection
● Can connect with 1-N clients
● Can send messages and call methods
● Routes automatically mapped
● SignalR handle the binding of complex object and arrays of objects
automatically
● Communication is serialized by JSON
● Hubs are per call, which means, each call from client to the hub will create a
new hub instance. Don’t setup static event handlers in hub methods.(3)

21. KNOWLEDGE FOR LIFE
Server Side – Hub 2/2
public class ChatHub : Hub
{
public void Send(string name, string message)
{
//Call the broadcast message method to update all clients
Clients.All.broadcastMessage(name , message);
}
}

22. KNOWLEDGE FOR LIFE
Client Side 1/3
<script src="Scripts/jquery-1.8.2.min.js" ></script>
<script src="Scripts/jquery.signalR-1.0.0.min.js" ></script>
<script src="/signalr/hubs" ></script>
<script type="text/javascript">
$(function () {
//Declare a proxy to reference the hub
var chat = $.connection.chatHub;
//Create a function that the hub can call to broadcast messages
= function (name, message) {
//Omitted
};
//Start the connection
(function () {
$("#sendMessage").click(function () {
//Call the Send method on the hub
chat.server.send($("#displayName").val(), $("#message").val());
});
});
});
</script>

23. KNOWLEDGE FOR LIFE
● Exposing methods from the server - The JavaScript client can declare methods
that the server can invoke.
my.Hub.{method} = callback
Method – Name of the client side method
Callback – A function to execute when the server invokes the method
● If you misspell names you will not get any warnings or notifications even
when logging is enabled. On server side is method call hosted on dynamic
property (Clients)
Client Side 2/3

24. KNOWLEDGE FOR LIFE
● JavaScript API
● $.connection.hub – The connection for all hubs
● $.connection.hub.id – The client id for the hub connection
● $.connection.hub.logging – Set to true to enable logging.
● $.connection.hub.start() – Starts the connection for all hubs.
Client Side 3/3

25. KNOWLEDGE FOR LIFE
● Register the route for generated SignalR hubs
1. Register on server side in StartUp class:
public partial class StartUp
{
protected void Configuration(IAppBuilder app)
{
app.MapSignalR();
}
}
2. Register on client side:
<script src="/signalr/hubs" ></script>
Hub Routing

26. KNOWLEDGE FOR LIFE
Simple Chat Application

27. KNOWLEDGE FOR LIFE
Thank You