1. Real-time Communications
with SignalR
Deepak Gupta

2. Agenda
1) Introduction to the real-time web
2) ASP.NET SignalR
3) Building a real-time
4) Implementing Signalr on Android

3. Real-time Application?
Real-time functionality is the ability to have server code
push content to connected clients instantly as it becomes
available, rather than having the server wait for a client to
request new data.

4. Without real-time

5. With real-time

6. Why Real-time?
Users want the latest info, NOW!

7. Show Me Some Examples
 Twitter, Facebook, Mail - live searches/updates
 Stock streamers
 Auctions
 Interactive games
 Live Scores
 Collaborative apps (google docs, office web apps)
 Live user analytics (live graphs)

8. How to do real-time in web?

9. Periodic polling
 Poll from time to time using Ajax
 Delay in communication due to polling interval
 Wastes bandwidth & latency
Server
Client
Polling
interval

10. Long polling
 Poll but doesn’t respond until there's data
 Poll again after data received or after the connection
times out
 Consumes server & threads & connection resources
Server
Client

11. Forever Frame
 Server tells client that response is chucked
 Client keeps connection open until server closes it
 Server pushed data to the client followed by 0
 Consumes server threads
Server
Client

12. HTML5 Web sockets
 Extension to HTTP
 Provides raw sockets over HTTP
 Full-duplex
 Traverses proxies
 It's still a working draft
 Not every proxy server supports it
 Not every web server supports it
 Not every browser supports it
 They are raw sockets!

13. Server Sent Event
It is supported by all browser who supports HTML5 except
Internet Explorer
Server-sent events (SSE) is a technology where a browser
receives automatic updates from a server via HTTP
connection. The Server-Sent Events EventSource API is
standardized as part of HTML5 by the W3C.

15. Basically…

16. Introducing SignalR
• SignalR is an asynchronous signalling library for ASP.Net, to
help build real-time multi-user web application.
• SignalR is a compete client and server side solution with
JavaScript(jQuery) on client and ASP.Net on the back end to
create these kinds of application.
• Abstraction over transports
• Events instead of task/async
• Connection management
• Broadcast or target specific client

17. Picture was taken from http://www.asp.net/signalr
Architecture Diagram

18. What does SignalR do?
• Client to Server persistent connection over HTTP
• Easily build multi-user, real-time web applications
• Auto-negotiates transport
• Allows server-to-client push and RPC
• Built async to scale to 1000’s of connections
• Scale out with Service Bus, SQL Server & Redis
• Open Source on GitHub

19. SignalR Fallback
Long
Polling
Forever
Frames
Server
Sent
Events
Web
Sockets

20. SignalR API
SignalR provides a simple API for creating server-to-client remote procedure calls (RPC) that
call JavaScript functions in client browsers from server-side .Net code. SignalR package is
available by NuGet:
◦ SignalR – A meta package that brings in SignalR.Server and SignalR.Js (this is necessary)
◦ SignalR.Server – Server side components needed to build SignalR endpoints
◦ SignalR.Js – Javascript client for SignalR
◦ SignalR.Client - .Net client for SignalR
◦ SignalR.Ninject – Ninject dependency resolver for SignalR

21. Communication with SignalR
Picture was taken from http://www.asp.net/signalr

22. 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)

23. 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);
}
}

24. 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>

25. Client Side 2/3
Exposing methods from the server - The JavaScript client can declare methods that the
server can invoke.
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)

26. Client Side 3/3
 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.

27. Hub routing
 Register the route for generated SignalR hubs
◦ Register on server side in Application_Start on global class:
public class Global : System.Web.HttpApplication
{
protected void Application_Start(object sender, EventArgs e)
{
//Register the default hubs route: ~/signalr/hubs
RouteTable.Routes.MapHubs();
}
}
 Register on client side:
<script src="/signalr/hubs" ></script>

28. Some demos
 Shape move
 Stock ticker
 Quiz
 MavenfyPad
 Chat

29. What’s it good for?
 Dashboards
 Monitoring
 Collaborative tools
 Job progress
 Real-time form
 Web games
 Trading
 Traffic systems, etc.

30. SignalR requirements
 OS:
◦ Windows Server 2012
◦ Windows Server 2008 R2
◦ Windows 8/7
◦ Windows Azure
 IIS – 7/7.5(with Extensionless URL(2)); 8/8 Express
 .Net – 4.5 framework

31. Signalr implementation on
Android

32. How it works (1/2)
1. SignalR uses Web Socket and Server Sent Event to
push data from server to android devices.
2. It needs signalr library, java web socket, gson (link
https://github.com/SignalR/java-client/)

33. How it works (2/2)
 Include library in your project
 Add project dependency in
gradle

34. Start Connection
Platform.loadPlatformComponent(new AndroidPlatformComponent());
mHubConnection = new HubConnection(HOST, "", true, null);
mHubProxy = mHubConnection.createHubProxy(HUB_NAME);
ClientTransport clientTransport = new ServerSentEventsTransport(mHubConnection.getLogger());
SignalRFuture<Void> awaitConnection = mHubConnection.start(clientTransport);
awaitConnection.done(new Action<Void>() {
@Override
public void run(Void obj) throws Exception {
// Hub Connected
}
}).onError(new ErrorCallback() {
@Override
public void onError(Throwable error) {
// Connection Error
}
}).onCancelled(new Runnable() {
@Override
public void run() {
// Connection Canceled
}
});

35. Subscribe for client method
mHubProxy.on(METHOD_NAME, new SubscriptionHandler3<String, String, String>() {
@Override
public void run(String param1, String param2, String param3) {
// action to perform
}
}, String.class, String.class, String.class);
mHubProxy.on(METHOD_NAME, new SubscriptionHandler1<String>() {
@Override
public void run(String param1) {
// action to perform
}
}, String.class);

36. Push data to server
mHubProxy.invoke("Send", name, message, time);
Log trace of signalr
Logger logger = new Logger() {
@Override
public void log(String message, LogLevel level) {
Log.d(TAG, message);
}
};
mHubConnection = new HubConnection(HOST, "", true, logger);

37. Challenges
1. Missing data.
2. Connection closed.
3. Security issue.

38. References
 1.) Comet - http://en.wikipedia.org/wiki/Comet_(programming)
 2.) ISS with Extensionless url support – http://support.microsoft.com/kb/980368
 3.) Hub api guide server - http://www.asp.net/signalr/overview/hubs-api/hubs-api-
guide-server
 4.) Android Github link - https://github.com/SignalR/java-client/