Nikola Dimitroff Creating Genres creatinggenres.com

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

3. SignalR in details  The API – Hubs, Persistent Connections  Installing and configuring SignalR  Creating a simple chat app with SignalR

 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

 Generally, multiplayer games implement the client-server model  Most often communication is bidirectional and based on TCP

 But how do we do bidirectional communication on the web?  Remember: HTTP is stateless  Must find a workaround around the Page-By- Page model

 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

 Comet programming  Umbrella term for several techniques that imitate bidirectional communication  Ajax long-polling  Server-sent events  Hidden iframe

 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 are exceptions)

 Introducing SignalRSignalR  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

 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)

 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 <script src= type="text/javascript"> <script src="Scripts/jquery.signalR rc1.min.js" type="text/javascript"> protected void Application_Start() { RouteTable.Routes.MapHubs(); //More code }

 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

 Setting up hubs  Create a class inheriting from Microsoft.AspNet.Signalr.Hub  Every non-static method that you write will be callable 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

 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()