SignalR - Code, not toothpaste - UGIALT.NET
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

SignalR - Code, not toothpaste - UGIALT.NET

on

  • 11,666 views

SignalR. Code, not toothpaste. (or: Using SignalR for realtime client/server communication)...

SignalR. Code, not toothpaste. (or: Using SignalR for realtime client/server communication)
Today’s users are interested in a rich experience where the terms client and server don’t mean a thing. They expect real-time action between both, no matter if the technology used is HTML5 websockets or something else. This session will cover SignalR and show you how it can be used to communicate in real time between the client and server, using HTML5 or not. Combine SignalR with ASP.NET MVC, jQuery and perhaps a sprinkle of Windows Azure and you’ll have an interesting, reliable and fast stack to build your real-time client-server and server-client communications. Join me on this journey between web, cloud and user. No toothpaste. Just code.

Statistics

Views

Total Views
11,666
Views on SlideShare
4,754
Embed Views
6,912

Actions

Likes
1
Downloads
83
Comments
0

20 Embeds 6,912

http://blog.maartenballiauw.be 4790
http://cartrackr.codeplex.com 1942
http://feeds2.feedburner.com 73
http://jabbr.net 53
http://blogs.realdolmen.com 18
http://jumpincamp.com 6
http://www.blog.maartenballiauw.be 5
http://feeds.feedburner.com 4
http://translate.googleusercontent.com 4
http://vyvojari.seznam.cz 3
http://a0.twimg.com 3
http://fe.com 2
http://www.jumpincamp.com 2
http://gallery.orchardproject.net 1
http://reader.googleusercontent.com 1
http://www.thecodebakery.com 1
http://fanyi.youdao.com 1
http://sam.swidder.com 1
http://cc.bingj.com 1
http://207.46.192.232 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • How do youimplement these today?
  • That’s a lot of options, a lot of thingsto account forand a lot of different programmingmodels. Are yougoingto do this?Are youstillwriting separategetDocumentByIdandAttachEventmethodstoworkwith the DOM? WhataboutjQuery?
  • Open VS2010Create a new ASP.NET Empty WebsiteInstall-PackageSignalRNote server library, client script, jQuery dependencyInstall-Package SignalR.Sample and show stock ticker in two browsersNowlet’s take things easy… How does all of thiswork?----------------- without Internet connection ----------------------------Add a class:public class TimeConnection : PersistentConnection{}Add a route:RouteTable.Routes.MapConnection("time", "time/{*operation}"); Addaninfinite loop:ThreadPool.QueueUserWorkItem(_ => { var connection = Connection.GetConnection();while (true) {connection.Broadcast(DateTime.Now.ToString());Thread.Sleep(1000); } });Addsome HTML:<!DOCTYPE html> The time is now!----------------- without Internet connection --------------------------------------------- with Internet connection ----------------------------Install-Package LinqToTwitterAdd a class:public class TweetsConnection : PersistentConnection{}Add a route:RouteTable.Routes.MapConnection("tweets", "tweets/{*operation}"); Addaninfinite loop:ThreadPool.QueueUserWorkItem(_ => { var connection = Connection.GetConnection();while (true) {using (TwitterContext context = new TwitterContext()) { var tweets = context.Search.Where(t => t.Type == SearchType.Search && t.Query == "#test").SingleOrDefault().Entries;connection.Broadcast(tweets.ToList()); }Thread.Sleep(5000); } });Addsome HTML:<!DOCTYPE html> ' + data[i].Content + ' Tweets ----------------- with Internet connection ----------------------------Notice we are sending data TO the client?
  • Open the previouslycreated sampleInstall-Package jQuery.UI.CombinedAdd a class: [HubName("worker")] public class WorkerHub : Hub { public voidstartProcessing(Event e) {Caller.notify("We'vestarted processing " + e.EventName);Clients.setProgress(10);for (int i = 0; i ().setProgress(i);Thread.Sleep(100); } } }Addsome HTML:<!DOCTYPE html> Start work
  • Open DeckCastShow peoplearoundandtellthemabout deck.jsShow the presenter mode andclient mode on the webStart a console based viewerStart the WP7 presenter app (focus/unfocus the “sample” box toconnect, click SLOWLY)

