Nikola Dimitroff [email protected]

Creating Genres creatinggenres.com

1.

2.

 Multiplayer games structure Pre-HTML5 limitations      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 10.0+ are exceptions)

 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

 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 protected void { Application_Start() RouteTable .Routes.MapHubs(); //More code  } 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

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