1. SignalR Real Time with SignalR Jared Rhodes Senior Consultant Magenic

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

3. Atlanta Why SignalR? Clients include: – Javascript – C# – Android (SignalA)SignalA – IOS (Signalr-ObjC)Signalr-ObjC

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

5. 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.)

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

7. Atlanta Architecture

8. Atlanta Open Source Sites JabbR (https://jabbr.net/)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.https://github.com/davidfowl/jabbr ShootR (http://shootr.signalr.net/)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.

9. Atlanta Create a new ASP.NET application. You only need to use the MVC part to create the application

10. Atlanta Add SignalR to the web application using NuGet. Then wire up SignalR in the OWIN startup class.

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

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

13. Atlanta Add an input box, a submit button, and a section for messages.

14. Atlanta Add scripts to wire up hubs to submit and to receive messages.

15. Atlanta Add the jQuery UI library through NuGet. Then add a custom style for the blue box.

16. Atlanta Create a Hub that will propagate the X and Y coordinates between multiple clients.

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

18. Atlanta Add a WPF application to the solution. Once added add the attached XAML to the MainPage.xaml

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

20. Atlanta

21. Atlanta Finally add the code to respond to the movement of the blue square.

22. Atlanta Contact Info Blog – http://blog.qimata.com/ http://blog.qimata.com/ Email – JaredR@Magenic.com JaredR@Magenic.com

23. Atlanta Extended Presentation I will also be presenting this at the.NET users group in Atlanta on the 25 th of August. It will be an extended SignalR presentation showcasing how to utilize it with the internet of things..NET users group in Atlanta on the 25 th of August