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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
input[type="text"] { width: 300px; }
.muted {color: #CCCCCC; font-size: 10px;}
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/centrifugal/centrifuge-js@master/dist/centrifuge.min.js"></script>
<script type="text/javascript">
// helper functions to work with escaping html.
const tagsToReplace = {'&': '&', '<': '<', '>': '>'};
function replaceTag(tag) {return tagsToReplace[tag] || tag;}
function safeTagsReplace(str) {return str.replace(/[&<>]/g, replaceTag);}
const channel = "chat:index";
window.addEventListener('load', function() {
const input = document.getElementById("input");
const container = document.getElementById('messages');
const centrifuge = new Centrifuge('ws://' + window.location.host + '/connection/websocket');
// bind listeners on centrifuge object instance events.
centrifuge.on('connect', function(ctx){
drawText('Connected with client ID ' + ctx.client + ' over ' + ctx.transport);
input.removeAttribute('disabled');
});
centrifuge.on('disconnect', function(ctx){
drawText('Disconnected: ' + ctx.reason + (ctx.reconnect?", will try to reconnect":", won't try to reconnect"));
input.setAttribute('disabled', 'true');
});
const sub = centrifuge.subscribe(channel, handleMessage)
.on("join", handleJoin)
.on("leave", handleLeave)
.on("unsubscribe", handleUnsubscribe)
.on("subscribe", handleSubscribe)
.on("error", handleSubscribeError);
// Trigger actual connection establishing with a server.
// At this moment actual client work starts - i.e. subscriptions
// defined start subscribing etc.
centrifuge.connect();
function handleSubscribe(ctx) {
drawText('Subscribed on channel ' + ctx.channel);
}
function handleSubscribeError(err) {
drawText('Error subscribing on channel ' + err.channel + ': ' + err.message);
console.log("subscription failed", err);
}
function handleMessage(message) {
console.log("new message received", message);
let clientID;
if (message.info){
clientID = message.info.client;
} else {
clientID = null;
}
const inputText = message.data["input"].toString();
const text = safeTagsReplace(inputText) + ' <span class="muted">from ' + clientID + '</span>';
drawText(text);
}
function handleJoin(message) {
console.log("subscription join event fired", message);
drawText('Client joined channel ' + this.channel + ' (uid ' + message.info["client"] + ', user '+ message.info["user"] +')');
}
function handleLeave(message) {
console.log("subscription leave event fired", message);
drawText('Client left channel ' + this.channel + ' (uid ' + message.info["client"] + ', user '+ message.info["user"] +')');
}
function handleUnsubscribe(sub) {
drawText('Unsubscribed from channel ' + sub.channel);
}
function drawText(text) {
let e = document.createElement('li');
e.innerHTML = [(new Date()).toString(), ' ' + text].join(':');
container.insertBefore(e, container.firstChild);
}
document.getElementById('form').addEventListener('submit', function(event) {
event.preventDefault();
sub.publish({"input": input.value}).then(function() {
console.log('message accepted by server');
}, function(err) {
console.log('error publishing message', err);
});
input.value = '';
});
});
</script>
</head>
<body>
<form id="form">
<input type="text" id="input" autocomplete="off" />
<input type="submit" id="submit" value="ยป">
</form>
<ul id="messages"></ul>
</body>
</html>
|
