SignalR. Code, not toothpaste

Post on 20-Jan-2015

5.617 views 1 download

Tags:

description

Almost all HTML5 and web applications today make use of AJAX to communicate between client and server. AJAX is great with asynchronous operations, but what about real-time communication? How would you push a message from server to client? HTML5 WebSockets offer a solution to all of these questions but are not supported in every browser and every network environment. SignalR is the new cool kid on the block: it leverages WebSockets when supported and falls back to different mechanisms when they aren’t. In this session, I’ll show you where and how to use SignalR to create rich real-time applications in the browser. No toothpaste. Just code.

Transcript of SignalR. Code, not toothpaste

SignalR. Code, not toothpasteRealtime client/server communication

Maarten BalliauwTechnical ConsultantRealDolmen

@maartenballiauw

R

Maarten Balliauw

@maartenballiauw

Who am I?

Web & cloudWindows Azure

Agenda

Why real-time & how?Meet SignalRConnections and HubsClientsQ&A

Why real-time & how?

Users want the latest info, NOW!Twitter – live searches/updates Stock streamersAuctionsLive scoresReal-time notificationsInteractive gamesCollaborative appsLive user analytics…

6

HTTP is an old beast…

Never designed for real-time communicationsWeb is request-responseWeb is stateless

HTML5 WebSockets to the rescue, right?

HTML5 WebsocketsExtension 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!

HTTP/1.1 200 OKContent-Type: text/plainTransfer-Encoding: chunked

Forever Frame

Server tells client that response is chunckedClient keeps connection open untill server closes itServer pushes data to the client followed by \0Consumes server threads

Client<script>eval("... ")</script>\0

<script>eval("... ")</script>\0

Server

Periodic polling

Poll from time to time using AjaxDelay in communications due to polling intervalWastes bandwidth & latency

Polling interval

Client

Server

Fiddlerhootsuite.com

Long polling

Poll but don’t respond untill there’s dataPoll again after data received or after the connection times outConsumes server threads & connection resources

Client

Server

Fiddlerfacebook.com

Options!Forever FramePeriodic pollingLong pollingHTML5 WebSockets(Server-Sent events)

Meet SignalR

ARRR!

SignalR?

Three-in-one!“Persistent” client/server connection over best transportAbstracts away the transportProvides just one programming model

SignalR?David Fowler and Damian Edwards(two guys on the ASP.NET team)

Not an official Microsoft project (yet?)OSS project on Github, MIT licensedhttp://github.com/signalr/signalr

Simple to setup & just worksDepends on C# (not VB.NET), .NET 4+ and jQuery

Where do I get it?

where else!

http://amzn.to/xrzS6j

Hello, SignalRdemo

BONUS DEMO!Knockout.js & SignalR

What just happened?The server is broadcasting a message every few secondsClients are receiving messagesCode looks easyNo polling or whatsoever (at least not in my code)

Connections and Hubs

Two connection modelsPersistentConnectionCan communicate with 1..N clientsIs an IHttpHandlerRequires a route to be definedLimited to sending messagesYou define the “protocol”

HubsCan communicate with 1..N clientsAbstraction over PersistentConnectionRoute automatically mapped (/signalr/hubs)Can send messages and call methodsSignalR defines the protocol

Hello, SignalR hubsdemo

HubsHub methods can be called from clientClient methods can be called from hubTarget individual clientTarget all clientsTarget group of clients

http://jabbr.net

Clients

So far we’ve used…

On the server sideHost in any ASP.NET application (SignalR.Server)

On the client sideJavaScript (SignalR.JS)

But there’s more…

There’s a lot more!

On the server sideHost in any ASP.NET application (SignalR.Server)Use “SelfHost” - https://github.com/SignalR/SignalR/tree/master/SignalR.SelfHost Use Windows Azure

On the client sideJavaScript (SignalR.JS)Any .NET client (SignalR.Client)Any WP7 device (SignalR.Client.WP7)iOSAndroid

Is this a replacement for WCF?

DeckCastdemo

Session Summary

SignalR is three-in-one!“Persistent” client/server connection over best transportAbstracts away the transportProvides just one programming model

Connections & HubsConnect various clients

Make the web realtime!Install-Package SignalR

Be what’s next• Find everything here

http://aka.ms/mbl-tech• Visual Studio Developer Preview Downloads

http://aka.ms/mbl-tech/devprev• MSDN HTML5 Developer Center

http://aka.ms/mbl-tech/html5

Maarten Balliauw

@maartenballiauwQ&A

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

ResourcesMy bloghttp://blog.maartenballiauw.be SignalR on Githubhttp://github.com/signalr/signalr SignalR on NuGethttp://www.nuget.org/packages?q=signalr Websocketshttp://github.com/signalr/signalr.websocketsScale-out on Windows Azurehttp://vasters.com/clemensv/2012/02/13/SignalR+Powered+By+Service+Bus.aspxObjective C clienthttps://github.com/DyKnow/SignalR-ObjCAndroid client (using MonoDroid)https://github.com/SignalR/SignalR/pull/127