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

SignalR. Code, not toothpaste - TechDays Belgium 2012

on

  • 13,983 views

 

Statistics

Views

Total Views
13,983
Views on SlideShare
3,280
Embed Views
10,703

Actions

Likes
4
Downloads
126
Comments
0

18 Embeds 10,703

http://blog.maartenballiauw.be 8250
http://cartrackr.codeplex.com 1164
http://techmaster.vn 1076
http://blogs.realdolmen.com 82
http://feeds2.feedburner.com 65
http://fe.com 25
http://www.blog.maartenballiauw.be 9
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
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?
  • 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 ().setProgress(i);Thread.Sleep(100); } } }Addsome HTML:<!DOCTYPE html> Start work
  • 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();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)

SignalR. Code, not toothpaste - TechDays Belgium 2012 SignalR. Code, not toothpaste - TechDays Belgium 2012 Presentation Transcript

  • SignalR.Code, nottoothpaste MaartenRealtime client/server Balliauw Technical Consultantcommunication RealDolmen @maartenballiauw
  • R
  • Who am I?MaartenBalliauw@maartenballiauw View slide
  • Why real-time & how?Meet SignalRConnections and HubsClientsQ&A View slide
  • Why real-time & how?
  • Twitter – live searches/updatesStock streamersAuctionsLive scoresReal-time notificationsInteractive gamesCollaborative apps 6Live user analytics…
  • Never designed for real-time communications HTML5 WebSockets to the rescue, right?
  • 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!
  • HTTP/1.1 200 OKContent-Type: text/plainTransfer-Encoding: chunked<script>eval("... ")</script>0<script>eval("... ")</script>0
  • Fiddler hootsuite.comPolling interval
  • Fiddlerfacebook.com
  • Options!Forever FramePeriodic pollingLong pollingHTML5 WebSockets(Server-Sent events)
  • ARRR!Meet SignalR
  • Three-in-one!
  • http://github.com/signalr/signalr
  • where else!http://amzn.to/xrzS6j
  • Hello, SignalR
  • BONUS DEMO!
  • Connections and Hubs
  • 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
  • Hello, SignalRhubs
  • http://jabbr.net
  • Clients
  • On the server sideOn the client sideBut there’s more…
  • On the server side https://github.com/SignalR/SignalR/tree/master/SignalR.SelfHostOn the client side Is this a replacement for WCF?
  • DeckCast
  • SignalR is three-in-one!Connections & HubsConnect various clients
  • Make the web realtime!Install-Package SignalR
  • http://aka.ms/mbl-techhttp://aka.ms/mbl-tech/devprevhttp://aka.ms/mbl-tech/html5
  • Maarten Balliauw @maartenballiauwQ&A
  • 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