SignalR
Real Time with SignalR
Jared Rhodes
Senior Consultant
Magenic
What is SignalR?
• ASP.NET SignalR is a library for ASP.NET developers that simplifies the
process of adding real-time web functionality to applications.
• SignalR handles connection management automatically, and lets you
broadcast messages to all connected clients simultaneously, like a chat
room.
• You can also send messages to specific clients. The connection between
the client and server is persistent, unlike a classic HTTP connection, which
is re-established for each communication.
Atlanta
Why SignalR?
• Clients include:
– Javascript
– C#
– Android (SignalA)
– IOS (Signalr-ObjC)
Atlanta
Transports
• HTML 5 Transports
– WebSocket - WebSocket is the only transport that establishes a true
persistent, two-way connection between client and server. However,
WebSocket also has the most stringent requirements; it is fully
supported only in the latest versions of Microsoft Internet Explorer,
Google Chrome, and Mozilla Firefox, and only has a partial
implementation in other browsers such as Opera and Safari.
Atlanta
Transports
– Server Sent Events - Commonly used to send message updates or
continuous data streams to a browser client and designed to enhance
native, cross-browser streaming through a JavaScript API called
EventSource, through which a client requests a particular URL in order
to receive an event stream. (if the browser supports Server Sent
Events, which is basically all browsers except Internet Explorer.)
Atlanta
Transports
• Comet Transports
– Forever Frame - (for Internet Explorer only). Forever Frame creates a
hidden IFrame which makes a request to an endpoint on the server
that does not complete. The server then continually sends script to the
client which is immediately executed, providing a one-way realtime
connection from server to client.
– AJAX long polling - Long polling does not create a persistent
connection, but instead polls the server with a request that stays open
until the server responds, at which point the connection closes, and a
new connection is requested immediately.
Atlanta
Architecture
Atlanta
Open Source Sites
• JabbR (https://jabbr.net/)
– JabbR is an open source, real-time web chat system built using ASP.NET
and SignalR. Source code is at https://github.com/davidfowl/jabbr.
• ShootR (http://shootr.signalr.net/)
– ShootR is an open source, real-time, multi-player HTML5 space shooter
game, using SignalR for real-time server-client communications. Source
code is at https://github.com/NTaylorMullen/ShootR.
Atlanta
Create a new ASP.NET application. You only need to use
the MVC part to create the application
Atlanta
Add SignalR to the web application using NuGet.
Then wire up SignalR in the OWIN startup class.
Atlanta
Create a Hubs folder and then create a class that inherits from SignalR
Hub. Call it ChatHub and create a method named SendMessage as below.
Atlanta
Add Signalr jQuery scripts to the proper page (in this case the
layout page), the add SignalR Hubs scripts to the proper page.
We add jQuery UI for the next example. You do not have to
add it for the chat example.
Atlanta
Add an input box, a submit button, and a section for messages.
Atlanta
Add scripts to wire up hubs to submit and to receive messages.
Atlanta
Add the jQuery UI library through NuGet.
Then add a custom style for the blue box.
Atlanta
Create a Hub that will propagate the X and
Y coordinates between multiple clients.
Atlanta
Create a div for the draggable block and wire it up with the following attached
scripts. $.connection.chatHub.client is for all methods that will be invoked on the
client in response to server side. $.connection.chatHub.server is for all methods
the client can invoke on the server
Atlanta
Add a WPF application to the solution. Once added
add the attached XAML to the MainPage.xaml
Atlanta
Add the MoveThumb control to your project to allow for movement of
the blue square. Within the MoveThumb class, SignalR will be wired up
so that when the square is moved, it will notify the Hub and so that
when the hub is updated it updates the square.
To connect to the Hub we will need to add the SignalR .NET client to the
project. Once that is added we can use the code from the next slide to
implement it.
Atlanta
Atlanta
Finally add the code to respond to the movement of the
blue square.
Atlanta
Contact Info
• Blog
– http://blog.qimata.com/
• Email
– JaredR@Magenic.com
Atlanta
Extended Presentation
I will also be presenting this at the .NET users group in Atlanta on the 25th of
August. It will be an extended SignalR presentation showcasing how to
utilize it with the internet of things.
Atlanta