NDOJ/templates/chat/chat.html

{% if request.user.is_authenticated %}
{% extends "base.html" %}

{% block js_media %}
<script type="text/javascript">
    var chatSocket = new WebSocket(
        'ws://' + window.location.host +
        '/ws/chat/');
</script>
<script type="text/javascript">
    $(function() {
        chatSocket.onmessage = function(e) {
            let data = JSON.parse(e.data)
            data = data['message']
            console.log(data)
            loadMessage(data['content'], 
                        data['sender'], 
                        data['time'], 
                        data['image'])
        };

        function loadMessage(content, user, time, image) {
            li = `<li> 
                    <img src="${image}" class="profile-pic">
                    <div class="body-message">
                        <div class="user-time">
                            <a href="#" class="user">
                                ${user}
                            </a>
                            <span class="time">${time}</span>
                        </div>
                        <span class="message">
                            <span>${content}</span>
                        </span>
                    </div>
                    <div class="clear"></div>
                </li>`
            ul = $('#chat-log')
            ul.append(li)
            $('#chat-log').scrollTop($('#chat-log')[0].scrollHeight);
        }


        $("#chat-submit").click(function() {
            if ($("#chat-input").val().trim()) {
                let content = $('#chat-input').val().trim();
                let img = '{{ gravatar(request.user, 32) }}'
                
                message = {
                    'content': content,
                    'image': img,
                    'time': calcTime(6), // HCM City
                    'sender': '{{ request.user }}'
                }

                chatSocket.send(JSON.stringify({
                    'message': message,
                }))
                // $.post('/chat/send', message)

                $('#chat-input').val('').focus();
            }
        });

        function calcTime(offset) {
            utc = new Date().getTime()
            nd = new Date(utc + (3600000*offset));
            return nd.toLocaleString();
        }

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

        $("#chat-log").change(function() {
            $('#chat-log').scrollTop($('#chat-log')[0].scrollHeight);
        });
        
        $('#chat-input').focus();

        $('#chat-input').keydown(function(e) {
            if (e.keyCode === 13) {
                if (e.ctrlKey || e.shiftKey) {
                    var val = this.value;
                    if (typeof this.selectionStart == "number" && typeof this.selectionEnd == "number") {
                        var start = this.selectionStart;
                        this.value = val.slice(0, start) + "\n" + val.slice(this.selectionEnd);
                        this.selectionStart = this.selectionEnd = start + 1;
                    } else if (document.selection && document.selection.createRange) {
                        this.focus();
                        var range = document.selection.createRange();
                        range.text = "\r\n";
                        range.collapse(false);
                        range.select();
                    }
                }
                else {
                    e.preventDefault();
                    $('#chat-submit').click();
                }
                return false
            }
            return true
        });

    });
</script>
{% endblock js_media %}

{% block body %}
    {% csrf_token %}
    <div id="chat-area">
        <ul id="chat-log">
            <li>
                <img src="https://via.placeholder.com/150" class="profile-pic">
                <div class="body-message">
                    <div class="user-time">
                        <a href="#" class="user">
                            cuom1999
                        </a>
                        <span class="time">12:00:00</span>
                    </div>
                    <span class="message">
                        <span>It’s possible that a request can come in via POST with an empty POST dictionary – if, say, a form is requested via the POST HTTP method but does not include form data. Therefore, you shouldn’t use if request.POST to check for use of the POST method; instead, use if request.method == "POST" (see HttpRequest.method).</span>
                    </span>
                </div>
                <div class="clear"></div>
            </li>
        </ul>    
        {{_('Your message')}}
    
        <textarea rows="6" id="chat-input"></textarea>
    </div>
    <button id="chat-submit"> Send </button>
{% endblock body %}
{% endif %}