TechEd North America 2014, Houston
Building Real-Time Applications with ASP.NET SignalR – Brady Gaster

Day 3, 14 May 2014, 8:30AM-9:45AM (DEV-B416)

Disclaimer: This post contains my own thoughts and notes based on attending TechEd North America 2014 presentations. Some content maps directly to what was originally presented. Other content is paraphrased or represents my own thoughts and opinions and should not be construed as reflecting the opinion of either Microsoft, the presenters or the speakers.

Executive Summary—Sean’s takeaways

• SignalR is a mechanism for real-time communication between web server and client(s)
• You code to abstraction that is unaware of capabilities on either server or clients
• SignalR automatically uses the most appropriate protocol to accomplish real-time
• Basic idea
  • Something happens in one browser (or on server) and you can inform all current web clients immediately
• In action
  • Move rectangle around in one browser and you immediately see it moved in all other browsers
• New Browser Link feature implemented using SignalR
• Practical applications
  • Web Chat, Hit Counter
  • Real-Time display of some central data store

Full video

Brady Gaster – Program Manager, Azure SDK & Visual Studio Web Tools Publishing, Microsoft

@bradygaster
bradyg@microsoft.com

www.bradygaster.com

Main web page for SignalR – www.asp.net/signalr

https://github.com/signalr/signalr

When he first saw SignalR, “everything changed”

• Always open source

Agenda

• What is SignalR
  • After you see it, everything starts looking like a nail
  • For real-time HTTP
  • Might lose 1/100 messages
  • Not for pub-sub with queues—not for durable messaging
  • Don’t replace all your REST APIs with SignalR
  • Browser Link uses SignalR
• Hub Class & jQuery Plugin
• SignalR and AngularJS
• SignalR .NET Client
• Calling SignalR Hub methods on the server
• Authorization with SignalR
• Scaling SignalR in web farms
• Self-hosting SignalR using OWIN

SignalR is an abstraction that intelligently decides how to enable real-time over HTTP

• But HTTP is stateless protocol, not really designed for real-time
• You write to an abstraction

Demo – SignalR in action – SignalR Hub and jQuery plugin

• New project, ASP.NET Web app
• HitCounter app
• Install NuGet pkg – Manage NuGet, “Microsoft ASP.NET SignalR”
  • If you want SignalR in web app
  • .NET Client – for server-side
• Readme.txt shows up
  • Uses Owin, hosted in Owin, no global.asax stuff
  • “Map your hubs”
• Add file – “OWIN Startup class”
  • App.MapSignalR(); — how to route request to hub
• Add | SignalR Hub Class
  • HitCounterHub : Hub
  • HubName “hitCounter”
  • Public method RecordHit
    • Add to hit count
    • this.Clients.All (or Caller, or Others)
    • .onHitRecorded
• Hub/Spoke mode
• “Once I learned how to use SignalR, dynamic made a lot more sense”
• Client-side web page
  • Add in jQuery, jQuery.signalR
• Javascript, function
  • Create connection with $.hubConnection
  • createHubProxy(‘hitCounter’)
  • hub.on(‘onHitRecorded’) => callback for when hub calls this method
  • Define function that updates counter ** scode 8:49 **
  • Start connection and then invoke method on hub
• SignalR allows sending message out of the client

Demo – Know when clients disconnect

• In Hub class, define OnDisconnected
• Server will know when something disconnected

SignalR on old-school servers & clients

• Old-school—polling
• SignalR will actually do polling on older browsers that don’t support newer constructs that allow event handling
• HTML Client starts up, asks server if it can do real-time, web sockets

SignalR built almost entirely on async, so won’t block threads back to server

• E.g. stress testing team/tool
• SignalR, first thing that fell down was the network card

Demo – Move Shape

• Moving shape in one browser, you see it move in all browsers
• URL shows “foreverFrame” in URL
• SignalR figured out best mechanism
• Then enable web sockets
  • Now no foreverFrame in URL, but using web sockets

Demo – SignalR with Angular

• jQuery and Angular play well together
• Trace hub – no code
• Connect trace hub to listener
• Create Angular factory, signalRService
• Client dumps out trace messages as 2^nd browser hits pages

Demo – Using SignalR’s Native .NET Client – MoveShape with Kinect

• Daemon on server, pulls in SignalR.Client
• JavaScript and .NET clients have parity
• HubConnection created on server
• Console app that patches Kinect into SignalR on the server
• Moves shape with his hand

Demo – Calling a SignalR Hub from the Server

• Real-time location tracking
• As people connect, pins show up on the map in real-time
• As people hit site, it’s calling server to add location info
• GetHubContext<MappingHub> – gives instance of sub back to client, so that he can call methods on it

Demo – Authorization with SignalR

• You’ll generally want to authorize clients
• Server calls client to say “hello”
• Put Authorize attribute on hub—can’t use hub unless logged in
• You only want to let people use hub if they are authorized

Hubs are server-bound, so you’ll need to use a backplane if you’re running a web farm

• E.g. if you’re running multiple instances on Azure

How do Backplanes Work?

• By default, messages back out to client only go to clients on that server
• Backplane
  • Redis or SQL
• Client requests go all the way to backplane, then out to all web servers

Demo – Using a SignalR Backplane – Chat App

• In Startup, SetupScaleOut
• DependencyResolver.UseSqlServer
• Same site hosted on two instances of IIS
• Enable backplane, hit different servers from different browsers
• Now messages show up in both browsers

Demo – Self-Hosting SignalR Using OWIN

• Bring OWIN self-hosting and SignalR self-hosting (NuGet packets)
• Host in .exe
• SignalR.SelfHost package
• app.UseCors (authorization)
  • Prior to MapSignalR