Advertisement
Advertisement

More Related Content

Advertisement

More from Maarten Balliauw(20)

Advertisement

SignalR. Code, not toothpaste - TechDays Belgium 2012

  1. SignalR. Code, not toothpaste Maarten Realtime client/server Balliauw Technical Consultant communication RealDolmen @maartenballiauw
  2. R
  3. Who am I? Maarten Balliauw @maartenballiauw
  4. Why real-time & how? Meet SignalR Connections and Hubs Clients Q&A
  5. Why real-time & how?
  6. Twitter – live searches/updates Stock streamers Auctions Live scores Real-time notifications Interactive games Collaborative apps 6 Live user analytics …
  7. Never designed for real-time communications HTML5 WebSockets to the rescue, right?
  8. 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!
  9. HTTP/1.1 200 OK Content-Type: text/plain Transfer-Encoding: chunked <script>eval("... ")</script>0 <script>eval("... ")</script>0
  10. Fiddler hootsuite.com Polling interval
  11. Fiddler facebook.com
  12. Options! Forever Frame Periodic polling Long polling HTML5 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 Hubs Can communicate with 1..N clients Can communicate with 1..N clients Is an IHttpHandler Abstraction over PersistentConnection Requires a route to be defined Route automatically mapped (/signalr/hubs) Limited to sending messages Can send messages and call methods You define the “protocol” SignalR defines the protocol
  21. Hello, SignalR hubs
  22. http://jabbr.net
  23. Clients
  24. On the server side On the client side But there’s more…
  25. On the server side https://github.com/SignalR/SignalR/tree/master/SignalR.SelfHost On the client side Is this a replacement for WCF?
  26. DeckCast
  27. SignalR is three-in-one! Connections & Hubs Connect various clients
  28. Make the web realtime! Install-Package SignalR
  29. http://aka.ms/mbl-tech http://aka.ms/mbl-tech/devprev http://aka.ms/mbl-tech/html5
  30. Maarten Balliauw @maartenballiauw Q&A
  31. http://blog.maartenballiauw.be http://github.com/signalr/signalr http://www.nuget.org/packages?q=signalr http://github.com/signalr/signalr.websockets http://vasters.com/clemensv/2012/02/13/SignalR+Powered+By+Service+Bus.aspx https://github.com/DyKnow/SignalR-ObjC https://github.com/SignalR/SignalR/pull/127

