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

SignalR. Code, not toothpaste - TechDays Belgium 2012






Total Views
Views on SlideShare
Embed Views



18 Embeds 10,685 8247 1164 1061 82 65 25 9 5 5 5 4 4 3 2 1 1 1 1



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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
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
  • Why real-time & how?Meet SignalRConnections and HubsClientsQ&A
  • 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
  • Options!Forever FramePeriodic pollingLong pollingHTML5 WebSockets(Server-Sent events)
  • ARRR!Meet SignalR
  • Three-in-one!
  • where else!
  • Hello, SignalR
  • 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
  • Clients
  • On the server sideOn the client sideBut there’s more…
  • On the server side 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
  • Maarten Balliauw @maartenballiauwQ&A
  • http://blog.maartenballiauw.be