Building Real Time Web Applications with SignalR presented at NoVA Code Camp 2015.

1. Using SignalR to Build Real-
time Web Applications
Kevin Griffin - @1kevgriff
http://kevgriffin.com
April 3rd, 2015

2. Thank Our Sponsors without whom Today is not Possible
Platinum
Bronze
Silver

3. 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

4. About Kevin
• Kevin Griffin
• Independent Consultant
CTO, Winsitter
• Twitter: @1kevgriff
Email: kevin@kevgriffin.com
• Microsoft ASP.NET MVP
ASPInsider
4/3/2015 @1kevgriff

5. Simple Windows Server Monitoring
14-day Free Trial
http://winsitter.com

6. Schedule and Control
Windows Updates
Across Your
Infrastructure
http://patchtuesday.io

7. http://wintellectnow.com
Promo Code: GRIFFIN-13

8. Agenda
• A History of the Web
• Methods for Building Real Time Web Applications
• Introducing SignalR
4/3/2015 @1kevgriff

9. Defining Real-Time
First: How does the web work?
4/3/2015 @1kevgriff

10. History of the Web (version 1.0)
Request
Response

11. History of the Web (version 1.0)
Request
Response

12. History of the Web (Web 2.0)
Request
Response

13. History of the Web (Web 2.0)
Request
Response

14. Web 3.0 and Beyond
Request
Response
Continuous Connection

15. Defining Real-Time
Updates to the client without
interactions from the user.
4/3/2015 @1kevgriff

16. Real-Time In Action
Can you name an example of a “real-time” site?
4/3/2015 @1kevgriff

17. 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!

18. 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.

19. 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)

20. 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.

21. Introducing SignalR
Connected Clients
Transport
SignalR Hub (Server)

22. How to get SignalR
•NuGet
•https://github.com/SignalR/SignalR
4/3/2015 @1kevgriff

23. Wiring up the server and client
DEMO!!!
4/3/2015 @1kevgriff

24. Questions?
4/3/2015 @1kevgriff

25. Thanks for Attending!
• Kevin Griffin
• Owner, Griffin Consulting, Inc.
CTO, Winsitter
• Twitter: @1kevgriff
Email: kevin@kevgriffin.com
4/3/2015 @1kevgriff