Date post: | 18-Dec-2015 |
Category: |
Documents |
Upload: | clement-simon-hart |
View: | 218 times |
Download: | 1 times |
REAL-TIME ONLINE MULTIPLAYER WEB
GAMES WITH ASP.NET AND SIGNALR
Nikola Dimitroff
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?