├── .editorconfig
├── .env.development
├── .env.production
├── .github
    └── ISSUE_TEMPLATE.md
├── .gitignore
├── .vscode
    └── launch.json
├── LICENSE
├── README.md
├── app.json
├── ecosystem.config.js
├── package.json
├── src
    ├── app.config.ts
    ├── config
    │   └── auth.ts
    ├── index.ts
    ├── rooms
    │   ├── 01-chat-room.ts
    │   ├── 02-state-handler.ts
    │   ├── 03-auth.ts
    │   ├── 04-reconnection.ts
    │   └── 07-custom-lobby-room.ts
    └── static
    │   ├── 01-chat.html
    │   ├── 02-state-handler.html
    │   ├── 03-auth.html
    │   ├── 04-reconnection.html
    │   ├── 05-lobby-room.html
    │   ├── 06-relay-room.html
    │   └── 07-custom-lobby-room.html
└── tsconfig.json


/.editorconfig:
--------------------------------------------------------------------------------
1 | [*]
2 | end_of_line = lf
3 | charset = utf-8
4 | trim_trailing_whitespace = true
5 | indent_style = space
6 | indent_size = 4
7 | 


--------------------------------------------------------------------------------
/.env.development:
--------------------------------------------------------------------------------
1 | NODE_ENV=development
2 | 
3 | JWT_SECRET=verysafe
4 | AUTH_SALT=salt
5 | SESSION_SECRET=secret
6 | 


