web sockets and signalr building the real time web - chris alcock
TRANSCRIPT
![Page 1: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/1.jpg)
Web Sockets and SignalR Building the Real Time Web
DDD South West
Saturday 26th May 2012
Chris Alcock
@calcock - http://TheMorningBrew.Net
![Page 2: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/2.jpg)
Agenda
• Introduction – What is Real Time? Interactive?
• Web Sockets
– Who What When How?
– Examples (Client and Server)
• SignalR
– Who What When How?
– Examples
• Web Sockets and SignalR
@calcock - http://TheMorningBrew.Net
![Page 3: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/3.jpg)
Real Time? Interactive?
• Real Time – Stock Market
– Weather
• Interactive – Chat
– Auctions
• How do we handle these on the web?
@calcock - http://TheMorningBrew.Net
![Page 4: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/4.jpg)
Web Sockets - What
• What is a Socket?
• Why ‘Web’ Sockets?
• W3C Standard – Version 13, RFC 6455
• Part of ‘HTML5’
• Limited Support in Browsers today
– RFC 6455 only implemented in latest browsers
@calcock - http://TheMorningBrew.Net
![Page 5: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/5.jpg)
Web Sockets - How
• Normal HTTP Request, Firewall Friendly
• Socket connection negotiated using Upgrade headers
• Two way, traditional sockets, can stream data
• Supports Cross Domain Requests
• ws://server:port/resourceName?queryString
• wss://server:port/resourceName?queryString
@calcock - http://TheMorningBrew.Net
![Page 6: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/6.jpg)
Web Socket Connection
Request GET http://localhost:12345/ HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: localhost:12345
Origin: http://localhost:50476
Sec-WebSocket-Key: 9wYvPVuDBcdZyz0+Xzlgjg==
Sec-WebSocket-Version: 13
Response HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: VSe8UdgTAkwh7bHFNHT8ECx7+CM=
@calcock - http://TheMorningBrew.Net
![Page 7: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/7.jpg)
Web Sockets – Client API
• new WebSocket(url)
• onopen
• onclose
• onerror
• onmessage
• close
• send
• readyState – Connecting, Open, Closing, Closed
@calcock - http://TheMorningBrew.Net
![Page 8: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/8.jpg)
Demo
Web Sockets Client API
@calcock - http://TheMorningBrew.Net
![Page 9: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/9.jpg)
Demo – Web Sockets Client API
We looked at: • Making a WebSocket Connection • Connection and Disconnection Events • Sending Data • Receiving Data • Watching Connection in Fiddler
@calcock - http://TheMorningBrew.Net
![Page 10: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/10.jpg)
Web Sockets - Server
• Many server implementations available
• Support coming in .NET 4.5
• HttpContext.IsWebSocketRequest
• HttpContext.AcceptWebSocket
• Use Microsoft.WebSockets NuGet Package for additional helpers
@calcock - http://TheMorningBrew.Net
![Page 11: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/11.jpg)
Demo
Web Sockets Server API – Windows 8
@calcock - http://TheMorningBrew.Net
![Page 12: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/12.jpg)
Demo – Web Sockets Server API
We looked at: • .Net 4.5 WebSockets Functionality • Microsoft.WebSockets Package • Implemented Web Sockets Handler • Requirement for Full IIS
@calcock - http://TheMorningBrew.Net
![Page 13: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/13.jpg)
Web Sockets – When
• Levels of support across platforms
• Performance
• Low level control of messages sent
• Open standards
• Support in .NET
– Windows 8 Support
– Azure – not until Win8 Deployed
@calcock - http://TheMorningBrew.Net
![Page 14: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/14.jpg)
SignalR - What
• ‘Async library for .NET to help build real-time, multi-user interactive web applications.’
• Open Source, hosted on GitHub – currently on 0.5 release
• Damian Edwards and David Fowler (ASP.NET Team @ Microsoft)
• Get it from NuGet • .NET & Mono, Clients for a number of platforms • Uses Dynamic, jQuery, Task Parallel Library, service
location and other neat things!
@calcock - http://TheMorningBrew.Net
![Page 15: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/15.jpg)
SignalR – What
• Two Types of Connection – Persistent Connection
– Hub Connection
• Supports multiple methods of connecting (transports) – Ajax Long Polling, Web Sockets, Forever Frame (IE
Only), Server Sent Events
• More than just connection – Makes Client / server interaction seamless
@calcock - http://TheMorningBrew.Net
![Page 16: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/16.jpg)
SignalR Persistent Connections
• Basis of all SignalR services • Lower level API • Similar to WebSockets API, having:
– Events for: • Connect • Disconnect • Receive • Error
– Methods for: • Send • Broadcast
@calcock - http://TheMorningBrew.Net
![Page 17: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/17.jpg)
Hub API
• What is a Hub?
• Server / Client – Make method calls between each
– Share variables
– Serialisation
– Capture connect / disconnect
• Server Implementation uses Hub base class – Dynamic types used for proxy
• Clients vary in in how API presented
@calcock - http://TheMorningBrew.Net
![Page 18: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/18.jpg)
Demo
SignalR Hub Connections
@calcock - http://TheMorningBrew.Net
![Page 19: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/19.jpg)
Demo – SignalR Hub Connections
We looked at: • Server Implementation of Hub • Use of HubName attribute • Caller • Reference Client Library and Hubs • Calling methods on server from client (and vice versa)
@calcock - http://TheMorningBrew.Net
![Page 20: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/20.jpg)
SignalR in Web Applications
• Introduce to replace periodic polling
– Don’t have to go ‘All In’ – can just use SignalR for notification
• Build interactive types of application – chat, enhance LOB
@calcock - http://TheMorningBrew.Net
![Page 21: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/21.jpg)
Demo
SignalR Web Application
@calcock - http://TheMorningBrew.Net
![Page 22: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/22.jpg)
Demo – SignalR Web Application
We looked at: • Waiting on Async operations • Casing of Methods called from JavaScript • Setting variables on Hub • Clients property to call methods on all client • Discussed Connection Groups • Serialized Parameters
@calcock - http://TheMorningBrew.Net
![Page 23: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/23.jpg)
SignalR and Hub Considerations
• Must wire up methods client side before connecting • New hub on each request • Store server state yourself – static dictionary • Transports can timeout • Hub communication isn’t limited to code in the hub • Think about Server
– lots of concurrent connections – optimise settings
• Max Concurrent Connections • Max Concurrent Requests Per CPU • Request Queue Limit
@calcock - http://TheMorningBrew.Net
![Page 24: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/24.jpg)
SignalR – Other clients
• SignalR – JavaScript – .NET – WinRT – Silverlight – Windows Phone 7.0,7.1
• Community – iOS – MonoTouch – Java – Android – .NET Micro Framework
@calcock - http://TheMorningBrew.Net
![Page 25: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/25.jpg)
Demo
SignalR on Windows Phone
@calcock - http://TheMorningBrew.Net
![Page 26: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/26.jpg)
Demo – SignalR on Windows Phone
We looked at: • Windows Phone Client for SignalR • Called remote methods from phone • Called local methods from server
@calcock - http://TheMorningBrew.Net
![Page 27: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/27.jpg)
SignalR Hosting Options
• Windows and .NET or Mono
• ASP.NET
• Self Host
• OWIN
• Scale out to Webfarm – Redis
– Azure Queues
@calcock - http://TheMorningBrew.Net
![Page 28: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/28.jpg)
SignalR *and* WebSockets
• Web Sockets is an available transport
• Only works on Win8 – needs OS Web Sockets Support
• Broken in current 0.5 release
– Can get it working using a build from source
• Web sockets give good performance Client - Server
@calcock - http://TheMorningBrew.Net
![Page 29: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/29.jpg)
Demo
SignalR and Web Sockets
@calcock - http://TheMorningBrew.Net
![Page 30: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/30.jpg)
Demo – SignalR and Web Sockets
We looked at: • Source Build Required Currently • No Change to Hub Implementation • Specifying Transports to use • Performance
@calcock - http://TheMorningBrew.Net
![Page 31: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/31.jpg)
SignalR Summary
• Easy to build great client server applications
• Range of connections possible
• Smooth upgrade of transports
• Good range of client support
• Scale-out and Performance being worked on
• Vibrant community
@calcock - http://TheMorningBrew.Net
![Page 32: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/32.jpg)
Comparison
Web Sockets
• Low Level
• Cross Platform
• Client & Server must support Web Sockets
• Performs well – lightweight data frames
• Raw data frames
SignalR
• High Level API
• .NET & Mono
• Range of Transports with fallback
• Performance varies due to transport
• Supports serialisation of objects
@calcock - http://TheMorningBrew.Net
![Page 33: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/33.jpg)
Resources Web Sockets http://www.w3.org/TR/websockets/
http://tools.ietf.org/html/rfc6455
https://github.com/Olivine-Labs/Alchemy-Websockets
http://msdn.microsoft.com/en-us/hh969243.aspx
http://buildnewgames.com/websockets/
SignalR
http://www.signalr.net
http://github.com/signalr
http://weblogs.asp.net/davidfowler
http://damianedwards.wordpress.com/
http://stackoverflow.com/questions/tagged/signalr
http://jabbr.net/
@calcock - http://TheMorningBrew.Net
![Page 34: Web Sockets and SignalR Building the Real Time Web - Chris Alcock](https://reader035.vdocuments.mx/reader035/viewer/2022071523/613d05240c37c14a830d2c22/html5/thumbnails/34.jpg)
THANK YOU The End
@calcock - http://TheMorningBrew.Net
Chris Alcock @calcock [email protected] http://TheMorningBrew.NET Slides: http://cwa.me.uk
http://www.flickr.com/photos/gahjr2000/330593008/sizes/l/in/photostream/