136 lines
4.8 KiB
HTML
136 lines
4.8 KiB
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 %}
|