Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Chat Room</title>
</head>
<br>
<textarea id="chat-log" cols="100" rows="2"></textarea><br/>
<textarea id="chat-history" cols="100" rows="20"></textarea><br/>
<input id="chat-message-input" disabled="true" type="text" size="100"/><br/>
<input id="chat-message-submit" disabled="true" type="button" value="Send"/><br/>
Enter token
<input id="token-input" type="text" size="100"/><br/>
<input id="token-submit" type="button" value="Log in"/>
</body>
<script>
    var chatSocket = undefined;
    var chatStateSocket = undefined;

    var roomName = {{ room_name_json }};

    document.querySelector('#chat-message-input').focus();
    document.querySelector('#chat-message-input').onkeyup = function (e) {
        if (e.keyCode === 13) {  // enter, return
            document.querySelector('#chat-message-submit').click();
        }
    };


    function clear_log() {
        document.querySelector('#chat-log').value = ''
    }

    document.querySelector('#token-submit').onclick = function (e) {
        if (document.querySelector('#token-input').value !== '') {
            let token = document.querySelector('#token-input').value;
            if (token !== '') {
                chatSocket = new WebSocket(
                    'ws://' + window.location.host +
                    '/ws/chat/' + roomName + '/?user_token=' + token);

                chatStateSocket = new WebSocket(
                    'ws://' + window.location.host +
                    '/ws/chat_state/' + roomName + '/?user_token=' + token);

                document.querySelector('#chat-message-input').disabled = false;
                document.querySelector('#chat-message-submit').disabled = false;


                chatSocket.onmessage = function (e) {
                    var data = JSON.parse(e.data);
                    console.log(data);
                    var action = data['action'];
                    var msg_data = data['data'];
                    var message = msg_data['text'];
                    var user = msg_data['user'];
                    if (action === 'chat_message') {
                        document.querySelector('#chat-history').value += (` [${user}]: ` + message + '\n');
                    }
                };

                chatSocket.onclose = function (e) {
                    console.error('Chat socket closed unexpectedly');
                };

                chatStateSocket.onmessage = function (e) {
                    var data = JSON.parse(e.data);
                    var action = data['action'];
                    var message = data['data'];
                    if (action === 'typing') {
                        document.querySelector('#chat-log').value = (`${message['user']} ` + message['state'] + ' \n');
                        setTimeout(clear_log, 900);
                    }
                };


                chatStateSocket.onclose = function (e) {
                    console.error('Chat socket closed unexpectedly');
                };


            }
        }
    };


    document.querySelector('#chat-message-submit').onclick = function (e) {
        var messageInputDom = document.querySelector('#chat-message-input');
        var message = messageInputDom.value;
        chatSocket.send(JSON.stringify({
            'action': 'chat_message',
            'data': {'message': {
                'type': 'text',
                'text': message,
                'status': 'sent',
                'reply': null,
                'sender_id': 1,
                'chat_id': 1,
                'chat_invite_id': null,
                'file_id': null,
            }},

        }));

        messageInputDom.value = '';
    };

    document.querySelector('#chat-message-input').oninput = function (e) {
        var messageInputDom = document.querySelector('#chat-message-input');
        chatStateSocket.send(JSON.stringify({
            'action': 'typing',
            'data': {'state': 'typing'}
        }));
    };
</script>
</html>