1 / 23

SignalR

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.

oliver-nichols
Télécharger la présentation

SignalR

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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. Why SignalR? • Clients include: • Javascript • C# • Android (SignalA) • IOS (Signalr-ObjC)

  4. Transports • HTML 5 Transports • WebSocket- WebSocketis 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. 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. 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. Architecture

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

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

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

  11. 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. 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. Add an input box, a submit button, and a section for messages.

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

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

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

  17. 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. Add a WPF application to the solution. Once added add the attached XAML to the MainPage.xaml

  19. 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. Finally add the code to respond to the movement of the blue square.

  21. Contact Info • Blog • http://blog.qimata.com/ • Email • JaredR@Magenic.com

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

More Related