REAL-TIME ONLINE MULTIPLAYER WEB

GAMES WITH ASP.NET AND SIGNALR

Nikola Dimitroff

nikola_dimitroff@abv.bg

Creating Genres

creatinggenres.com

TABLE OF CONTENTS1. Multiplayer games structure

Pre-HTML5 limitations

2. Implementing bidirectional connections in the browser without plugins

Ajax Web services Comet programming Web sockets SignalR

TABLE OF CONTENTS (2)3. SignalR in details

The API – Hubs, Persistent Connections Installing and configuring SignalR Creating a simple chat app with SignalR

MULTIPLAYER GAMES STRUCTURE

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

MULTIPLAYER GAMES STRUCTURE (2)

Generally, multiplayer games implement the client-server model Most often communication is bidirectional

and based on TCP

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

IMPLEMENTING BIDIRECTIONAL COMMUNICATION

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

IMPLEMENTING BIDIRECTIONAL COMMUNICATION (2)

Comet programming Umbrella term for several techniques that

imitate bidirectional communication Ajax long-polling Server-sent events Hidden iframe

IMPLEMENTING BIDIRECTIONAL COMMUNICATION (3)

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)

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:WebSocketsServer Sent Events, aka EventSourceForever Frame (for Internet Explorer only)Ajax long polling

SIGNALR IN DETAILS

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)

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

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

protected void Application_Start(){

RouteTable.Routes.MapHubs();//More code

}

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

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

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

SIGNALR DEMO

QUESTIONS?