javascript/online-list.html

<!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>