Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Real-time Communications
with SignalR
Deepak Gupta
Agenda
1) Introduction to the real-time web
2) ASP.NET SignalR
3) Building a real-time
4) Implementing Signalr on Android
Real-time Application?
Real-time functionality is the ability to have server code
push content to connected clients instan...
Without real-time
With 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
...
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 &...
Long polling
 Poll but doesn’t respond until there's data
 Poll again after data received or after the connection
times ...
Forever Frame
 Server tells client that response is chucked
 Client keeps connection open until server closes it
 Serve...
HTML5 Web sockets
 Extension to HTTP
 Provides raw sockets over HTTP
 Full-duplex
 Traverses proxies
 It's still a wo...
Server Sent Event
It is supported by all browser who supports HTML5 except
Internet Explorer
Server-sent events (SSE) is a...
Basically…
Introducing SignalR
• SignalR is an asynchronous signalling library for ASP.Net, to
help build real-time multi-user web ap...
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 applicat...
SignalR Fallback
Long
Polling
Forever
Frames
Server
Sent
Events
Web
Sockets
SignalR API
SignalR provides a simple API for creating server-to-client remote procedure calls (RPC) that
call JavaScript ...
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 met...
Server Side – Hub 2/2
public class ChatHub : Hub
{
public void Send(string name, string message)
{
//Call the broadcast me...
Client Side 1/3
<script src="Scripts/jquery-1.8.2.min.js" ></script>
<script src="Scripts/jquery.signalR-1.0.0.min.js" ></...
Client Side 2/3
Exposing methods from the server - The JavaScript client can declare methods that the
server can invoke.
M...
Client Side 3/3
 JavaScript API
◦ $.connection.hub – The connection for all hubs
◦ $.connection.hub.id – The client id fo...
Hub routing
 Register the route for generated SignalR hubs
◦ Register on server side in Application_Start on global class...
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
...
SignalR requirements
 OS:
◦ Windows Server 2012
◦ Windows Server 2008 R2
◦ Windows 8/7
◦ Windows Azure
 IIS – 7/7.5(with...
Signalr implementation on
Android
How it works (1/2)
1. SignalR uses Web Socket and Server Sent Event to
push data from server to android devices.
2. It nee...
How it works (2/2)
 Include library in your project
 Add project dependency in
gradle
Start Connection
Platform.loadPlatformComponent(new AndroidPlatformComponent());
mHubConnection = new HubConnection(HOST, ...
Subscribe for client method
mHubProxy.on(METHOD_NAME, new SubscriptionHandler3<String, String, String>() {
@Override
publi...
Push data to server
mHubProxy.invoke("Send", name, message, time);
Log trace of signalr
Logger logger = new Logger() {
@Ov...
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:...
Real time Communication with Signalr (Android Client)
Upcoming SlideShare
Loading in …5
×

Real time Communication with Signalr (Android Client)

8,568 views

Published on

  • You can ask here for a help. They helped me a lot an i`m highly satisfied with quality of work done. I can promise you 100% un-plagiarized text and good experts there. Use with pleasure! ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Look at my new car! I am so excited! Getting a bargain at auction was easier than we thought. We will do it again. ☺☺☺ https://w.url.cn/s/AFqTUhi
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Government Auto Auctions US Gov't Surplus &amp; Seized Car Auctions. From $100 or 95% Off. ☺☺☺ https://w.url.cn/s/Av0YfS8
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • My wife and I bought our son's first car from one of the auctions listed at Gov-Auctions. Thanks for providing such a great service. More info.. ▲▲▲ https://w.url.cn/s/A9eBVEi
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you’re struggling with your assignments like me, check out ⇒ www.HelpWriting.net ⇐. My friend sent me a link to to tis site. This awesome company. After I was continuously complaining to my family and friends about the ordeals of student life. They wrote my entire research paper for me, and it turned out brilliantly. I highly recommend this service to anyone in my shoes. ⇒ www.HelpWriting.net ⇐.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Real time Communication with Signalr (Android Client)

  1. 1. Real-time Communications with SignalR Deepak Gupta
  2. 2. Agenda 1) Introduction to the real-time web 2) ASP.NET SignalR 3) Building a real-time 4) Implementing Signalr on Android
  3. 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. 4. Without real-time
  5. 5. With real-time
  6. 6. Why Real-time? Users want the latest info, NOW!
  7. 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. 8. How to do real-time in web?
  9. 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. 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. 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. 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. 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.
  14. 14. Basically…
  15. 15. 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
  16. 16. Picture was taken from http://www.asp.net/signalr Architecture Diagram
  17. 17. 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
  18. 18. SignalR Fallback Long Polling Forever Frames Server Sent Events Web Sockets
  19. 19. 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
  20. 20. Communication with SignalR Picture was taken from http://www.asp.net/signalr
  21. 21. 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)
  22. 22. 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); } }
  23. 23. 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>
  24. 24. 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)
  25. 25. 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.
  26. 26. 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>
  27. 27. Some demos  Shape move  Stock ticker  Quiz  MavenfyPad  Chat
  28. 28. What’s it good for?  Dashboards  Monitoring  Collaborative tools  Job progress  Real-time form  Web games  Trading  Traffic systems, etc.
  29. 29. 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
  30. 30. Signalr implementation on Android
  31. 31. 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/)
  32. 32. How it works (2/2)  Include library in your project  Add project dependency in gradle
  33. 33. 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 } });
  34. 34. 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);
  35. 35. 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);
  36. 36. Challenges 1. Missing data. 2. Connection closed. 3. Security issue.
  37. 37. 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/

×