Games with ASP.Net and SignalR

Nikola Dimitroff
[email protected]
Creating Genres
Multiplayer games structure
Pre-HTML5 limitations
Implementing bidirectional connections in
the browser without plugins
Web services
Comet programming
Web sockets
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-ByPage 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()
//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
<script src=
<script src="Scripts/jquery.signalR-1.0.0-rc1.min.js"
<script src="/signalr/hubs" type="text/javascript"></script>
 The
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
 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
 Hook up UI events on $.connection.start().done()

similar documents