SignalR - Code, not toothpaste - UGIALT.NET Presentation Transcript

  • 1. JANUARY 23, 2012 | SLIDE 1
  • 2. www.realdolmen.com USING SIGNALR FOR REALTIME CLIENT/SERVER COMMUNICATIONJANUARY 23, 2012 | SLIDE 2
  • 3. WHO AM I?  Maarten Balliauw  Antwerp, Belgium  www.realdolmen.com  Focus on web  ASP.NET MVC, PHP, Azure, SignalR, …  MVP Windows Azure (formerly ASP.NET)  Co-founder of AZUG  http://blog.maartenballiauw.be  @maartenballiauwJANUARY 23, 2012 | SLIDE 4
  • 4. AGENDA  Why real-time & how?  Meet SignalR  Connections and Hubs  Clients  Q&AJANUARY 23, 2012 | SLIDE 5
  • 5. WHY REAL-TIME & HOW?JANUARY 23, 2012 | SLIDE 6
  • 6. USERS WANT THE LATEST INFORMATION, NOW!  Twitter – live searches/updates  Stock streamers  Auctions  Live scores  New e-mail  Real-time notifications  Interactive games  Collaborative apps  Analytics of users  …JANUARY 23, 2012 | SLIDE 7
  • 7. HTTP IS AN OLD BEAST…  Never designed for real-time communications  Web is request-response  Web is stateless  But…  HTML5 WebSockets to the rescue, right?JANUARY 23, 2012 | SLIDE 8
  • 8. HTML5 WEBSOCKETS  Extension to HTTP  Provide raw sockets over HTTP  Full-duplex  Traverses proxies  It’s still a draft…  Not every proxy server supports it   Not every webserver supports it   Not every browser supports it   They are raw sockets!JANUARY 23, 2012 | SLIDE 9
  • 9. PERIODIC POLLING Fiddler hootsuite.com  Bottom line:  Poll from time to time using Ajax  Delay in communications due to polling interval  Wastes bandwidth & latency JANUARY 23, 2012 | SLIDE 10
  • 10. LONG POLLING Fiddler facebook.com  Bottom line:  Poll but don’t respond untill there’s data  Poll again after data received or after the connection times out  Consumes server threads & connection resources JANUARY 23, 2012 | SLIDE 11
  • 11. WHICH LEAVES US WITH 3 OPTIONS FOR REAL-TIME  Periodic polling  Long polling  HTML5 WebSocketsJANUARY 23, 2012 | SLIDE 12
  • 12. ARRR! MEET SIGNALRJANUARY 23, 2012 | SLIDE 13
  • 13. SIGNALR?  Three-in-one!  “Persistent” client/server connection over best transport  Abstracts away the transport  Provides just one programming model  David Fowler and Damian Edwards (two guys on the ASP.NET team)  Not an official Microsoft project (yet?)  OSS project on Github, MIT licensed http://github.com/signalr/signalr  Simple to setup & just works  Depends on C# (not VB.NET), .NET 4+ and jQueryJANUARY 23, 2012 | SLIDE 15
  • 14. WHERE DO I GET IT? * * where else!JANUARY 23, 2012 | SLIDE 16
  • 15. HELLO, SIGNALR!JANUARY 23, 2012 | SLIDE 17
  • 16. WHAT JUST HAPPENED?  The server is broadcasting a message every few seconds  Clients are receiving messages  Code looks easy  No polling or whatsoever (at least in my code)JANUARY 23, 2012 | SLIDE 18
  • 17. CONNECTIONS AND HUBSJANUARY 23, 2012 | SLIDE 19
  • 18. TWO CONNECTION MODELS PersistentConnection Hubs  Can communicate with  Can communicate with 1..N clients 1..N clients  Is an IHttpHandler  Abstraction over  Requires a route to be PersistentConnection defined  Route automatically  Limited to sending mapped (/signalr/hubs) messages  Can send messages and  You define the call methods “protocol”  SignalR defines the protocolJANUARY 23, 2012 | SLIDE 20
  • 19. HELLO, SIGNALR HUBS!JANUARY 23, 2012 | SLIDE 21
  • 20. HUBS  Hub methods can be called from client  Client methods can be called from hub  Target individual client  Target all clients  Target group of clients  http://jabbr.netJANUARY 23, 2012 | SLIDE 22
  • 21. CLIENTSJANUARY 23, 2012 | SLIDE 23
  • 22. SO FAR WE’VE USED…  On the server side:  Host in any ASP.NET application (SignalR.Server)  On the client side:  JavaScript (SignalR.JS)  But there’s more…JANUARY 23, 2012 | SLIDE 24
  • 23. DECKCASTJANUARY 23, 2012 | SLIDE 25
  • 24. THAT’S A LOT MORE!  On the server side:  Host in any ASP.NET application (SignalR.Server)  Use “SelfHost” https://github.com/SignalR/SignalR/tree/master/SignalR.SelfHost  On the client side:  JavaScript (SignalR.JS)  Any .NET client (SignalR.Client)  Any WP7 device (SignalR.Client.WP7)  iOS  Android  Is this becoming a replacement for WCF?JANUARY 23, 2012 | SLIDE 26
  • 25. CONCLUSION  SignalR is three-in-one!  “Persistent” client/server connection over best transport  Abstracts away the transport  Provides just one programming model  Connections & Hubs  Connect various clients  Make the web real-time!JANUARY 23, 2012 | SLIDE 27
  • 26. RESOURCES  My blog: http://blog.maartenballiauw.be  SignalR on Github: http://github.com/signalr/signalr  SignalR on NuGet: http://www.nuget.org/packages?q=signalr  Websockets: http://github.com/signalr/signalr.websockets  Scale-out on Windows Azure: http://github.com/signalr/signalr.azure  Objective C client: https://github.com/DyKnow/SignalR-ObjC  Android client (using MonoDroid): https://github.com/SignalR/SignalR/pull/127JANUARY 23, 2012 | SLIDE 28
  • 27. Q&AJANUARY 23, 2012 | SLIDE 29
  • 28. THANK YOU FOR JOININGJANUARY 23, 2012 | SLIDE 30