Using SignalR to Build Real-time Web Applications

Kevin Griffin - @1kevgriff

http://kevgriffin.com

April 3rd, 2015

Thank Our Sponsors without whom Today is not Possible

Platinum

Bronze

Silver

Housekeeping…

• Thanks to our host

• Respect your speakers and fellow attendees:

Set mobile devices to vibrate or silent

• Fill out session evaluations• They are used in the drawings

• You must be present to win at the wrap-up

About Kevin

• Kevin Griffin

• Independent ConsultantCTO, Winsitter

• Twitter: @1kevgriffEmail: kevin@kevgriffin.com

• Microsoft ASP.NET MVPASPInsider

4/3/2015 @1kevgriff

Simple Windows Server Monitoring14-day Free Trial

http://winsitter.com

Schedule and Control Windows Updates

Across Your Infrastructure

http://patchtuesday.io

http://wintellectnow.com

Promo Code: GRIFFIN-13

Agenda

• A History of the Web

• Methods for Building Real Time Web Applications

• Introducing SignalR

4/3/2015 @1kevgriff

Defining Real-Time

First: How does the web work?

4/3/2015 @1kevgriff

History of the Web (version 1.0)

Request

Response

History of the Web (version 1.0)

Request

Response

History of the Web (Web 2.0)

Request

Response

History of the Web (Web 2.0)

Request

Response

Web 3.0 and Beyond

Request

Response

Continuous Connection

Defining Real-Time

Updates to the client without interactions from the user.

4/3/2015 @1kevgriff

Real-Time In Action

Can you name an example of a “real-time” site?

4/3/2015 @1kevgriff

Method #1: Interval

function updateInterface(){// go to the server, do something$.ajax({...});

setTimeout(10000, updateInterface);}

setTimeout(10000, updateInterface);

Pros

Cons

• Works across all browsers

• More connections, more overhead

• More overhead, more bandwidth

• Server strain!

Method #2: Long Polling

function startListening(){

// note: this call can take as long // as 120 seconds to return, depending // on browser timeouts.

$.ajax({url: “/blah”,success: function (data){

startListening();},failure: function (err){

startListening();},

});}

Pros

Cons

• Works across all browsers

• Less server overhead and resource

consumption

• We still have to make connections on a

regular basis.

Method #3: Server Sent Events

var source = new EventSource('Events');

source.onmessage = function (event) {// the server sent us data...

};

Pros

Cons

• Server can push data to browser

without requiring multiple

connections.

• One-way communication between the

server and the client. Client cannot

send messages to server.

• No Internet Explorer support (at all)

Method #4: Web Sockets

var websocket = new WebSocket(wsUri);

websocket.onopen = function(evt) { onOpen(evt)

}; websocket.onclose = function(evt) {

onClose(evt) }; websocket.onmessage = function(evt) {

onMessage(evt) }; websocket.onerror = function(evt) {

onError(evt) };

Pros

Cons

• Bi-directional communication between

the server and the client.

• Holy grail!

• Limited support on older browsers.

• For .NET, requires IIS 8 or greater.

Introducing SignalR

Connected Clients

Transport

SignalR Hub (Server)

How to get SignalR

•NuGet

•https://github.com/SignalR/SignalR

4/3/2015 @1kevgriff

Wiring up the server and clientDEMO!!!

4/3/2015 @1kevgriff

Questions?

4/3/2015 @1kevgriff

Thanks for Attending!

• Kevin Griffin

• Owner, Griffin Consulting, Inc.CTO, Winsitter

• Twitter: @1kevgriffEmail: kevin@kevgriffin.com

4/3/2015 @1kevgriff