SignalR. Code, not toothpaste - TechDays Belgium 2012
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
14,142
On Slideshare
3,354
From Embeds
10,788
Number of Embeds
19

Actions

Shares
Downloads
127
Comments
0
Likes
4

Embeds 10,788

http://blog.maartenballiauw.be 8,278
http://cartrackr.codeplex.com 1,164
http://techmaster.vn 1,130
http://blogs.realdolmen.com 82
http://feeds2.feedburner.com 65
http://fe.com 25
http://www.blog.maartenballiauw.be 11
http://web.vabx.com 5
http://sam.swidder.com 5
http://translate.googleusercontent.com 5
http://www.jumpincamp.com 4
http://jumpincamp.com 4
http://feeds.feedburner.com 3
http://webcache.googleusercontent.com 2
http://www.thecodebakery.com 1
http://feedproxy.google.com 1
http://www.facebook.com 1
http://news.google.com 1
http://www.google.la 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 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<TimeConnection>("time", "time/{*operation}"); Addaninfinite loop:ThreadPool.QueueUserWorkItem(_ => { var connection = Connection.GetConnection<TimeConnection>();while (true) {connection.Broadcast(DateTime.Now.ToString());Thread.Sleep(1000); } });Addsome HTML:<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="Scripts/jquery.signalR.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var connection = $.connection('time');connection.received(function(data) { $('h1').text('The time is ' + data); });connection.start(); }); </script></head><body> <h1>The time is now!</h1></body></html>----------------- without Internet connection --------------------------------------------- with Internet connection ----------------------------Install-Package LinqToTwitterAdd a class:public class TweetsConnection : PersistentConnection{}Add a route:RouteTable.Routes.MapConnection<TweetsConnection>("tweets", "tweets/{*operation}"); Addaninfinite loop:ThreadPool.QueueUserWorkItem(_ => { var connection = Connection.GetConnection<TweetsConnection>();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><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="Scripts/jquery.signalR.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var connection = $.connection('tweets');connection.received(function (data) { $('#tweetsList').html('');for (var i = 0; i < data.length; i++) { $('#tweetsList').append($('<li>' + data[i].Content + '</li>')); } });connection.start(); }); </script></head><body> <h1>Tweets</h1> <ulid="tweetsList"></ul></body></html>----------------- with Internet connection ----------------------------Notice we are sending data TO the client?
  • TweetsusingKnockoutJS
  • 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 <= 100; i++) {SignalR.Hubs.Hub.GetClients<WorkerHub>().setProgress(i);Thread.Sleep(100); } } }Addsome HTML:<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <link rel="stylesheet" href="Content/themes/base/jquery.ui.all.css" /> <script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script> <script src="Scripts/jquery.signalR.js" type="text/javascript"></script> <script src="signalr/hubs" type="text/javascript"></script> <script type="text/javascript"> $(function () { var workerHub = $.connection.worker; $('#progressbar').progressbar({ value: 0 }); $('#startWorkTrigger').bind('click', function () {workerHub.startProcessing({ eventName: 'UAN12' }) .fail(function (e) { alert("An error occured: " + e); }); });workerHub.notify = function (message) { $('#notifications').html(message); };workerHub.setProgress = function (progress) { $('#progressbar').progressbar({ value: progress }); }; $.connection.hub.start(); }); </script></head><body> <div id="progressbar" style="width: 200px;"></div> <div id="notifications" style="width: 200px;"></div> <button id="startWorkTrigger">Start work</button></body></html>
  • Create a new Windows Phone 7.1 project using the “WP DataBound Application”Install-Package SignalR.Client.WP7Uninstall-Package NewtonSoft.Json -ForceInstall-Package NewtonSoft.Json -Version 4.0.3In MainViewModel, remove the contents in LoadData(): public void LoadData() { if (!connection.IsActive) {connection.Start(); } }Add a field:private Connection connection; In the constructor, preparetoreceive data. Note the Dispatcherto make sure the adding of the data happens on the UI thread: public MainViewModel() {this.Items = new ObservableCollection<ItemViewModel>();connection = new Connection("http://localhost:6502/tweets");connection.Received += data => Deployment.Current.Dispatcher.BeginInvoke(() => UpdateItems(data));connection.Start(); }Add the UpdateItemsmethod:protectedvoidUpdateItems(string data) {this.Items.Clear();JArray entries = JArray.Parse(data);foreach (JObject entry in entries) { string content = Regex.Replace(entry["Content"].ToString(), "<.*?>", string.Empty);this.Items.Add(new ItemViewModel() { LineOne = entry["Title"].ToString().Substring(0, 12),LineTwo = ((JObject)entry["Author"])["Name"].ToString(), LineThree = content }); }this.IsDataLoaded = true; }
  • 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)

Transcript

  • 1. SignalR.Code, nottoothpaste MaartenRealtime client/server Balliauw Technical Consultantcommunication RealDolmen @maartenballiauw
  • 2. R
  • 3. Who am I?MaartenBalliauw@maartenballiauw
  • 4. Why real-time & how?Meet SignalRConnections and HubsClientsQ&A
  • 5. Why real-time & how?
  • 6. Twitter – live searches/updatesStock streamersAuctionsLive scoresReal-time notificationsInteractive gamesCollaborative apps 6Live user analytics…
  • 7. Never designed for real-time communications HTML5 WebSockets to the rescue, right?
  • 8. Extension to HTTPProvide raw sockets over HTTPFull-duplexTraverses proxiesIt’s still a draft…Not every proxy server supports itNot every webserver supports itNot every browser supports itThey are raw sockets!
  • 9. HTTP/1.1 200 OKContent-Type: text/plainTransfer-Encoding: chunked<script>eval("... ")</script>0<script>eval("... ")</script>0
  • 10. Fiddler hootsuite.comPolling interval
  • 11. Fiddlerfacebook.com
  • 12. Options!Forever FramePeriodic pollingLong pollingHTML5 WebSockets(Server-Sent events)
  • 13. ARRR!Meet SignalR
  • 14. Three-in-one!
  • 15. http://github.com/signalr/signalr
  • 16. where else!http://amzn.to/xrzS6j
  • 17. Hello, SignalR
  • 18. BONUS DEMO!
  • 19. Connections and Hubs
  • 20. PersistentConnection HubsCan communicate with 1..N clients Can communicate with 1..N clientsIs an IHttpHandler Abstraction over PersistentConnectionRequires a route to be defined Route automatically mapped (/signalr/hubs)Limited to sending messages Can send messages and call methodsYou define the “protocol” SignalR defines the protocol
  • 21. Hello, SignalRhubs
  • 22. http://jabbr.net
  • 23. Clients
  • 24. On the server sideOn the client sideBut there’s more…
  • 25. On the server side https://github.com/SignalR/SignalR/tree/master/SignalR.SelfHostOn the client side Is this a replacement for WCF?
  • 26. DeckCast
  • 27. SignalR is three-in-one!Connections & HubsConnect various clients
  • 28. Make the web realtime!Install-Package SignalR
  • 29. http://aka.ms/mbl-techhttp://aka.ms/mbl-tech/devprevhttp://aka.ms/mbl-tech/html5
  • 30. Maarten Balliauw @maartenballiauwQ&A
  • 31. http://blog.maartenballiauw.behttp://github.com/signalr/signalrhttp://www.nuget.org/packages?q=signalrhttp://github.com/signalr/signalr.websocketshttp://vasters.com/clemensv/2012/02/13/SignalR+Powered+By+Service+Bus.aspxhttps://github.com/DyKnow/SignalR-ObjChttps://github.com/SignalR/SignalR/pull/127