Upload
deepak-gupta
View
243
Download
3
Embed Size (px)
Citation preview
Real-time Communications with SignalR
Deepak GuptaLead Mobile Developer
Email: [email protected]: @trush_kas
Agenda1) Introduction to the real-time web2) ASP.NET SignalR3) Building a real-time4) Implementing Signalr on Android
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.
Client Browser
WebServer
Got Data?Got Data?Got Data?Got Data?
Here’s some data!Got Data?Got Data?Got Data?Got Data?
Without real-time
Client Browser
WebServer
I do real time, do you?
Absolutely!
With real-time
Let’s Party in Real-time!
Why Real-time?
Users want the latest info, NOW!
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)
How to do real-time in web?
Periodic polling
Poll from time to time using Ajax Delay in communication due to polling
interval Wastes bandwidth & latency
Server
ClientPolling interval
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
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
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!
Server Sent EventIt 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.
Meet SignalR
Client Browser
WebServer
Basically…
SignalR!!!
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
Picture was taken from http://www.asp.net/signalr
Architecture Diagram
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
SignalR Fallback
Long Polling
Forever Frames
Server Sent Events
Web Sockets
SignalR APISignalR 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
Communication with SignalR
Picture was taken from http://www.asp.net/signalr
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)
Server Side – Hub 2/2public class ChatHub : Hub{
public void Send(string name, string message) { //Call the broadcast message method
//to update all clients Clients.All.broadcastMessage(name, message); }}
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 chat.client.broadcastMessage = function (name, message) { //Omitted };
//Start the connection $.connection.hub.start().done(function () { $("#sendMessage").click(function () { //Call the Send method on the hub chat.server.send($("#displayName").val(), $("#message").val());
}); }); }); </script>
Client Side 2/3Exposing 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 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.
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>
Some demos Shape move Stock ticker Quiz MavenfyPad Chat
What’s it good for? Dashboards Monitoring Collaborative tools Job progress Real-time form Web games Trading Traffic systems, etc.
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
Signalr implementation onAndroid
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/)
How it works (2/2)Include library in your project
Add project dependency in gradle
Start ConnectionPlatform.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 }});
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);
Push data to servermHubProxy.invoke("Send", name, message, time);
Log trace of signalrLogger logger = new Logger() {
@Override public void log(String message, LogLevel level) { Log.d(TAG, message); }};
mHubConnection = new HubConnection(HOST, "", true, logger);
Challenges
1. Missing data.2. Connection closed.3. Security issue.
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/