-
Notifications
You must be signed in to change notification settings - Fork 102
/
index.html
95 lines (73 loc) · 2.69 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Tahoma, Geneva, sans-serif; }
</style>
<script type="text/javascript" src="colyseus.js"></script>
</head>
<body>
<h1><img src="https://github.com/gamestdio/colyseus/raw/master/examples/logo.png?raw=true" alt="colyseus"></h1>
<strong>Messages</strong><br>
<form id="form">
<input type="text" id="input" value="" />
<input type="submit" value="send" />
ping: <span id="ping"></span>
</form>
<div id="messages"></div>
<script>
var state = null
var host = window.document.location.host.replace(/:.*/, '');
var client = new Colyseus.Client('ws://' + host + ':2657');
client.onOpen.add(function (event) {
console.log(client.id, "connected!")
})
client.onMessage.add(function (event) {
console.log("Client received message!", event)
});
client.onClose.add(function (event) {
console.log("closing connection...")
})
var chatRoom = client.join("chat")
var battleRoom = null
setTimeout(function () {
var invalidBattleRoom = client.join("battle", {invalid_param: 10})
invalidBattleRoom.onError.add(function(data) {
console.error("couldn't join on battle room:", data)
battleRoom = client.join("battle")
battleRoom.onError.add(function(data) { console.error("couldn't join on battle room", data) })
})
}, 1000)
chatRoom.onJoin.add(function() {
console.log(client.id, "joined", chatRoom.name)
})
chatRoom.onLeave.add(function() {
console.log(client.id, "left", chatRoom.name)
})
chatRoom.onUpdate.addOnce(function(state, patches) {
var messages = state.messages;
for (var i=0; i<messages.length; i++) {
var node = document.createElement("p");
node.innerHTML = messages[i];
document.getElementById('messages').appendChild(node);
}
})
chatRoom.state.listen("messages/:number", "add", function(i, message) {
var node = document.createElement("p");
node.innerHTML = message;
document.getElementById('messages').appendChild(node);
});
chatRoom.onData.add(function(data) {
console.log(client.id, "received on", chatRoom.name, data)
})
document.getElementById('form').onsubmit = function(e) {
e.preventDefault()
client.send( {message: document.getElementById('input').value} )
document.getElementById('input').value = null
}
setInterval( function () {
document.querySelector('#ping').innerHTML = chatRoom.ping
}, 1000 / 60 )
</script>
</body>
</html>