«Real Time» Web Applications   with SignalR in ASP.NET    (using and abusing SignalR)                                  Pri...
Thanks to the sponsors                     PrimordialCode
Who am I ?Alessandro GiorgettiCo-founder/Owner of         www.grupposid.comCo-founder ofEmail: alessandro.giorgetti@live.c...
Real Time Applications : the         «customer» viewpoint• You (the «customer») want data!• You need them NOW!• Real Time!...
What do we «devs» mean with ‘Real           Time’ applications ?•   Persistent Connections between endpoints.•   Two way c...
Real Time Web AppsOur worst enemy:HTTP• Stateless• Request – Response communication pattern.• Defo: not for real time.    ...
WebSockets a «god sent» HTTP               extension«the goods»•   Two way Full Duplex communication.•   Traverse proxies ...
WebSockets - interface[Constructor(in DOMString url, optional in DOMString protocol)]interface WebSocket {readonly attribu...
Using WebSocketsvar myWebSocket = new WebSocket      ("ws://www.websockets.org");myWebSocket.onopen = function(evt) { aler...
WebSockets: it’s not always gold all              that shines!«the badz»•   It’s a «raw» socket.•   Not all browsers suppo...
How to write RT apps then?Techniques to simulate Real Timecommunications:•   Polling.•   Long Polling.•   Forever Frame.• ...
Polling: the stubborn approach                                            Server          ResponseRequest                 ...
Polling• High overhead on requests: headers and  such…• High overhead on response: same as before…• High latency.• Waste o...
Long Polling: the kind gentleman                      approach                                          Server            ...
Long Polling• High overhead on requests: headers and  such…• High overhead on response: same as before…• Medium latency.• ...
Forever Frame: the IE wayIFRAME ("Forever frame"): Loading a page in an IFRAME that incrementallyreceives commands wrapped...
Server Sent Events: the others wayFrom Wikipedia (handle with care):Server-Sent Events (SSE) are a standard describing how...
SSE - EventSourceJavascript API: subscribe to a stream and await for messagesif (!!window.EventSource){ var source = new E...
SSE – the stream formatEVENT STREAM FORMATSending an event stream from the source is a matter ofconstructing a plaintext r...
So many options and a big      Headache !      How to survive ?                         PrimordialCode
Introducing: SignalR• Persistent Connection Abstraction communication library.• Abstracts protocol and transfer (choses th...
SignalR: setup demoDemo: how to setup SignalR,     GitHub or NuGet, see websockets in action.                             ...
SignalR in action                    PrimordialCode
SignalR: debugging websockets                        PrimordialCode
SignalR«Low level» API• Persistent Connectionsmanages the connection and the «raw» stream of data.«High level» API• Hubspr...
SignalR: PersistentConnection   Demo: steps needed to use the      PersistentConnection                               Prim...
SignalR: HubDemo: how to setup and interact         with Hubs                             PrimordialCode
SignalR: Hub advanced Demo: connection tracking,        grouping…                              PrimordialCode
SignalR: Scaling OutEvery instance lives on its own, to make themcommunicate and share data we need a …Backplane:• Redis.•...
SignalR: backplaneDemo: use an in-memory database to setup a message bus between     SignalR running instances            ...
Time for some Q&A ?                      PrimordialCode
Thanks All for attending!                       PrimordialCode
Please rate this session   Scan the code, go online, rate this session                                                 Pri...
Upcoming SlideShare
Loading in...5
×

«Real Time» Web Applications with SignalR in ASP.NET

5,334

Published on

Creating responsive and interactive web applications has always been one of my hidden dreams. One of the biggest show stopper has been the communication between server and clients. The rise of websockets now open some space for a brand new kind of applications; but we need a library that makes things 'easy' for us and that is able to fall back on previous solutions when the latest technologies are not available.
Suddenly on the ASP.NET scene appears SignalR: a persistence connection abstraction library that helps ASP.NET developers deal with 'real time' client-server communication sceneries.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
5,334
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
38
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

«Real Time» Web Applications with SignalR in ASP.NET

  1. 1. «Real Time» Web Applications with SignalR in ASP.NET (using and abusing SignalR) PrimordialCode
  2. 2. Thanks to the sponsors PrimordialCode
  3. 3. Who am I ?Alessandro GiorgettiCo-founder/Owner of www.grupposid.comCo-founder ofEmail: alessandro.giorgetti@live.comwww: http://www.primordialcode.comTwitter: @A_Giorgetti PrimordialCode
  4. 4. Real Time Applications : the «customer» viewpoint• You (the «customer») want data!• You need them NOW!• Real Time!It’s a ‘today’ reality:• Twitter / Facebook / many more…• Notifications.• Auctions / Stock trading / Banking.• Collaborative apps. PrimordialCode
  5. 5. What do we «devs» mean with ‘Real Time’ applications ?• Persistent Connections between endpoints.• Two way communication (full-duplex).• Low Latency ( :D ).• Low overhead.• Over the «wire» (intranet/internet/generic communication medium). PrimordialCode
  6. 6. Real Time Web AppsOur worst enemy:HTTP• Stateless• Request – Response communication pattern.• Defo: not for real time. PrimordialCode
  7. 7. WebSockets a «god sent» HTTP extension«the goods»• Two way Full Duplex communication.• Traverse proxies (ports: 80/443).• Low overhead (2 bytes or so).• Low latency (~50 ms).• W3C standard.• It’s a raw socket (flexibility). PrimordialCode
  8. 8. WebSockets - interface[Constructor(in DOMString url, optional in DOMString protocol)]interface WebSocket {readonly attribute DOMString URL;// ready stateconst unsigned short CONNECTING = 0;const unsigned short OPEN = 1;const unsigned short CLOSED = 2;readonly attribute unsigned short readyState;readonly attribute unsigned long bufferedAmount;// networkingattribute Function onopen;attribute Function onmessage;attribute Function onclose;boolean send(in DOMString data);void close();};WebSocket implements EventTarget; PrimordialCode
  9. 9. Using WebSocketsvar myWebSocket = new WebSocket ("ws://www.websockets.org");myWebSocket.onopen = function(evt) { alert("Connectionopen ..."); };myWebSocket.onmessage = function(evt) { alert("Received Message: " + evt.data); };myWebSocket.onclose = function(evt) { alert("Connectionclosed."); };myWebSocket.send("Hello WebSockets!");myWebSocket.close(); PrimordialCode
  10. 10. WebSockets: it’s not always gold all that shines!«the badz»• It’s a «raw» socket.• Not all browsers support it.• Not all servers support it.• Not all proxies support it.• Is it a standard then? PrimordialCode
  11. 11. How to write RT apps then?Techniques to simulate Real Timecommunications:• Polling.• Long Polling.• Forever Frame.• Server Sent Events. PrimordialCode
  12. 12. Polling: the stubborn approach Server ResponseRequest delay Client Time: requests event ‘n’ seconds (fixed time) PrimordialCode
  13. 13. Polling• High overhead on requests: headers and such…• High overhead on response: same as before…• High latency.• Waste of bandwith.• Waste of resources. PrimordialCode
  14. 14. Long Polling: the kind gentleman approach Server ResponseRequest Variable delay Client Time: requests event ‘n’ seconds (variable) PrimordialCode
  15. 15. Long Polling• High overhead on requests: headers and such…• High overhead on response: same as before…• Medium latency.• Waste less of bandwith.• Waste of resources.• Better than the previous one: less requests. PrimordialCode
  16. 16. Forever Frame: the IE wayIFRAME ("Forever frame"): Loading a page in an IFRAME that incrementallyreceives commands wrapped in <script> tags, which the browser evaluates asthey are received.• Data is sent out in chunks.• Add an IFrame to the page (its content length is declared to be indefinitely long).• Load in the IFrame a page with a script in it (execute it to get your chunk of data).• The next chunk of data arrives in the form of another script that is executed again.• The cycle goes on and on and on...• It causes pollution in the long run…all those script tags stays there even if you don’t need them anymore. PrimordialCode
  17. 17. Server Sent Events: the others wayFrom Wikipedia (handle with care):Server-Sent Events (SSE) are a standard describing howservers can initiate data transmission towards clientsonce an initial client connection has been established.They are commonly used to send message updates orcontinuous data streams to a browser client and designedto enhance native, cross-browser streaming through aJavaScript API called EventSource, through which a clientrequests a particular URL in order to receive an eventstream. PrimordialCode
  18. 18. SSE - EventSourceJavascript API: subscribe to a stream and await for messagesif (!!window.EventSource){ var source = new EventSource(stream.php);}else{ // Result to xhr polling :(}source.addEventListener(message, function(e) { console.log(e.data); }, false);source.addEventListener(open, function(e) { // Connection was opened. }, false);source.addEventListener(error, function(e) { if (e.readyState == EventSource.CLOSED),false); PrimordialCode
  19. 19. SSE – the stream formatEVENT STREAM FORMATSending an event stream from the source is a matter ofconstructing a plaintext response, served with a text/event-stream Content-Type, that follows the SSE format. In its basicform, the response should contain a "data:" line, followed byyour message, followed by two "n" characters to end thestream:data: My messagennThere are many more options, for a quick reference:http://www.html5rocks.com/en/tutorials/eventsource/basics/ PrimordialCode
  20. 20. So many options and a big Headache ! How to survive ? PrimordialCode
  21. 21. Introducing: SignalR• Persistent Connection Abstraction communication library.• Abstracts protocol and transfer (choses the best one).• A single programming model (a unified development experience).• Extremely simple to use.• Server-side it can be hosted in different «environments» (ASP.NET, console apps, windows services, etc…).• Client-side there’s support for: Javascript clients, .NET clients, WP; provide by the community: iOS, Android. PrimordialCode
  22. 22. SignalR: setup demoDemo: how to setup SignalR, GitHub or NuGet, see websockets in action. PrimordialCode
  23. 23. SignalR in action PrimordialCode
  24. 24. SignalR: debugging websockets PrimordialCode
  25. 25. SignalR«Low level» API• Persistent Connectionsmanages the connection and the «raw» stream of data.«High level» API• Hubsprovide advanced support for internal routing (callingfunctions on server & clients), connection anddisconnection tracking, grouping etc… PrimordialCode
  26. 26. SignalR: PersistentConnection Demo: steps needed to use the PersistentConnection PrimordialCode
  27. 27. SignalR: HubDemo: how to setup and interact with Hubs PrimordialCode
  28. 28. SignalR: Hub advanced Demo: connection tracking, grouping… PrimordialCode
  29. 29. SignalR: Scaling OutEvery instance lives on its own, to make themcommunicate and share data we need a …Backplane:• Redis.• Azure Queues.• Sql Server (soon to be ?).• Build your own! PrimordialCode
  30. 30. SignalR: backplaneDemo: use an in-memory database to setup a message bus between SignalR running instances PrimordialCode
  31. 31. Time for some Q&A ? PrimordialCode
  32. 32. Thanks All for attending! PrimordialCode
  33. 33. Please rate this session Scan the code, go online, rate this session PrimordialCode
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×