--------------------------------------------------------------------------------
/.env.production:
--------------------------------------------------------------------------------
1 | NODE_ENV=production


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | <!--
2 | Looking for help? Post on the forum instead: http://discuss.colyseus.io
3 | -->
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | package-lock.json
4 | npm-debug.log
5 | build
6 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "version": "0.2.0",
 3 |     "configurations": [
 4 |       {
 5 |         "name": "Debug",
 6 |         "type": "pwa-node",
 7 |         "request": "launch",
 8 |         "runtimeExecutable": "node",
 9 |         "runtimeArgs": ["--nolazy", "-r", "ts-node/register/transpile-only"],
10 |         "args": ["src/index.ts"],
11 |         "cwd": "${workspaceRoot}",
12 |         "internalConsoleOptions": "openOnSessionStart",
13 |         "resolveSourceMapLocations": [
14 |           "${workspaceFolder}/**",
15 |           "!**/node_modules/**"
16 |         ],
17 |         "skipFiles": ["<node_internals>/**", "node_modules/**"]
18 |       }
19 |     ]
20 |   }
21 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2016 Endel Dreyer
 2 | 
 3 | MIT License:
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Examples
 2 | 
 3 | On this repository you can find basic usage examples of how to use Colyseus along with the JavaScript client.
 4 | 
 5 | **Live demo**
 6 | 
 7 | - [See live](https://examples.colyseus.dev/)
 8 | - [See monitor panel](https://examples.colyseus.dev/)
 9 | 
10 | ## How to run
11 | 
12 | ```
13 | git clone https://github.com/colyseus/colyseus-examples.git
14 | cd colyseus-examples
15 | npm install
16 | npm start
17 | ```
18 | 
19 | Open [http://localhost:2567](http://localhost:2567) in your browser.
20 | 
21 | ## License
22 | 
23 | MIT
24 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Colyseus Multiplayer",
 3 |   "description": "Multiplayer Game Server for Node.js",
 4 |   "repository": "https://github.com/colyseus/colyseus",
 5 |   "logo": "https://github.com/colyseus/colyseus/blob/master/media/logo.png?raw=true",
 6 |   "keywords": ["node", "multiplayer", "colyseus"],
 7 |   "env": {
 8 |     "NPM_CONFIG_PRODUCTION": {
 9 |       "description": "Leave as 'false' to install required devDependencies.",
10 |       "value": "false"
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/ecosystem.config.js:
--------------------------------------------------------------------------------
 1 | const os = require('os');
 2 | 
 3 | /**
 4 |  * COLYSEUS CLOUD WARNING:
 5 |  * ----------------------
 6 |  * PLEASE DO NOT UPDATE THIS FILE MANUALLY AS IT MAY CAUSE DEPLOYMENT ISSUES
 7 |  */
 8 | 
 9 | module.exports = {
10 |   apps : [{
11 |     name: "colyseus-app",
12 |     script: 'build/index.js',
13 |     time: true,
14 |     watch: false,
15 |     instances: os.cpus().length,
16 |     exec_mode: 'fork',
17 |     wait_ready: true,
18 |     env_production: {
19 |       NODE_ENV: 'production'
20 |     }
21 |   }],
22 | };
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "colyseus-examples",
 3 |   "version": "0.16.0",
 4 |   "description": "Basic examples demonstrating Colyseus features",
 5 |   "main": "lib/index.js",
 6 |   "scripts": {
 7 |     "start": "tsx watch src/index.ts",
 8 |     "build": "tsc",
 9 |     "test": "echo \"Error: no test specified\" && exit 1"
10 |   },
11 |   "engines": {
12 |     "node": ">=16.x"
13 |   },
14 |   "author": "Endel Dreyer",
15 |   "license": "MIT",
16 |   "devDependencies": {
17 |     "@colyseus/uwebsockets-transport": "^0.16.0",
18 |     "@types/cors": "^2.8.6",
19 |     "@types/express": "^4.17.14",
20 |     "tsx": "^3.12.7",
21 |     "typescript": "^4.8.4"
22 |   },
23 |   "dependencies": {
24 |     "@colyseus/auth": "^0.16.0",
25 |     "@colyseus/core": "^0.16.0",
26 |     "@colyseus/monitor": "^0.16.0",
27 |     "@colyseus/playground": "^0.16.0",
28 |     "@colyseus/tools": "^0.16.0",
29 |     "colyseus": "^0.16.0",
30 |     "cors": "^2.8.5",
31 |     "express": "^4.16.4",
32 |     "serve-index": "^1.8.0"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/src/app.config.ts:
--------------------------------------------------------------------------------
 1 | import config from "@colyseus/tools";
 2 | import { monitor } from "@colyseus/monitor";
 3 | import { playground } from "@colyseus/playground";
 4 | import { auth } from "@colyseus/auth";
 5 | import path from 'path';
 6 | import serveIndex from 'serve-index';
 7 | import express from 'express';
 8 | 
 9 | // import { uWebSocketsTransport} from "@colyseus/uwebsockets-transport";
10 | import "./config/auth";
11 | 
12 | // Import demo room handlers
13 | import { LobbyRoom, RelayRoom } from 'colyseus';
14 | import { ChatRoom } from "./rooms/01-chat-room";
15 | import { StateHandlerRoom } from "./rooms/02-state-handler";
16 | import { AuthRoom } from "./rooms/03-auth";
17 | import { ReconnectionRoom } from './rooms/04-reconnection';
18 | import { CustomLobbyRoom } from './rooms/07-custom-lobby-room';
19 | 
20 | export default config({
21 |     options: {
22 |         devMode: true,
23 |     },
24 | 
25 |     initializeGameServer: (gameServer) => {
26 |         // Define "lobby" room
27 |         gameServer.define("lobby", LobbyRoom);
28 | 
29 |         // Define "relay" room
30 |         gameServer.define("relay", RelayRoom, { maxClients: 4 })
31 |             .enableRealtimeListing();
32 | 
33 |         // Define "chat" room
34 |         gameServer.define("chat", ChatRoom)
35 |             .enableRealtimeListing();
36 | 
37 |         // Register ChatRoom with initial options, as "chat_with_options"
38 |         // onInit(options) will receive client join options + options registered here.
39 |         gameServer.define("chat_with_options", ChatRoom, {
40 |             custom_options: "you can use me on Room#onCreate"
41 |         });
42 | 
43 |         // Define "state_handler" room
44 |         gameServer.define("state_handler", StateHandlerRoom)
45 |             .enableRealtimeListing();
46 | 
47 |         // Define "auth" room
48 |         gameServer.define("auth", AuthRoom)
49 |             .enableRealtimeListing();
50 | 
51 |         // Define "reconnection" room
52 |         gameServer.define("reconnection", ReconnectionRoom)
53 |             .enableRealtimeListing();
54 | 
55 |         // Define "custom_lobby" room
56 |         gameServer.define("custom_lobby", CustomLobbyRoom);
57 | 
58 |         gameServer.onShutdown(function(){
59 |             console.log(`game server is going down.`);
60 |         });
61 | 
62 | 
63 |     },
64 | 
65 |     initializeExpress: (app) => {
66 |         // (optional) auth module
67 |         app.use(auth.prefix, auth.routes());
68 | 
69 |         // (optional) client playground
70 |         app.use('/playground', playground);
71 | 
72 |         // (optional) web monitoring panel
73 |         app.use('/colyseus', monitor());
74 | 
75 |         app.use('/', serveIndex(path.join(__dirname, "static"), {'icons': true}))
76 |         app.use('/', express.static(path.join(__dirname, "static")));
77 |     },
78 | 
79 | 
80 |     beforeListen: () => {
81 |         /**
82 |          * Before before gameServer.listen() is called.
83 |          */
84 |     }
85 | });
86 | 


--------------------------------------------------------------------------------
/src/config/auth.ts:
--------------------------------------------------------------------------------
 1 | import { auth } from "@colyseus/auth";
 2 | 
 3 | const fakeDb: any[] = [];
 4 | 
 5 | auth.settings.onFindUserByEmail = async (email) => {
 6 |   const userFound = fakeDb.find((user) => user.email === email);;
 7 | 
 8 |   // return a copy of the user object
 9 |   return userFound && JSON.parse(JSON.stringify(userFound));
10 | };
11 | 
12 | auth.settings.onRegisterWithEmailAndPassword = async (email, password) => {
13 |   const user = { email, password, name: email.split("@")[0], errorServerIsStringButClientIsInt: "this should not crash the client", someAdditionalData: true, };
14 | 
15 |   // keep a copy of the user object
16 |   fakeDb.push(JSON.parse(JSON.stringify(user)));
17 | 
18 |   return user;
19 | };
20 | 
21 | auth.settings.onRegisterAnonymously = async (options) => {
22 |   return {
23 |     anonymousId: Math.round(Math.random() * 1000),
24 |     anonymous: true,
25 |     ...options
26 |   };
27 | };
28 | 
29 | export default auth;
30 | 
31 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * IMPORTANT:
 3 |  * ---------
 4 |  * Do not manually edit this file if you'd like to host your server on Colyseus Cloud
 5 |  *
 6 |  * If you're self-hosting (without Colyseus Cloud), you can manually
 7 |  * instantiate a Colyseus Server as documented here:
 8 |  *
 9 |  * See: https://docs.colyseus.io/server/api/#constructor-options
10 |  */
11 | import { listen } from "@colyseus/tools";
12 | 
13 | // Import arena config
14 | import appConfig from "./app.config";
15 | 
16 | // Create and listen on 2567 (or PORT environment variable.)
17 | listen(appConfig);
18 | 


--------------------------------------------------------------------------------
/src/rooms/01-chat-room.ts:
--------------------------------------------------------------------------------
 1 | import { Room } from "colyseus";
 2 | 
 3 | export class ChatRoom extends Room {
 4 |     // this room supports only 4 clients connected
 5 |     maxClients = 4;
 6 | 
 7 |     onCreate (options) {
 8 |         console.log("ChatRoom created!", options);
 9 | 
10 |         this.onMessage("message", (client, message) => {
11 |             console.log("ChatRoom received message from", client.sessionId, ":", message);
12 |             this.broadcast("messages", `(${client.sessionId}) ${message}`);
13 |         });
14 |     }
15 | 
16 |     onJoin (client) {
17 |         this.broadcast("messages", `${ client.sessionId } joined.`);
18 |     }
19 | 
20 |     onLeave (client) {
21 |         this.broadcast("messages", `${ client.sessionId } left.`);
22 |     }
23 | 
24 |     onDispose () {
25 |         console.log("Dispose ChatRoom");
26 |     }
27 | 
28 | }
29 | 


--------------------------------------------------------------------------------
/src/rooms/02-state-handler.ts:
--------------------------------------------------------------------------------
 1 | import { Room, Client } from "colyseus";
 2 | import { Schema, type, MapSchema } from "@colyseus/schema";
 3 | 
 4 | export class Player extends Schema {
 5 |     @type("number")
 6 |     x = Math.floor(Math.random() * 400);
 7 | 
 8 |     @type("number")
 9 |     y = Math.floor(Math.random() * 400);
10 | }
11 | 
12 | export class State extends Schema {
13 |     @type({ map: Player })
14 |     players = new MapSchema<Player>();
15 | 
16 |     something = "This attribute won't be sent to the client-side";
17 | 
18 |     createPlayer(sessionId: string) {
19 |         this.players.set(sessionId, new Player());
20 |     }
21 | 
22 |     removePlayer(sessionId: string) {
23 |         this.players.delete(sessionId);
24 |     }
25 | 
26 |     movePlayer (sessionId: string, movement: any) {
27 |         if (movement.x) {
28 |             this.players.get(sessionId).x += movement.x * 10;
29 | 
30 |         } else if (movement.y) {
31 |             this.players.get(sessionId).y += movement.y * 10;
32 |         }
33 |     }
34 | }
35 | 
36 | export class StateHandlerRoom extends Room {
37 |     maxClients = 4;
38 |     state = new State();
39 | 
40 |     onCreate (options) {
41 |         console.log("StateHandlerRoom created!", options);
42 | 
43 |         this.onMessage("move", (client, data) => {
44 |             console.log("StateHandlerRoom received message from", client.sessionId, ":", data);
45 |             this.state.movePlayer(client.sessionId, data);
46 |         });
47 |     }
48 | 
49 |     // onAuth(client, options, req) {
50 |     //     return true;
51 |     // }
52 | 
53 |     onJoin (client: Client) {
54 |         // client.send("hello", "world");
55 |         console.log(client.sessionId, "joined!");
56 |         this.state.createPlayer(client.sessionId);
57 |     }
58 | 
59 |     onLeave (client) {
60 |         console.log(client.sessionId, "left!");
61 |         this.state.removePlayer(client.sessionId);
62 |     }
63 | 
64 |     onDispose () {
65 |         console.log("Dispose StateHandlerRoom");
66 |     }
67 | 
68 | }
69 | 


--------------------------------------------------------------------------------
/src/rooms/03-auth.ts:
--------------------------------------------------------------------------------
 1 | import { Room, Client } from "colyseus";
 2 | 
 3 | const FACEBOOK_APP_TOKEN = "135829507120512|3a97320bee18f2286d6243dcf4cc7a23";
 4 | 
 5 | export class AuthRoom extends Room {
 6 |     onCreate (options: any) {
 7 |         console.log("StateHandlerRoom created!", options);
 8 | 
 9 |         this.onMessage("*", (client, type, message) => {
10 |             console.log("AuthRoom received message from", client.sessionId, ":", message);
11 |         });
12 |     }
13 | 
14 |     async onAuth (client: Client, options: any) {
15 |         const response = await fetch(`https://graph.facebook.com/debug_token?input_token=${options.accessToken}&access_token=${FACEBOOK_APP_TOKEN}`, {
16 |             headers: {
17 |                 'Accept': 'application/json'
18 |             }
19 |         }).then(res => res.json());
20 | 
21 |         return (response as any).data;
22 |     }
23 | 
24 |     onJoin (client: Client, options: any, auth: any) {
25 |         console.log(client.sessionId, "joined successfully");
26 |         console.log("Auth data: ", auth);
27 |     }
28 | 
29 |     onLeave (client: Client) {
30 |         console.log(client.sessionId, "left");
31 |     }
32 | 
33 |     onDispose () {
34 |         console.log("Dispose AuthRoom");
35 |     }
36 | 
37 | }
38 | 


--------------------------------------------------------------------------------
/src/rooms/04-reconnection.ts:
--------------------------------------------------------------------------------
 1 | import { Room, Client } from "colyseus";
 2 | 
 3 | export class ReconnectionRoom extends Room {
 4 |     onCreate (options: any) {
 5 |     }
 6 | 
 7 |     onJoin (client: Client, options: any, auth: any) {
 8 |         client.send("status", "Welcome!");
 9 |     }
10 | 
11 |     async onLeave (client: Client, consented?: boolean) {
12 |         console.log(client.sessionId, "left", { consented });
13 | 
14 |         try {
15 |             if (consented) {
16 |                 /*
17 |                  * Optional:
18 |                  * you may want to allow reconnection if the client manually closed the connection.
19 |                  */
20 |                 throw new Error("left_manually");
21 |             }
22 | 
23 |             await this.allowReconnection(client, 10);
24 |             console.log("Reconnected!");
25 | 
26 |             client.send("status", "Welcome back!");
27 | 
28 |         } catch (e) {
29 |             console.log(e);
30 | 
31 |         }
32 |     }
33 | 
34 |     onDispose () {
35 |     }
36 | 
37 | }
38 | 


--------------------------------------------------------------------------------
/src/rooms/07-custom-lobby-room.ts:
--------------------------------------------------------------------------------
 1 | import { Schema, type } from "@colyseus/schema";
 2 | import { Client, LobbyRoom } from "colyseus";
 3 | 
 4 | class LobbyState extends Schema {
 5 |     @type("string") custom: string ;
 6 | }
 7 | 
 8 | export class CustomLobbyRoom extends LobbyRoom {
 9 |     state = new LobbyState();
10 | 
11 |     async onCreate(options) {
12 |         await super.onCreate(options);
13 | 
14 |     }
15 | 
16 |     onJoin(client: Client, options) {
17 |         super.onJoin(client, options);
18 |         this.state.custom = client.sessionId;
19 |     }
20 | 
21 |     onLeave(client) {
22 |         super.onLeave(client);
23 |     }
24 | }


--------------------------------------------------------------------------------
/src/static/01-chat.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta name="viewport" content="width=device-width" />
 5 | 
 6 |     <style>
 7 |       body { font-family: Tahoma, Geneva, sans-serif; }
 8 |     </style>
 9 | 
10 |     <!-- colyseus.js client -->
11 |     <script type="text/javascript" src="https://unpkg.com/colyseus.js@^0.16.0/dist/colyseus.js"></script>
12 | 
13 |   </head>
14 |   <body>
15 |     <h1>
16 |       <a href="https://github.com/colyseus/colyseus-examples"><img src="https://cdn.jsdelivr.net/gh/colyseus/colyseus@master/media/header.png" height="100" alt="colyseus" /></a>
17 |     </h1>
18 | 
19 |     <p>This room doesn't use the room's state. It just broadcast messages through "broadcast" method.</p>
20 | 
21 |     <strong>Messages</strong><br>
22 | 
23 |     <form id="form">
24 |       <input type="text" id="input" value="" autofocus/>
25 |       <input type="submit" value="send" />
26 |     </form>
27 | 
28 |     <div id="messages"></div>
29 | 
30 |     <script>
31 |       var host = window.document.location.host.replace(/:.*/, '');
32 | 
33 |       var client = new Colyseus.Client(location.protocol.replace("http", "ws") + "//" + host + (location.port ? ':'+location.port : ''));
34 |       client.joinOrCreate("chat").then(room => {
35 |         console.log("joined");
36 |         room.onStateChange.once(function(state) {
37 |             console.log("initial room state:", state);
38 |         });
39 | 
40 |         // new room state
41 |         room.onStateChange(function(state) {
42 |             // this signal is triggered on each patch
43 |         });
44 | 
45 |         // listen to patches coming from the server
46 |         room.onMessage("messages", function(message) {
47 |             var p = document.createElement("p");
48 |             p.innerText = message;
49 |             document.querySelector("#messages").appendChild(p);
50 |         });
51 | 
52 |         // send message to room on submit
53 |         document.querySelector("#form").onsubmit = function(e) {
54 |             e.preventDefault();
55 | 
56 |             var input = document.querySelector("#input");
57 | 
58 |             console.log("input:", input.value);
59 | 
60 |             // send data to room
61 |             room.send("message", input.value);
62 | 
63 |             // clear input
64 |             input.value = "";
65 |         }
66 |       });
67 | 
68 |     </script>
69 |   </body>
70 | </html>
71 | 


--------------------------------------------------------------------------------
/src/static/02-state-handler.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta name="viewport" content="width=device-width" />
  5 | 
  6 |     <style>
  7 |       body { font-family: Tahoma, Geneva, sans-serif; }
  8 |     </style>
  9 | 
 10 |     <!-- colyseus.js client -->
 11 |     <script type="text/javascript" src="https://unpkg.com/colyseus.js@^0.16.0/dist/colyseus.js"></script>
 12 | 
 13 |     <style type="text/css">
 14 |       .player {
 15 |         width: 100px;
 16 |         height: 100px;
 17 |         position: absolute;
 18 |         padding-top: 24px;
 19 |         box-sizing: border-box;
 20 |         left: 0;
 21 |         top: 0;
 22 |       }
 23 |     </style>
 24 | 
 25 |   </head>
 26 |   <body>
 27 |     <h1>
 28 |       <a href="https://github.com/colyseus/colyseus-examples"><img src="https://cdn.jsdelivr.net/gh/colyseus/colyseus@master/media/header.png" height="100" alt="colyseus" /></a>
 29 |     </h1>
 30 | 
 31 |     <p>This example shows how to use custom data structures in your room's state.</p>
 32 | 
 33 |     <strong>commands</strong><br>
 34 | 
 35 |     <button onclick="up()">up</button>
 36 |     <button onclick="down()">down</button>
 37 |     <br />
 38 |     <button onclick="left()">left</button>
 39 |     <button onclick="right()">right</button>
 40 | 
 41 |     <script>
 42 |         var host = window.document.location.host.replace(/:.*/, '');
 43 | 
 44 |         var client = new Colyseus.Client(location.protocol.replace("http", "ws") + "//" + host + (location.port ? ':' + location.port : ''));
 45 |         var room;
 46 |         client.joinOrCreate("state_handler").then(room_instance => {
 47 |             room = room_instance
 48 |             var $ = Colyseus.getStateCallbacks(room);
 49 | 
 50 |             var players = {};
 51 |             var colors = ['red', 'green', 'yellow', 'blue', 'cyan', 'magenta'];
 52 | 
 53 |             // listen to patches coming from the server
 54 |             $(room.state).players.onAdd(function (player, sessionId) {
 55 |                 var dom = document.createElement("div");
 56 |                 dom.className = "player";
 57 |                 dom.style.left = player.x + "px";
 58 |                 dom.style.top = player.y + "px";
 59 |                 dom.style.background = colors[Math.floor(Math.random() * colors.length)];
 60 |                 dom.innerText = "Player " + sessionId;
 61 | 
 62 |                 $(player).onChange(function (changes) {
 63 |                     dom.style.left = player.x + "px";
 64 |                     dom.style.top = player.y + "px";
 65 |                 });
 66 | 
 67 |                 players[sessionId] = dom;
 68 |                 document.body.appendChild(dom);
 69 |             });
 70 | 
 71 |             $(room.state).players.onRemove(function (player, sessionId) {
 72 |                 document.body.removeChild(players[sessionId]);
 73 |                 delete players[sessionId];
 74 |             });
 75 | 
 76 | 
 77 |             room.onMessage("hello", (message) => {
 78 |                 console.log(message);
 79 |             });
 80 | 
 81 |             window.addEventListener("keydown", function (e) {
 82 |                 if (e.which === 38) {
 83 |                     up();
 84 | 
 85 |                 } else if (e.which === 39) {
 86 |                     right();
 87 | 
 88 |                 } else if (e.which === 40) {
 89 |                     down();
 90 | 
 91 |                 } else if (e.which === 37) {
 92 |                     left();
 93 |                 }
 94 |             });
 95 | 
 96 |         });
 97 | 
 98 |         function up () {
 99 |             room.send("move", { y: -1 });
100 |         }
101 | 
102 |         function right () {
103 |             room.send("move", { x: 1 });
104 |         }
105 | 
106 |         function down () {
107 |             room.send("move", { y: 1 })
108 |         }
109 | 
110 |         function left () {
111 |             room.send("move", { x: -1 })
112 |         }
113 | 
114 | 
115 |     </script>
116 |   </body>
117 | </html>
118 | 


--------------------------------------------------------------------------------
/src/static/03-auth.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta name="viewport" content="width=device-width" />
 5 | 
 6 |     <style>
 7 |       body { font-family: Tahoma, Geneva, sans-serif; }
 8 |     </style>
 9 | 
10 |     <!-- colyseus.js client -->
11 |     <script type="text/javascript" src="https://unpkg.com/colyseus.js@^0.16.0/dist/colyseus.js"></script>
12 | 
13 |   </head>
14 |   <body>
15 |     <h1>
16 |       <a href="https://github.com/colyseus/colyseus-examples"><img src="https://cdn.jsdelivr.net/gh/colyseus/colyseus@master/media/header.png" height="100" alt="colyseus" /></a>
17 |     </h1>
18 | 
19 |     <p>This example shows how to authenticate and retrieve user data before the websocket handshake.</p>
20 | 
21 |     <p>Open Developer Tools for log messages.</p>
22 | 
23 |     <p><strong>Commands</strong></p>
24 | 
25 |     <button onclick="login()">Login</button>
26 |     <button onclick="join_without_token()">Try to joinOrCreate without token</button>
27 | 
28 |     <p><em><small>We <strong>do not</strong> store any data from your Facebook account during this process. Facebook is only used as an example of authentication provider.</small></em></p>
29 | 
30 |     <script>
31 |         window.fbAsyncInit = function () {
32 |             FB.init({
33 |                 appId: '135829507120512',
34 |                 cookie: true,  // enable cookies to allow the server to access
35 |                 // the session
36 |                 xfbml: true,  // parse social plugins on this page
37 |                 version: 'v2.8' // use graph api version 2.8
38 |             });
39 |         }
40 |     </script>
41 | 
42 |     <script>
43 |       var host = window.document.location.host.replace(/:.*/, '');
44 | 
45 |       var client = new Colyseus.Client(location.protocol.replace("http", "ws") + "//"  + host + (location.port ? ':' + location.port : ''));
46 | 
47 |       function join_without_token () {
48 |         // Logged into your app and Facebook.
49 |         client.joinOrCreate("auth").then(room_instance => {
50 |             console.log("Joined successfully!"); // never reached!
51 | 
52 |         }).catch(e => {
53 |             console.error("Error", e);
54 |         });
55 |       }
56 | 
57 |       function login () {
58 |           FB.login(function (response) {
59 |               // Handle the response object, like in statusChangeCallback() in our demo
60 |               // code.
61 |               // The response object is returned with a status field that lets the
62 |               // app know the current login status of the person.
63 |               // Full docs on the response object can be found in the documentation
64 |               // for FB.getLoginStatus().
65 |               if (response.status === 'connected') {
66 |                   // Logged into your app and Facebook.
67 |                   client.joinOrCreate("auth", {
68 |                       accessToken: response.authResponse.accessToken
69 |                   }).then(room => {
70 |                       console.log("Joined successfully!");
71 |                   }).catch(e => {
72 |                       console.error("Error", e);
73 |                   });
74 | 
75 |               } else {
76 |                   console.log("not connected", response.authResponse);
77 |               }
78 |           });
79 |       }
80 |     </script>
81 | 
82 |     <script>
83 |         // Load the Facebook SDK asynchronously
84 |         (function(d, s, id) {
85 |             var js, fjs = d.getElementsByTagName(s)[0];
86 |             if (d.getElementById(id)) return;
87 |             js = d.createElement(s); js.id = id;
88 |             js.src = "https://connect.facebook.net/en_US/sdk.js";
89 |             fjs.parentNode.insertBefore(js, fjs);
90 |         }(document, 'script', 'facebook-jssdk'));
91 |     </script>
92 | 
93 |   </body>
94 | </html>
95 | 


--------------------------------------------------------------------------------
/src/static/04-reconnection.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta name="viewport" content="width=device-width" />
 5 | 
 6 |     <style>
 7 |       body { font-family: Tahoma, Geneva, sans-serif; }
 8 |     </style>
 9 | 
10 |     <!-- colyseus.js client -->
11 |     <script type="text/javascript" src="https://unpkg.com/colyseus.js@^0.16.0/dist/colyseus.js"></script>
12 | 
13 |   </head>
14 |   <body>
15 |     <h1>
16 |       <a href="https://github.com/colyseus/colyseus-examples"><img src="https://cdn.jsdelivr.net/gh/colyseus/colyseus@master/media/header.png" height="100" alt="colyseus" /></a>
17 |     </h1>
18 | 
19 |     <p>This example shows how to use</p>
20 |     <ul>
21 |         <li><code>allowReconection()</code> - server-side</li>
22 |         <li><code>reconnect()</code> - client-side</li>
23 |     </ul>
24 |     <p>...to reestablish a connection into a <code>Room</code>.</p>
25 | 
26 |     <p>Open Developer Tools for log messages.</p>
27 | 
28 |     <p><strong>Commands</strong></p>
29 | 
30 |     <button onclick="join()">join room</button>
31 |     <button onclick="leave()">forcibly close room connection</button>
32 |     <button onclick="reconnect()">reconnect</button>
33 | 
34 |     <script>
35 |       var host = window.document.location.host.replace(/:.*/, '');
36 |       var client = new Colyseus.Client(location.protocol.replace("http", "ws") + "//" + host + (location.port ? ':' + location.port : ''));
37 |       var room;
38 | 
39 |       function join () {
40 |         // Logged into your app and Facebook.
41 |         client.joinOrCreate("reconnection").then(room_instance => {
42 |             room = room_instance;
43 |             onjoin();
44 |             console.log("Joined successfully!");
45 | 
46 |         }).catch(e => {
47 |             console.error("Error", e);
48 |         });
49 |       }
50 | 
51 |       function onjoin() {
52 |           room.onMessage("status", (message) => console.log(message));
53 |           room.onLeave(() => console.log("Bye, bye!"));
54 | 
55 |           localStorage.setItem("reconnectionToken", room.reconnectionToken);
56 |       }
57 | 
58 |       function leave() {
59 |         if (room) {
60 |           room.connection.close();
61 | 
62 |         } else {
63 |           console.warn("Not connected.");
64 |         }
65 |       }
66 | 
67 |       function reconnect() {
68 |         var reconnectionToken = localStorage.getItem("reconnectionToken");
69 | 
70 |         client.reconnect(reconnectionToken).then(room_instance => {
71 |             room = room_instance;
72 |             onjoin();
73 |             console.log("Reconnected successfully!");
74 |         }).catch(e => {
75 |             console.error("Error", e);
76 |         });
77 | 
78 |       }
79 |     </script>
80 | 
81 |   </body>
82 | </html>
83 | 


--------------------------------------------------------------------------------
/src/static/05-lobby-room.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta name="viewport" content="width=device-width" />
  5 | 
  6 |     <style>
  7 |       body { font-family: Tahoma, Geneva, sans-serif; }
  8 |     </style>
  9 | 
 10 |     <!-- colyseus.js client -->
 11 |     <script type="text/javascript" src="https://unpkg.com/colyseus.js@^0.16.0/dist/colyseus.js"></script>
 12 | 
 13 |   </head>
 14 |   <body>
 15 |     <h1>
 16 |       <a href="https://github.com/colyseus/colyseus-examples"><img src="https://cdn.jsdelivr.net/gh/colyseus/colyseus@master/media/header.png" height="100" alt="colyseus" /></a>
 17 |     </h1>
 18 | 
 19 |     <p>This example shows how to use <code>LobbyRoom</code>:</p>
 20 |     <ul>
 21 |         <li>When you join a lobby, you'll receive the current list of rooms</li>
 22 |         <li>Then, you'll receive updates when rooms are created, updated, or removed.</li>
 23 |         <li>(All rooms on colyseus-examples have <code>.enableRealtimeListing()</code>, try joining other demos to see realtime updates here)</li>
 24 |         <li><a href="https://docs.colyseus.io/builtin-rooms/lobby/">See documentation</a></li>
 25 |     </ul>
 26 | 
 27 |     <p>Open Developer Tools for log messages.</p>
 28 | 
 29 |     <p><strong>Commands</strong></p>
 30 | 
 31 |     <button onclick="join()">join lobby</button>
 32 |     <button onclick="leave()">leave lobby</button>
 33 | 
 34 |     <h2>All rooms:</h2>
 35 |     <ul id="all_rooms"></ul>
 36 | 
 37 |     <script>
 38 |       var host = window.document.location.host.replace(/:.*/, '');
 39 |       var client = new Colyseus.Client(location.protocol.replace("http", "ws") + "//" + host + (location.port ? ':' + location.port : ''));
 40 |       var lobby;
 41 | 
 42 |       function join () {
 43 |         // Logged into your app and Facebook.
 44 |         client.joinOrCreate("lobby").then(room_instance => {
 45 |             lobby = room_instance;
 46 |             onjoin();
 47 |             console.log("Joined lobby room!");
 48 | 
 49 |         }).catch(e => {
 50 |             console.error("Error", e);
 51 |         });
 52 |       }
 53 | 
 54 |       function onjoin() {
 55 |           lobby.onMessage("rooms", (rooms) => {
 56 |               allRooms = rooms;
 57 |               update_full_list();
 58 | 
 59 |               console.log("Received full list of rooms:", allRooms);
 60 |           });
 61 | 
 62 |           lobby.onMessage("+", ([roomId, room]) => {
 63 |               const roomIndex = allRooms.findIndex((room) => room.roomId === roomId);
 64 |               if (roomIndex !== -1) {
 65 |                   console.log("Room update:", room);
 66 |                   allRooms[roomIndex] = room;
 67 | 
 68 |               } else {
 69 |                   console.log("New room", room);
 70 |                   allRooms.push(room);
 71 |               }
 72 |               update_full_list();
 73 |           });
 74 | 
 75 |           lobby.onMessage("-", (roomId) => {
 76 |               console.log("Room removed", roomId);
 77 |               allRooms = allRooms.filter((room) => room.roomId !== roomId);
 78 |               update_full_list();
 79 |           });
 80 | 
 81 |           lobby.onLeave(() => {
 82 |               allRooms = [];
 83 |               update_full_list();
 84 |               console.log("Bye, bye!");
 85 |           });
 86 |       }
 87 | 
 88 |       function update_full_list() {
 89 |         var el = document.getElementById('all_rooms');
 90 |         el.innerHTML = allRooms.map(function(room) {
 91 |             return "<li><code>" + JSON.stringify(room) + "</code></li>";
 92 |         }).join("\n");
 93 | 
 94 |       }
 95 | 
 96 |       function leave() {
 97 |         if (lobby) {
 98 |           lobby.leave();
 99 | 
100 |         } else {
101 |           console.warn("Not connected.");
102 |         }
103 |       }
104 |     </script>
105 | 
106 |   </body>
107 | </html>
108 | 


--------------------------------------------------------------------------------
/src/static/06-relay-room.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta name="viewport" content="width=device-width" />
  5 | 
  6 |     <style>
  7 |       body { font-family: Tahoma, Geneva, sans-serif; }
  8 |     </style>
  9 | 
 10 |     <!-- colyseus.js client -->
 11 |     <script type="text/javascript" src="https://unpkg.com/colyseus.js@^0.16.0/dist/colyseus.js"></script>
 12 | 
 13 |     <style type="text/css">
 14 |       .player {
 15 |         width: 100px;
 16 |         height: 100px;
 17 |         position: absolute;
 18 |         padding-top: 24px;
 19 |         box-sizing: border-box;
 20 |         left: 0;
 21 |         top: 0;
 22 |       }
 23 |     </style>
 24 | 
 25 |   </head>
 26 |   <body>
 27 |     <h1>
 28 |       <a href="https://github.com/colyseus/colyseus-examples"><img src="https://cdn.jsdelivr.net/gh/colyseus/colyseus@master/media/header.png" height="100" alt="colyseus" /></a>
 29 |     </h1>
 30 | 
 31 |     <p>This example shows how to use <code>RelayRoom</code>:</p>
 32 |     <ul>
 33 |         <li>Messages are broadcasted to all other clients.</li>
 34 |         <li>It is <strong>client-authoritative</strong> instead of <strong>server-authoritative</strong>.</li>
 35 |         <li><a href="https://docs.colyseus.io/builtin-rooms/relay/">See documentation</a></li>
 36 |     </ul>
 37 | 
 38 |     <strong>commands</strong><br>
 39 | 
 40 |     <input type="text" id="username" placeholder="Enter your name" />
 41 |     <button onclick="join()">Join RelayRoom</button>
 42 |     <button onclick="leave()">Leave room</button>
 43 | 
 44 |     <br />
 45 |     <button onclick="up()">up</button>
 46 |     <button onclick="down()">down</button>
 47 |     <br />
 48 |     <button onclick="left()">left</button>
 49 |     <button onclick="right()">right</button>
 50 | 
 51 |     <script>
 52 |         var host = window.document.location.host.replace(/:.*/, '');
 53 | 
 54 |         var client = new Colyseus.Client(location.protocol.replace("http", "ws") + "//" + host + (location.port ? ':' + location.port : ''));
 55 |         var room;
 56 | 
 57 |         var colors = ['red', 'green', 'yellow', 'blue', 'cyan', 'magenta'];
 58 |         var players = {};
 59 | 
 60 |         function join() {
 61 |             client.joinOrCreate("relay", {
 62 |                 name: document.getElementById('username').value
 63 |             }).then(room_instance => {
 64 |                 room = room_instance
 65 | 
 66 |                 room.onLeave(() => console.log("Bye, bye."));
 67 | 
 68 |                 room.onMessage('move', ([sessionId, movement]) => {
 69 |                     local_move(sessionId, movement);
 70 |                 });
 71 | 
 72 |                 // listen to patches coming from the server
 73 |                 room.state.players.onAdd(function (player, sessionId) {
 74 |                     var dom = document.createElement("div");
 75 |                     dom.className = "player";
 76 |                     dom.style.left = "0px";
 77 |                     dom.style.top = "0px";
 78 |                     dom.style.background = colors[Math.floor(Math.random() * colors.length)];
 79 |                     dom.innerText = `${player.name || "[no name]"} (${sessionId})`;
 80 | 
 81 |                     players[sessionId] = dom;
 82 |                     document.body.appendChild(dom);
 83 |                 });
 84 | 
 85 |                 room.state.players.onRemove(function (player, sessionId) {
 86 |                     document.body.removeChild(players[sessionId]);
 87 |                     delete players[sessionId];
 88 |                 });
 89 | 
 90 |                 window.addEventListener("keydown", function (e) {
 91 |                     if (e.which === 38) {
 92 |                         up();
 93 | 
 94 |                     } else if (e.which === 39) {
 95 |                         right();
 96 | 
 97 |                     } else if (e.which === 40) {
 98 |                         down();
 99 | 
100 |                     } else if (e.which === 37) {
101 |                         left();
102 |                     }
103 |                 });
104 | 
105 |             });
106 |         }
107 | 
108 |         function leave() {
109 |             if (room) {
110 |                 room.leave();
111 |             }
112 |         }
113 | 
114 |         function local_move(sessionId, movement) {
115 |             var dom = players[sessionId];
116 |             if (movement.x) {
117 |                 dom.style.left = parseInt(dom.style.left) + movement.x + "px";
118 |             }
119 |             if (movement.y) {
120 |                 dom.style.top = parseInt(dom.style.top) + movement.y + "px";
121 |             }
122 |         }
123 | 
124 |         function up () {
125 |             var movement = { y: -10 };
126 | 
127 |             // move locally instantly
128 |             local_move(room.sessionId, movement);
129 | 
130 |             room.send("move", movement);
131 |         }
132 | 
133 |         function right () {
134 |             var movement = { x: 10 };
135 | 
136 |             // move locally instantly
137 |             local_move(room.sessionId, movement);
138 | 
139 |             room.send("move", movement);
140 |         }
141 | 
142 |         function down () {
143 |             var movement = { y: 10 };
144 | 
145 |             // move locally instantly
146 |             local_move(room.sessionId, movement);
147 | 
148 |             room.send("move", movement);
149 |         }
150 | 
151 |         function left () {
152 |             var movement = { x: -10 };
153 | 
154 |             // move locally instantly
155 |             local_move(room.sessionId, movement);
156 | 
157 |             room.send("move", movement);
158 |         }
159 | 
160 |     </script>
161 | 
162 |   </body>
163 | </html>
164 | 


--------------------------------------------------------------------------------
/src/static/07-custom-lobby-room.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta name="viewport" content="width=device-width" />
  5 | 
  6 |     <style>
  7 |       body { font-family: Tahoma, Geneva, sans-serif; }
  8 |     </style>
  9 | 
 10 |     <!-- colyseus.js client -->
 11 |     <script type="text/javascript" src="https://unpkg.com/colyseus.js@^0.16.0/dist/colyseus.js"></script>
 12 | 
 13 |   </head>
 14 |   <body>
 15 |     <h1>
 16 |       <a href="https://github.com/colyseus/colyseus-examples"><img src="https://cdn.jsdelivr.net/gh/colyseus/colyseus@master/media/header.png" height="100" alt="colyseus" /></a>
 17 |     </h1>
 18 | 
 19 |     <p>This example shows how to use a custom <code>LobbyRoom</code>:</p>
 20 |     <ul>
 21 |         <li>The same as <a href="05-lobby-room.html">05-lobby-room.html</a> (<a href="https://docs.colyseus.io/builtin-rooms/lobby/">See documentation</a>)</li>
 22 |         <li>Uses a room that extends LobbyRoom, and use a custom state.</li>
 23 |     </ul>
 24 | 
 25 |     <p>Open Developer Tools for log messages.</p>
 26 | 
 27 |     <p><strong>Commands</strong></p>
 28 | 
 29 |     <button onclick="join()">join lobby</button>
 30 |     <button onclick="leave()">leave lobby</button>
 31 | 
 32 |     <h2>All rooms:</h2>
 33 |     <ul id="all_rooms"></ul>
 34 | 
 35 |     <script>
 36 |       var host = window.document.location.host.replace(/:.*/, '');
 37 |       var client = new Colyseus.Client(location.protocol.replace("http", "ws") + "//" + host + (location.port ? ':' + location.port : ''));
 38 |       var lobby;
 39 | 
 40 |       function join () {
 41 |         // Logged into your app and Facebook.
 42 |         client.joinOrCreate("custom_lobby").then(room_instance => {
 43 |             lobby = room_instance;
 44 |             console.log(lobby.serializer);
 45 |             onjoin();
 46 |             console.log("Joined lobby room!");
 47 | 
 48 |         }).catch(e => {
 49 |             console.error("Error", e);
 50 |         });
 51 |       }
 52 | 
 53 |       function onjoin() {
 54 |           lobby.onStateChange((state) => {
 55 |               console.log("Custom lobby state:", state);
 56 |           })
 57 | 
 58 |           lobby.onMessage("rooms", (rooms) => {
 59 |               allRooms = rooms;
 60 |               update_full_list();
 61 | 
 62 |               console.log("Received full list of rooms:", allRooms);
 63 |           });
 64 | 
 65 |           lobby.onMessage("+", ([roomId, room]) => {
 66 |               const roomIndex = allRooms.findIndex((room) => room.roomId === roomId);
 67 |               if (roomIndex !== -1) {
 68 |                   console.log("Room update:", room);
 69 |                   allRooms[roomIndex] = room;
 70 | 
 71 |               } else {
 72 |                   console.log("New room", room);
 73 |                   allRooms.push(room);
 74 |               }
 75 |               update_full_list();
 76 |           });
 77 | 
 78 |           lobby.onMessage("-", (roomId) => {
 79 |               console.log("Room removed", roomId);
 80 |               allRooms = allRooms.filter((room) => room.roomId !== roomId);
 81 |               update_full_list();
 82 |           });
 83 | 
 84 |           lobby.onLeave(() => {
 85 |               allRooms = [];
 86 |               update_full_list();
 87 |               console.log("Bye, bye!");
 88 |           });
 89 |       }
 90 | 
 91 |       function update_full_list() {
 92 |         var el = document.getElementById('all_rooms');
 93 |         el.innerHTML = allRooms.map(function(room) {
 94 |             return "<li><code>" + JSON.stringify(room) + "</code></li>";
 95 |         }).join("\n");
 96 | 
 97 |       }
 98 | 
 99 |       function leave() {
100 |         if (lobby) {
101 |           lobby.leave();
102 | 
103 |         } else {
104 |           console.warn("Not connected.");
105 |         }
106 |       }
107 |     </script>
108 | 
109 |   </body>
110 | </html>
111 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "outDir": "build",
 4 |         "module": "commonjs",
 5 |         "lib": ["es6"],
 6 |         "target": "es2016",
 7 |         "declaration": true,
 8 |         "noImplicitAny": false,
 9 |         "experimentalDecorators": true,
10 |         "sourceMap": false,
11 |         "esModuleInterop": true,
12 |         "strict": true,
13 |         "allowJs": true,
14 |         "strictNullChecks": false,
15 |         "skipLibCheck": true,
16 |         "forceConsistentCasingInFileNames": true
17 |     },
18 |     "include": [
19 |       "src"
20 |     ]
21 | }
22 | 


--------------------------------------------------------------------------------