Editor's Notes

  1. How do youimplement these today?
  2. 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?
  3. 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&lt;TimeConnection&gt;(&quot;time&quot;, &quot;time/{*operation}&quot;); Addaninfinite loop:ThreadPool.QueueUserWorkItem(_ =&gt; { var connection = Connection.GetConnection&lt;TimeConnection&gt;();while (true) {connection.Broadcast(DateTime.Now.ToString());Thread.Sleep(1000); } });Addsome HTML:&lt;!DOCTYPE html&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script src=&quot;Scripts/jquery-1.6.4.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; &lt;script src=&quot;Scripts/jquery.signalR.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; $(function () { var connection = $.connection(&apos;time&apos;);connection.received(function(data) { $(&apos;h1&apos;).text(&apos;The time is &apos; + data); });connection.start(); }); &lt;/script&gt;&lt;/head&gt;&lt;body&gt; &lt;h1&gt;The time is now!&lt;/h1&gt;&lt;/body&gt;&lt;/html&gt;----------------- without Internet connection --------------------------------------------- with Internet connection ----------------------------Install-Package LinqToTwitterAdd a class:public class TweetsConnection : PersistentConnection{}Add a route:RouteTable.Routes.MapConnection&lt;TweetsConnection&gt;(&quot;tweets&quot;, &quot;tweets/{*operation}&quot;); Addaninfinite loop:ThreadPool.QueueUserWorkItem(_ =&gt; { var connection = Connection.GetConnection&lt;TweetsConnection&gt;();while (true) {using (TwitterContext context = new TwitterContext()) { var tweets = context.Search.Where(t =&gt; t.Type == SearchType.Search &amp;&amp; t.Query == &quot;#test&quot;).SingleOrDefault().Entries;connection.Broadcast(tweets.ToList()); }Thread.Sleep(5000); } });Addsome HTML:&lt;!DOCTYPE html&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script src=&quot;Scripts/jquery-1.6.4.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; &lt;script src=&quot;Scripts/jquery.signalR.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; $(function () { var connection = $.connection(&apos;tweets&apos;);connection.received(function (data) { $(&apos;#tweetsList&apos;).html(&apos;&apos;);for (var i = 0; i &lt; data.length; i++) { $(&apos;#tweetsList&apos;).append($(&apos;&lt;li&gt;&apos; + data[i].Content + &apos;&lt;/li&gt;&apos;)); } });connection.start(); }); &lt;/script&gt;&lt;/head&gt;&lt;body&gt; &lt;h1&gt;Tweets&lt;/h1&gt; &lt;ulid=&quot;tweetsList&quot;&gt;&lt;/ul&gt;&lt;/body&gt;&lt;/html&gt;----------------- with Internet connection ----------------------------Notice we are sending data TO the client?
  4. TweetsusingKnockoutJS
  5. Open the previouslycreated sampleInstall-Package jQuery.UI.CombinedAdd a class: [HubName(&quot;worker&quot;)] public class WorkerHub : Hub { public voidstartProcessing(Event e) {Caller.notify(&quot;We&apos;vestarted processing &quot; + e.EventName);Clients.setProgress(10);for (int i = 0; i &lt;= 100; i++) {SignalR.Hubs.Hub.GetClients&lt;WorkerHub&gt;().setProgress(i);Thread.Sleep(100); } } }Addsome HTML:&lt;!DOCTYPE html&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;Content/themes/base/jquery.ui.all.css&quot; /&gt; &lt;script src=&quot;Scripts/jquery-1.6.4.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; &lt;script src=&quot;Scripts/jquery-ui-1.8.16.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; &lt;script src=&quot;Scripts/jquery.signalR.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; &lt;script src=&quot;signalr/hubs&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; $(function () { var workerHub = $.connection.worker; $(&apos;#progressbar&apos;).progressbar({ value: 0 }); $(&apos;#startWorkTrigger&apos;).bind(&apos;click&apos;, function () {workerHub.startProcessing({ eventName: &apos;UAN12&apos; }) .fail(function (e) { alert(&quot;An error occured: &quot; + e); }); });workerHub.notify = function (message) { $(&apos;#notifications&apos;).html(message); };workerHub.setProgress = function (progress) { $(&apos;#progressbar&apos;).progressbar({ value: progress }); }; $.connection.hub.start(); }); &lt;/script&gt;&lt;/head&gt;&lt;body&gt; &lt;div id=&quot;progressbar&quot; style=&quot;width: 200px;&quot;&gt;&lt;/div&gt; &lt;div id=&quot;notifications&quot; style=&quot;width: 200px;&quot;&gt;&lt;/div&gt; &lt;button id=&quot;startWorkTrigger&quot;&gt;Start work&lt;/button&gt;&lt;/body&gt;&lt;/html&gt;
  6. 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&lt;ItemViewModel&gt;();connection = new Connection(&quot;http://localhost:6502/tweets&quot;);connection.Received += data =&gt; Deployment.Current.Dispatcher.BeginInvoke(() =&gt; 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[&quot;Content&quot;].ToString(), &quot;&lt;.*?&gt;&quot;, string.Empty);this.Items.Add(new ItemViewModel() { LineOne = entry[&quot;Title&quot;].ToString().Substring(0, 12),LineTwo = ((JObject)entry[&quot;Author&quot;])[&quot;Name&quot;].ToString(), LineThree = content }); }this.IsDataLoaded = true; }
  7. 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)
Advertisement