The document discusses the creation of multiplayer HTML5 games using WebSocket technology, which allows for full bi-directional communication over TCP connections, enhancing performance compared to AJAX long-polling. It outlines the process for setting up server and client-side implementations, highlights browser support issues, and provides various tools and resources for development. Additionally, it covers problem scenarios like simultaneous actions and server failures while offering insights on debugging and performance considerations.

1. CONFIDENTIAL © 2015 MentorMate, Inc. All rights reserved.
by
Petar Kadakevliev
Make your HTML5 game multiplayer

2. CONFIDENTIAL © 2015 MentorMate, Inc. All rights reserved.
A ( little ) { bit } of [ history ] & < definition >
What is WebSocket?
➢ Full bi-directional
communication technology over
TCP connection
➢ Introduced in 2011.
➢ Almost full support.
How was it achieved before?
➢ Commet
➢ AJAX long-polling
What does it provide us with?
➢ Less overhead
➢ Server push to client (before SSE)

3. CONFIDENTIAL © 2015 MentorMate, Inc. All rights reserved.
(Technologies) {explained} …
The good old AJAX WebSocketsSSEAJAX long polling
Link :)Polling …

4. CONFIDENTIAL © 2015 MentorMate, Inc. All rights reserved.
(The) {Browser} [support]
How to check if browser supports it? What if browser doesn’t support it?
➢ Tries WebSocket connection
➢ fallsback to LongPolling ajax
➢ fallsback to other approach:
like
○ AJAX multipart streaming
○ JSONP polling
> window.WebSocket
||
/
function WebSocket() { [native code] }

5. CONFIDENTIAL © 2015 MentorMate, Inc. All rights reserved.
(How) {to} [debug]
Chrome, Chromium, Opera: in-built tool, inside the Developer-Tools.
Let’s see it :)
Fiddler
➢ Safari:
➢ Firefox:
➢ IE:

6. CONFIDENTIAL © 2015 MentorMate, Inc. All rights reserved.
(Your) {options} to [choose] <from>
Client side (JS):
➢ Pusher
➢ MeteorJS
➢ SocketIO
➢ SockJS
➢ Faye
Server side …
➢ NodeJS - SocketIO, EngineIO
➢ PHP - Ratchet
➢ Ruby - Faye, Juggernaut, Cramp
➢ Java - jWebSocket, WaterSpout
➢ .NET - XSockets
Client side (AS):
➢ AS3WebSocket

7. CONFIDENTIAL © 2015 MentorMate, Inc. All rights reserved.
(Let’s) {get} to [business] …
Setup the server:
➢ Include the socket.io module;
➢ Build the listeners and logic for
emitting messages.
➢ Run the server.
Setup the client:
➢ Include the socket.io JS file.
➢ Create the socket object.
➢ Start listening for and/or emit
messages.

8. CONFIDENTIAL © 2015 MentorMate, Inc. All rights reserved.
(Is) {it} <that> [easy] indeed :O …
And yes … And no …
➢ You’ve got the tools right away …
➢ You’ve got the support right away …
➢ You just have to start coding …
➢ (and eventually learn JavaScript)
➢ You still have to write code :)
➢ You have to make the logic.
➢ You have to have the server …
➢ You are entering a relatively new area

9. CONFIDENTIAL © 2015 MentorMate, Inc. All rights reserved.
(The) {process} of [making] a <multiplayer> |game|
Starts from a single player game:
➢ You already have the gameplay built
➢ You need to make the server side
➢ You need to extend the front-end
logic
➢ Front-end ⇒ Back-end
Directly start building a multiplayer game:
➢ You need a server from the beginning
➢ You can have the FE built, but not required
➢ You need to bind the FE to the BE
➢ Back-end ⇒ Front-end

10. CONFIDENTIAL © 2015 MentorMate, Inc. All rights reserved.
(Example) {one}
The single player game:
➢ A puzzle game;
➢ Single player only, round based;
➢ Let’s see it :)
➢ Link :)
How it became a multiplayer one:
➢ Adding server - it’s logic, state, DB, etc.;
➢ Adding challenge mode.
➢ Let’s see it :)
➢ Link ;)

11. CONFIDENTIAL © 2015 MentorMate, Inc. All rights reserved.
(Some) {interesting} [cases]
What would happen if:
➢ The internet stops
➢ this affects the client(s) first, then the server.
➢ The server crashes
➢ affects the server first, then the client.
➢ Simultaneous actions from the people
➢ affects both clients and server equaly
➢ Let’s see …

12. CONFIDENTIAL © 2015 MentorMate, Inc. All rights reserved.
(The) {problem} [with] <simultaneous> /actions/
The “World of Warcraft” scenario:
➢ Case: a simple duel
➢ Defining the server state - duel
➢ Processing the requests:
➢ request changes the state
➢ the state sends info to clients
➢ the “looser” indicates the new state
The puzzle scenario:
➢ Case: users finish at the same time
➢ Defining the server state - match
➢ Processing the requests
➢ request changes the state
➢ latter request ignored
➢ clients indicate the new state

13. CONFIDENTIAL © 2015 MentorMate, Inc. All rights reserved.
(WebSocket) vs. {Ajax}
Pros and cons.
➢ Support
➢ Developing
➢ Debugging
Let’s fight them :D
➢ A simple test :)
➢ Go :)
Why this comparison?

14. CONFIDENTIAL © 2015 MentorMate, Inc. All rights reserved.
(When) {speed} [matters]
When all is a matter of time :)
➢ The legend of the 2-week depression
➢ The distance
➢ The data being transferred
Let’s think of another scenario …
➢ The story of the 2 deadly fishes
➢ Extremely responsive server
➢ Short distance … small transferred
data … or something else ? :)
When speed doesn’t matter ?
Let’s see an example

15. CONFIDENTIAL © 2015 MentorMate, Inc. All rights reserved.
(Example) {two}
The “Chasing” game:
➢ Concept
➢ Extremely light front-end;
➢ Very minimal data transferred;
➢ Built just basic challenging system
In action:
➢ On a server in USA:
➢ Link :)
➢ On a server in BG:
➢ Link :)

16. CONFIDENTIAL © 2015 MentorMate, Inc. All rights reserved.
(Some) {resources} & [starting] [points]
Some resources on the topic:
➢ The jackal article …
➢ HTML5games
Some starting points:
➢ Access to a server
➢ Concept
➢ HTML5 games tutorials
➢ Youtube video tutorials
➢ Passion …
The missing wheel:
➢ Canvas
➢ Comparison …

17. CONFIDENTIAL © 2015 MentorMate, Inc. All rights reserved.
Any questions ? :)
(Thanks) {for} [watching]
How can you find me?
petar.kadakevliev@mentormate.com