SignalRReal Time with SignalR

Jared RhodesSenior ConsultantMagenic

Atlanta

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