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
|
<!DOCTYPE html>
<html lang="en">
<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";
window.addEventListener('load', function() {
const centrifuge = new Centrifuge('ws://localhost:8000/connection/websocket');
fetch('http://localhost:8000/token').then((response) => {
return response.json();
}).then((data) => {
centrifuge.setToken(data['token']);
centrifuge.connect();
});
const input = document.getElementById("input");
const container = document.getElementById('messages');
// bind listeners on centrifuge object instance events.
centrifuge.on('connect', function(ctx){
drawText('Connected with client ID ' + ctx.client + ' over ' + ctx.transport + ' with data: ' + JSON.stringify(ctx.data));
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');
});
// subscribe on channel and bind various event listeners. Actual
// subscription request will be sent after client connects to
// a server.
const sub = centrifuge.subscribe(channel, handleMessage)
.on("unsubscribe", handleUnsubscribe)
.on("subscribe", handleSubscribe)
.on("error", handleSubscribeError);
function handleSubscribe(ctx) {
drawText('Subscribed on channel ' + ctx.channel + ' (resubscribed: ' + ctx.isResubscribe + ', recovered: ' + ctx.recovered + ')');
}
function handleSubscribeError(err) {
drawText('Error subscribing on channel ' + err.channel + ': ' + err.message);
}
function handleMessage(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 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">
<label for="input"></label><input type="text" id="input" autocomplete="off" />
<input type="submit" id="submit" value="ยป">
</form>
<ul id="messages"></ul>
</body>
</html>
|
