This repository has been archived by the owner on Apr 8, 2020. It is now read-only.
/
online-list.html
74 lines (59 loc) · 2.06 KB
/
online-list.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PubNub ChatEngine</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
margin: 30px auto;
}
</style>
</head>
<body>
<div class="container">
<div class="col-sm-6 offset-sm-3">
<div class="card">
<div class="card-header">
Online Now
</div>
<ul id="online-list" class="list-group list-group-flush">
</ul>
</div>
</div>
<div id="chat-online"></div>
<script src="../node_modules/chat-engine/dist/chat-engine.js" type="text/javascript"></script>
<script type="text/javascript">
const now = new Date().getTime();
const username = ['user', now].join('-');
const onlineOutput = document.getElementById('online-list');
const ChatEngine = ChatEngineCore.create({
publishKey: 'pub-c-d8599c43-cecf-42ba-a72f-aa3b24653c2b',
subscribeKey: 'sub-c-6c6c021c-c4e2-11e7-9628-f616d8b03518'
}, {
debug: true,
globalChannel: 'chat-engine-online-example'
});
ChatEngine.on('$.ready', () => {
let onlineEvents = 0;
ChatEngine.global.on('$.online.*', (payload) => {
let div = document.createElement("li");
div.innerHTML = payload.user.uuid;
div.className += " list-group-item";
onlineOutput.appendChild(div);
onlineEvents++;
});
setInterval(function() {
console.log('users online', ChatEngine.global.users);
}, 1000);
});
ChatEngine.connect(username, {
signedOnTime: now
});
</script>
</body>
</html>