building real time applications with asp.net signalr 2.0 by rachel appel
DESCRIPTION
Building Real Time Applications with ASP.NET SignalR 2.0 Rachel Appel .NET Conf UY 2014 http://netconf.uyTRANSCRIPT
![Page 1: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/1.jpg)
Building Real Time Applications with
ASP.NET SignalR 2.0
Rachel AppelAppel Consultinghttp://rachelappel.com [email protected]
![Page 2: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/2.jpg)
Agenda
• Overview of SignalR• Configure SignalR and Visual Studio• Hubs• Connections• Deployment
![Page 3: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/3.jpg)
Overview: What is SignlaR?
• Simplifies real time web development• ASP.NET Server and JavaScript Client
Libraries• Real-time persistent connection
abstraction over HTTP
• Simplicity • Reach• Performance
"Incredibly simply real-time web for .NET" – Damian Edwards, SignalR team
![Page 4: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/4.jpg)
Overview: What is SignalR?
• OWIN http://owin.org/ • Katana https://katanaproject.codeplex.com/
![Page 5: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/5.jpg)
Overview: Why Use SignalR?
• Types of Apps • Games, leaderboards• Social Applications• Business Collaboration• Stocks• Chat, messaging• Dashboards• Real time forms• Auctions
• Anything that needs live data
![Page 6: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/6.jpg)
Overview: Where you can use SignalR• HTML & ASP.NET apps• Windows Store & Phone• Any JavaScript client
![Page 7: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/7.jpg)
Overview: SignalR in Action
http://shootr.signalr.net http://JabbR.net
![Page 8: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/8.jpg)
Configure SignalR & Visual Studio
• http://www.asp.net/signalr • NuGet package• OWIN References • Scripts
• GitHub download
![Page 9: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/9.jpg)
SignalR Startup
using Owin;using Microsoft.Owin;[assembly: OwinStartup(typeof(SR3.Startup))]namespace SR3{ public class Startup { public void Configuration(IAppBuilder app) { app.MapSignalR(); } }}
![Page 10: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/10.jpg)
DEMO
• SignalR setup
![Page 11: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/11.jpg)
Overview: SignalR Namespaces
• Microsoft.AspNet.SignalR.Hub • http://msdn.microsoft.com/en-us/library/dn440565(v=vs.118).aspx
![Page 12: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/12.jpg)
Hubs
• Microsoft.AspNet.SignalR.Hub class• Server Side Library• Allows for duplex connectivity
![Page 13: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/13.jpg)
Hubs
• Declare public methods on a hub so that clients can call them.• Use the Microsoft.AspNet.SignalR.Hub.Clients property to access all
clients connected to this hub.• Call a function on the client• HubName attribute
![Page 14: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/14.jpg)
Hub Events
public override Task OnConnected(){ var id = Context.ConnectionId; return base.OnConnected();}
![Page 15: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/15.jpg)
Hubs: Transports
• A full duplex, TCP based protocol• Is not HTTP• Standardized RFC in 2011
![Page 16: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/16.jpg)
Hubs: Transports
• Transports• WebSockets is the only transport that establishes a true persistent, two-way
connection between client and server. • SSE/Events• AJAX Long Polling• Forever Frame (IE only)
• Transport selection process• $.connection.hub.logging = true; // to determine transport
![Page 17: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/17.jpg)
From this SO thread http://stackoverflow.com/questions/16983630/how-does-signalr-decide-which-transport-method-to-be-used
From this SO user, thomaswr http://stackoverflow.com/users/2207506/thomaswr
![Page 18: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/18.jpg)
DEMO
• Hubs
![Page 19: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/19.jpg)
SignalR Client Script Libraries
<script src="~/Scripts/jquery.signalR-2.0.2.min.js"></script> <script src="~/signalr/hubs"></script>
@Scripts.Render("~/bundles/jquery")
SignalR depends on jQuery
SignalR script references
![Page 20: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/20.jpg)
Connections
• Client Side• PersistentConnection• $.connection
![Page 21: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/21.jpg)
Connections: Communications
• Hub to Connection• Connection to Hub• Connection to Connection• Specific Connections
![Page 22: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/22.jpg)
DEMO
• Connecting to Hubs
![Page 23: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/23.jpg)
public class ChatHub : Hub{ public void Send(string name, string message) { // send to all Clients.All.sendMessage(name, message);
// send to specific client Clients.Client(Context.ConnectionId).sendMessage(message);
// send only to caller Clients.Caller.sendMessage(name, message);
// send to all but caller Clients.Others.sendMessage(name, message);
// excluding some Clients.AllExcept(connectionId1, connectionId2).sendMessage(name, message);
// send to a group Clients.Group(groupName). sendMessage(name, message); }}
![Page 24: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/24.jpg)
DEMO
• Connecting to specific Hubs
![Page 25: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/25.jpg)
Send data via QueryString
• Context.Request• Headers• QueryString
// .NET clientvar connection = new HubConnection("http://localhost:8080/", "data=12345");
// JavaScript client $.connection.hub.qs = "data=12345";
// Hub server codevar qs = Context.Request.QueryString["myInfo"].ToString();
![Page 26: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/26.jpg)
DEMO
• Using QueryStrings
![Page 27: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/27.jpg)
Connection Status
• Notify the client of slow or unavailable connectivity
$.connection.hub.connectionSlow(function () { notifyUserOfConnectionProblem(); })$.connection.hub.reconnecting(function () { notifyUserOfReconnection(); });
![Page 28: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/28.jpg)
SignalR Deployment
• Azure SDK• Deployment To-Do's• Enable WebSockets• Enable V 4.5
• Multiple Azure instances• http://
www.asp.net/signalr/overview/signalr-20/getting-started-with-signalr-20/using-signalr-with-windows-azure-web-sites
![Page 29: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/29.jpg)
![Page 30: Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel](https://reader036.vdocuments.us/reader036/viewer/2022062514/55876867d8b42a3d558b46dd/html5/thumbnails/30.jpg)
Thank You!
Rachel's Websitehttp://rachelappel.com
MSDN Modern Apps Columnhttp://msdn.microsoft.com/en-us/magazine/ee532098.aspx?sdmr=RachelAppel&sdmi=authors
WintellectNOW training videoshttp://bit.ly/RachelNOW