gabrieltong/colyseus.js

Multiplayer Game Client for JavaScript

Multiplayer Game Client for JavaScript/TypeScript.
View documentation

Platforms

This client works on these platforms:

• Major browsers environments (Electron, Chrome, Firefox, Safari, Opera, etc)
• React Native (with some caveats)
• Cocos Creator

Browser support tested with:

Usage

Connecting to server:

import * as Colyseus from "colyseus.js";

var client = new Colyseus.Client('ws://localhost:2657');

Joining to a room:

var room = client.join("room_name");
room.onJoin.add(function() {
    console.log(client.id, "joined", room.name);
});

Listening to room state change:

Here comes the most powerful feature of the client. You can listen to every state update in the server-side, and bind them into client-side functions.

The first parameter is the path of the variable you want to listen to. When you provide placeholders (such as :number, :id, :string) to the path, they will populate the function with the value found on it. See examples below.

Listening to entities being added/removed from the room:

room.listen("entities/:id", (change) => {
    console.log(`new entity ${change.path.id}`, change.value);
});

Listening to entity attributes being added/replaced/removed:

room.listen("entities/:id/:attribute", (change) => {
    console.log(`entity ${change.path.id} changed attribute ${change.path.attribute} to ${change.value}`);
});

Other room events

Room state has been updated:

room.onStateChange.add(function(state) {
  console.log(room.name, "has new state:", state)
})

Message broadcasted from server or directly to this client:

room.onMessage.add(function(message) {
  console.log(client.id, "received on", room.name, message)
});

Server error occurred:

room.onError.add(function() {
  console.log(client.id, "couldn't join", room.name)
});

The client left the room:

room.onLeave.add(function() {
  console.log(client.id, "left", room.name)
});

Useful links

• Server documentation
• Official examples

React Native compatibility

This client works with React Native. You need to install some aditional dependencies for compatibility and assign window.localStorage to AsyncStorage.

• Install react-native-browser-polyfill (npm install react-native-browser-polyfill)

// App.js
import 'react-native-browser-polyfill';
import { AsyncStorage } from 'react-native';
import { Buffer } from "buffer";
window.localStorage = AsyncStorage;
global.Buffer = Buffer;

Another caveat is that you can only join rooms after the first connection open.

var client = new Colyseus.Client('ws://localhost:2657');

client.onOpen.add(() => {
    let room = client.join("your_room");
})

License

MIT