Games with ASP.Net and SignalR - Creating Genres team

bubblemessengerSecurity

Nov 5, 2013 (3 years and 7 months ago)

241 views

Nikola Dimitroff

nikola_dimitroff@abv.bg

Creating Genres

c
reatinggenres.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 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





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

}


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