1 / 21

Real-time Online Multiplayer Web Games with ASP.NET and SignalR

Real-time Online Multiplayer Web Games with ASP.NET and SignalR. Nikola Dimitroff. nikola_dimitroff@abv.bg. Creating Genres. c reatinggenres.com. Table of Contents. Multiplayer games structure Pre-HTML5 limitations Implementing bidirectional connections in the browser without plugins

viveca
Download Presentation

Real-time Online Multiplayer Web Games with ASP.NET and 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. Real-time Online Multiplayer Web Games with ASP.NETand SignalR Nikola Dimitroff nikola_dimitroff@abv.bg Creating Genres creatinggenres.com

  2. Table of Contents • Multiplayer games structure • Pre-HTML5 limitations • Implementing bidirectional connections in the browser without plugins • Ajax • Web services • Comet programming • Web sockets • SignalR

  3. Table of Contents (2) • SignalR in details • The API – Hubs, Persistent Connections • Installing and configuring SignalR • Creating a simple chat app with SignalR

  4. Multiplayer games structure

  5. Multiplayer games structure • Generally, multiplayer games implement the client-server model • The server controls the game => can validate user information and prevent hacks • Allows heavy and crucial calculations to be run on the server • Eases performance requirements on the client

  6. Multiplayer games structure (2) • Generally, multiplayer games implement the client-server model • Most often communication is bidirectional and based on TCP

  7. Multiplayer games structure (3) • But how do we do bidirectional communication on the web? • Remember: HTTP is stateless • Must find a workaround around the Page-By-Page model

  8. Implementing bidirectional communication

  9. Implementing bidirectional communication • Basic server polling techniques • Ajax (Asynchronous JavaScript and XML) • Web services • Both allow to send data to and retrieve data from a web server but employ large HTTP (or SOAP) overheads

  10. Implementing bidirectional communication (2) • Comet programming • Umbrella term for several techniques that imitate bidirectional communication • Ajax long-polling • Server-sent events • Hidden iframe

  11. Implementing bidirectional communication (3)

  12. Implementing bidirectional communication (4) • The WebSocket era • Allows full-duplex communication over TCP • Small headers and no overload on messages • Not supported by IE < 10 & most mobile browsers (iOS Safari 6.0+ and Blackberry 10.0+ are exceptions)

  13. Implementing bidirectional communication (4) • Introducing SignalR • Provides an abstraction around the connection between the server and the client • Detects and uses the most appropriate technology/technique based on what the client and the server support • Fallback order: • WebSockets • Server Sent Events, aka EventSource • Forever Frame (for Internet Explorer only) • Ajax long polling

  14. SignalR in details

  15. SignalR in details (1) • Installing and configuring SignalR – a How-To • Install SignalR using NuGet (Note: When searching for SignalR in NuGet make sure you tick “Include pre-release”) • Go to Global.asax and register SignalR by adding a call to RouteTabRouteTable.Routes.MapHubs() in the Application_Start method BEFORE anything else (example source code on the next slide)

  16. SignalR in details (2) • Installing and configuring SignalR – a How-To • And you`re done. In order to use SignalR now, include the following 3 scripts on every page you need: jQuery, jQuery.signalR& the dynamically generated /signalr/hubs protectedvoid Application_Start() { RouteTable.Routes.MapHubs(); //More code } <script src=http://code.jquery.com/jquery-1.8.2.min.js type="text/javascript"></script> <script src="Scripts/jquery.signalR-1.0.0-rc1.min.js" type="text/javascript"></script> <script src="/signalr/hubs"type="text/javascript"></script>

  17. SignalR in details (3) • The API • SignalR provides two main classes for communication – PersistentConnection and Hub • A hub is simply a message dispatcher around a PersistentConnection but it`s quite neat • Every client connected to SignalR will receive an unique Connection Id

  18. SignalR in details (4) • Setting up hubs • Create a class inheriting from Microsoft.AspNet.Signalr.Hub • Every non-static method that you write will becallable by the client • Sending messages to the client is as easy – use the Clients property of the hub to select the receiver(s) and call the method you want on the client

  19. SignalR in details (5) • Tricks: • Hooking up for a client side event after the connection has been made has no effect. • If you are using buttons hooked up with signalr, make sure to explicitly set their type to “button”. Otherwise the buttons will act as submits. • Hook up UI events on $.connection.start().done()

  20. SignalR demo

  21. Questions?

More Related