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.

Building Real Time Web Applications with SignalR (NoVA Code Camp 2015)

886 views

Published on

Building Real Time Web Applications with SignalR presented at NoVA Code Camp 2015.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Building Real Time Web Applications with SignalR (NoVA Code Camp 2015)

  1. 1. Using SignalR to Build Real- time Web Applications Kevin Griffin - @1kevgriff http://kevgriffin.com April 3rd, 2015
  2. 2. Thank Our Sponsors without whom Today is not Possible Platinum Bronze Silver
  3. 3. Housekeeping… • Thanks to our host • Respect your speakers and fellow attendees: Set mobile devices to vibrate or silent • Fill out session evaluations • They are used in the drawings • You must be present to win at the wrap-up
  4. 4. About Kevin • Kevin Griffin • Independent Consultant CTO, Winsitter • Twitter: @1kevgriff Email: kevin@kevgriffin.com • Microsoft ASP.NET MVP ASPInsider 4/3/2015 @1kevgriff
  5. 5. Simple Windows Server Monitoring 14-day Free Trial http://winsitter.com
  6. 6. Schedule and Control Windows Updates Across Your Infrastructure http://patchtuesday.io
  7. 7. http://wintellectnow.com Promo Code: GRIFFIN-13
  8. 8. Agenda • A History of the Web • Methods for Building Real Time Web Applications • Introducing SignalR 4/3/2015 @1kevgriff
  9. 9. Defining Real-Time First: How does the web work? 4/3/2015 @1kevgriff
  10. 10. History of the Web (version 1.0) Request Response
  11. 11. History of the Web (version 1.0) Request Response
  12. 12. History of the Web (Web 2.0) Request Response
  13. 13. History of the Web (Web 2.0) Request Response
  14. 14. Web 3.0 and Beyond Request Response Continuous Connection
  15. 15. Defining Real-Time Updates to the client without interactions from the user. 4/3/2015 @1kevgriff
  16. 16. Real-Time In Action Can you name an example of a “real-time” site? 4/3/2015 @1kevgriff
  17. 17. Method #1: Interval function updateInterface(){ // go to the server, do something $.ajax({...}); setTimeout(10000, updateInterface); } setTimeout(10000, updateInterface); Pros Cons • Works across all browsers • More connections, more overhead • More overhead, more bandwidth • Server strain!
  18. 18. Method #2: Long Polling function startListening(){ // note: this call can take as long // as 120 seconds to return, depending // on browser timeouts. $.ajax({ url: “/blah”, success: function (data){ startListening(); }, failure: function (err){ startListening(); }, }); } Pros Cons • Works across all browsers • Less server overhead and resource consumption • We still have to make connections on a regular basis.
  19. 19. Method #3: Server Sent Events var source = new EventSource('Events'); source.onmessage = function (event) { // the server sent us data... }; Pros Cons • Server can push data to browser without requiring multiple connections. • One-way communication between the server and the client. Client cannot send messages to server. • No Internet Explorer support (at all)
  20. 20. Method #4: Web Sockets var websocket = new WebSocket(wsUri); websocket.onopen = function(evt) { onOpen(evt) }; websocket.onclose = function(evt) { onClose(evt) }; websocket.onmessage = function(evt) { onMessage(evt) }; websocket.onerror = function(evt) { onError(evt) }; Pros Cons • Bi-directional communication between the server and the client. • Holy grail! • Limited support on older browsers. • For .NET, requires IIS 8 or greater.
  21. 21. Introducing SignalR Connected Clients Transport SignalR Hub (Server)
  22. 22. How to get SignalR •NuGet •https://github.com/SignalR/SignalR 4/3/2015 @1kevgriff
  23. 23. Wiring up the server and client DEMO!!! 4/3/2015 @1kevgriff
  24. 24. Questions? 4/3/2015 @1kevgriff
  25. 25. Thanks for Attending! • Kevin Griffin • Owner, Griffin Consulting, Inc. CTO, Winsitter • Twitter: @1kevgriff Email: kevin@kevgriffin.com 4/3/2015 @1kevgriff

×