The presentation from MentorMate's workshop on Adding multiplayer to your mobile game: Introduction to WebSockets during Be IT Conference 2015.

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