javascript/chat.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">
                    Chat
                </div>
                <div class="card-block">
                    <div class="log" id="chat-output"></div>
                    <div class="input-group">
                        <input type="text" class="form-control message" placeholder="Your Message..." id="chat-input" onkeypress="checkSubmit(event)">
                        <span class="input-group-btn"><button class="btn btn-primary" type="submit" onclick="sendChat()">Send</button></span>
                    </div>
                </div>
            </div>
        </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 textInput = document.getElementById('chat-input');
        const textOutput = document.getElementById('chat-output');

        let sendChat = function() {}; // will be filled in when ChatEngine connects

        const ChatEngine = ChatEngineCore.create({
            publishKey: '',
            subscribeKey: ''
        }, {
            globalChannel: 'chat-engine-demo-js',
            debug: true
        });

        ChatEngine.onAny((a) => {
            // console.log(a)
        });

        ChatEngine.connect(username, {
            signedOnTime: now
        });

        ChatEngine.on('$.ready', (data) => {

            data.me.direct.onAny((a) => {
                console.log(a)
            })

            sendChat = function(e) {

                ChatEngine.global.emit('message', {
                    text: textInput.value
                });

                textInput.value = '';

                return false;

            };

            checkSubmit = function(e) {

                if (e.keyCode == 13) {
                    sendChat();
                }
            }

            ChatEngine.global.on('message', (payload) => {

                let div = document.createElement("p");
                div.innerHTML = payload.sender.uuid + ': ' + payload.data.text;
                textOutput.appendChild(div);

            });
        });
        </script>
</body>

</html>