Nikola Dimitroff
nikola_dimitroff@abv.bg
Creating Genres
creatinggenres.com
1.
Multiplayer games structure

2.
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-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()
{
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
<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>
 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()
