colyseus.js
Version:
Colyseus Multiplayer SDK for JavaScript/TypeScript
177 lines (145 loc) • 5.78 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width" />
<style>
body { font-family: Tahoma, Geneva, sans-serif; }
</style>
<script src="colyseus.js"></script>
</head>
<body>
<strong>Messages</strong><br>
<form id="form">
Endpoint: <input type="text" id="endpoint" value="https://localhost:2567" /> <br />
Room name: <input type="text" id="room_name" value="my_room" /> <br />
Send data: <input type="text" id="message_type" value="" placeholder="messageType" />
<input type="text" id="message_data" value="" placeholder="data" />
<input type="submit" value="send" />
</form>
<div id="messages"></div>
<button onclick="join()">Join</button>
<button onclick="joinOrCreate()">Join or create</button>
<button onclick="create()">Create</button>
<button onclick="joinByLastId()">Join by last id</button>
<button onclick="getAvailableRooms()">List avaiable rooms</button>
<button onclick="sendRandomBytes()">Send random bytes</button>
<button onclick="closeConnection()">Close connection</button>
<button onclick="reconnect()">Re-join last closed connection</button>
<script>
var room;
function getClient() {
return new Colyseus.Client(document.getElementById('endpoint').value);
}
function addListeners (room) {
const $ = Colyseus.getStateCallbacks(room);
console.log('joined!');
room.onMessage("*", (type, message) => {
console.log("received message:", type, "=>", message);
});
// listen to player "add" events
$(room.state).players.onAdd(function(player, sessionId) {
console.log("ADD PLAYER", player);
var el = document.createElement("div");
el.id = "player-" + sessionId;
el.style.pointerEvents = "none";
el.style.display = "block";
el.style.position = "absolute";
el.style.width = "10px";
el.style.height = "10px";
el.style.backgroundColor = "red";
// el.style.left = player.x + "px";
// el.style.top = player.y + "px";
document.body.appendChild(el);
$(player).onChange(function() {
el.style.left = player.x + "px";
el.style.top = player.y + "px";
});
});
// listen to player "remove" events
$(room.state).players.onRemove(function(player, sessionId) {
var el = document.getElementById("player-" + sessionId);
el.parentNode.removeChild(el);
});
room.onMessage("*", (type, message) => {
console.log("onMessage:", { type, message });
});
var onmousemove = function (event) {
room.sendUnreliable("move", { x: event.clientX, y: event.clientY });
// room.send("move", { x: event.clientX, y: event.clientY });
};
document.addEventListener("mousemove", onmousemove);
room.onLeave(function(code, reason) {
console.log("LEFT ROOM",{code, reason});
document.removeEventListener("mousemove", onmousemove);
});
room.onError(function(code, message) {
console.log("on error:", {code, message});
});
room.onStateChange(function(state) {
// console.log("state change: ", state.toJSON());
});
}
function join () {
getClient().join(document.getElementById('room_name').value, { code: "one" }).then((r) => {
room = r;
addListeners(room);
}).catch(e => {
console.error(e.code, e.message);
});
}
function create () {
getClient().create(document.getElementById('room_name').value, { code: "one" }).then((r) => {
room = r
addListeners(room);
});
}
function joinOrCreate () {
getClient().joinOrCreate(document.getElementById('room_name').value, { code: "one" }).then((r) => {
room = r
addListeners(room);
});
}
function joinByLastId () {
getClient().joinById(room.id).then(r => {
room = r;
addListeners(room);
});
}
function sendRandomBytes() {
const bytes = new Uint8Array(32);
for (let i=0; i < bytes.length; i++) {
bytes[i] = Math.floor(Math.random() * 256);
}
console.log("sending bytes", Array.from(bytes));
room.sendBytes("bytes", bytes);
}
function getAvailableRooms() {
getClient().getAvailableRooms(document.getElementById('room_name').value).then((rooms) => {
console.log(rooms);
}).catch(e => {
console.error(e);
});
}
function reconnect() {
console.log("reconnect!", {
reconnectionToken: room.reconnectionToken,
roomId: room.roomId,
sessionId: room.sessionId,
})
getClient().reconnect(room.reconnectionToken).then(r => {
room = r;
addListeners(room);
});
}
function closeConnection() {
room.connection.close();
}
document.getElementById('form').onsubmit = function(e) {
e.preventDefault()
room.send(document.getElementById('message_type').value, document.getElementById('message_data').value);
// room.send(document.getElementById('input').value);
document.getElementById('message_data').value = null
}
</script>
</body>
</html>