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
110
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.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 container = document.getElementById('messages');
const centrifuge = new Centrifuge('ws://localhost:8000/connection/websocket', {
timeout: 5000,
});
centrifuge.setConnectData({"user-agent": navigator.userAgent});
// 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));
});
centrifuge.on('disconnect', function(ctx){
drawText('Disconnected: ' + ctx.reason + (ctx.reconnect?", will try to reconnect":", won't try to reconnect"));
});
for (let i = 0; i < 10; i++) {
// subscribe on channel and bind various event listeners. Actual
// subscription request will be sent after client connects to
// a server.
centrifuge.subscribe(channel + i, handleMessage)
.on("join", handleJoin)
.on("leave", handleLeave)
.on("unsubscribe", handleUnsubscribe)
.on("subscribe", handleSubscribe)
.on("error", handleSubscribeError);
}
setTimeout(function () {
const rpcRequest = {"method": "getCurrentYear"};
for (let i = 0; i < 100; i++) {
// This can be whatever JSON you want.
const j = i;
centrifuge.rpc(rpcRequest).then(function(data){
drawText("RPC " + j + " response data: " + JSON.stringify(data));
}, function(err) {
drawText("RPC error: " + JSON.stringify(err));
});
}
}, 1000);
// 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 + ' (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 handleJoin(message) {
drawText('Client joined channel ' + this.channel + ' (uid ' + message.info["client"] + ', user '+ message.info["user"] +')');
}
function handleLeave(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);
}
});
</script>
</head>
<body>
<ul id="messages"></ul>
</body>
</html>
|
