0
SignalR.Code, nottoothpaste               MaartenRealtime client/server   Balliauw                         Technical Consu...
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 app...
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 suppor...
HTTP/1.1 200 OKContent-Type: text/plainTransfer-Encoding: chunked<script>eval("... ")</script>0<script>eval("... ")</scrip...
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          ...
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...
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/si...
SignalR. Code, not toothpaste - TechDays Belgium 2012
SignalR. Code, not toothpaste - TechDays Belgium 2012
SignalR. Code, not toothpaste - TechDays Belgium 2012
Upcoming SlideShare
Loading in...5
×

SignalR. Code, not toothpaste - TechDays Belgium 2012

14,006

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
14,006
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
130
Comments
0
Likes
4
Embeds 0
No embeds

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&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?
  • TweetsusingKnockoutJS
  • 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;
  • 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; }
  • 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 of "SignalR. Code, not toothpaste - TechDays Belgium 2012"

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

      Clipping is a handy way to collect important slides you want to go back to later.

    ×