lkva/NDOJ
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make chat faster

Browse source
This commit is contained in:
cuom1999 2023-08-28 14:20:35 -05:00
parent f11d9b4b53
commit 2854ac97e9
11 changed files with 903 additions and 801 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
chat_box/migrations/0013_alter_message_time.py Normal file
View file

@ -0,0 +1,20 @@
# Generated by Django 3.2.18 on 2023-08-28 01:24
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
("chat_box", "0012_auto_20230308_1417"),
]
operations = [
migrations.AlterField(
model_name="message",
name="time",
field=models.DateTimeField(
auto_now_add=True, db_index=True, verbose_name="posted time"
),
),
]

38
chat_box/migrations/0014_userroom_unread_count.py Normal file
View file

@ -0,0 +1,38 @@
# Generated by Django 3.2.18 on 2023-08-28 06:02
from django.db import migrations, models
def migrate(apps, schema_editor):
UserRoom = apps.get_model("chat_box", "UserRoom")
Message = apps.get_model("chat_box", "Message")
for ur in UserRoom.objects.all():
if not ur.room:
continue
messages = ur.room.message_set
last_msg = messages.first()
try:
if last_msg and last_msg.author != ur.user:
ur.unread_count = messages.filter(time__gte=ur.last_seen).count()
else:
ur.unread_count = 0
ur.save()
except:
continue
class Migration(migrations.Migration):
dependencies = [
("chat_box", "0013_alter_message_time"),
]
operations = [
migrations.AddField(
model_name="userroom",
name="unread_count",
field=models.IntegerField(db_index=True, default=0),
),
migrations.RunPython(migrate, migrations.RunPython.noop, atomic=True),
]

26
chat_box/models.py
View file

@ -1,9 +1,10 @@
from django.db import models
from django.db.models import CASCADE
from django.db.models import CASCADE, Q
from django.utils.translation import gettext_lazy as _
from judge.models.profile import Profile
from judge.caching import cache_wrapper
__all__ = ["Message", "Room", "UserRoom", "Ignore"]
@ -29,7 +30,9 @@ class Room(models.Model):
class Message(models.Model):
author = models.ForeignKey(Profile, verbose_name=_("user"), on_delete=CASCADE)
time = models.DateTimeField(verbose_name=_("posted time"), auto_now_add=True)
time = models.DateTimeField(
verbose_name=_("posted time"), auto_now_add=True, db_index=True
)
body = models.TextField(verbose_name=_("body of comment"), max_length=8192)
hidden = models.BooleanField(verbose_name="is hidden", default=False)
room = models.ForeignKey(
@ -56,6 +59,7 @@ class UserRoom(models.Model):
Room, verbose_name="room id", on_delete=CASCADE, default=None, null=True
)
last_seen = models.DateTimeField(verbose_name=_("last seen"), auto_now_add=True)
unread_count = models.IntegerField(default=0, db_index=True)
class Meta:
unique_together = ("user", "room")
@ -74,11 +78,9 @@ class Ignore(models.Model):
@classmethod
def is_ignored(self, current_user, new_friend):
try:
return (
current_user.ignored_chat_users.get()
.ignored_users.filter(id=new_friend.id)
.exists()
)
return current_user.ignored_chat_users.ignored_users.filter(
id=new_friend.id
).exists()
except:
return False
@ -89,6 +91,16 @@ class Ignore(models.Model):
except:
return Profile.objects.none()
@classmethod
def get_ignored_rooms(self, user):
try:
ignored_users = self.objects.get(user=user).ignored_users.all()
return Room.objects.filter(Q(user_one=user) | Q(user_two=user)).filter(
Q(user_one__in=ignored_users) | Q(user_two__in=ignored_users)
)
except:
return Room.objects.none()
@classmethod
def add_ignore(self, current_user, friend):
ignore, created = self.objects.get_or_create(user=current_user)

35
chat_box/utils.py
View file

@ -1,10 +1,12 @@
from cryptography.fernet import Fernet
import hmac
import hashlib
from django.conf import settings
from django.db.models import OuterRef, Count, Subquery, IntegerField
from django.db.models import OuterRef, Count, Subquery, IntegerField, Q
from django.db.models.functions import Coalesce
from chat_box.models import Ignore, Message, UserRoom
from chat_box.models import Ignore, Message, UserRoom, Room
secret_key = settings.CHAT_SECRET_KEY
fernet = Fernet(secret_key)
@ -24,25 +26,22 @@ def decrypt_url(message_encrypted):
return None, None
def get_unread_boxes(profile):
ignored_users = Ignore.get_ignored_users(profile)
mess = (
Message.objects.filter(room=OuterRef("room"), time__gte=OuterRef("last_seen"))
.exclude(author=profile)
.exclude(author__in=ignored_users)
.order_by()
.values("room")
.annotate(unread_count=Count("pk"))
.values("unread_count")
def encrypt_channel(channel):
return (
hmac.new(
settings.CHAT_SECRET_KEY.encode(),
channel.encode(),
hashlib.sha512,
).hexdigest()[:16]
+ "%s" % channel
)
def get_unread_boxes(profile):
ignored_rooms = Ignore.get_ignored_rooms(profile)
unread_boxes = (
UserRoom.objects.filter(user=profile, room__isnull=False)
.annotate(
unread_count=Coalesce(Subquery(mess, output_field=IntegerField()), 0),
)
.filter(unread_count__gte=1)
UserRoom.objects.filter(user=profile, unread_count__gt=0)
.exclude(room__in=ignored_rooms)
.count()
)

176
chat_box/views.py
View file

@ -21,6 +21,7 @@ from django.db.models import (
Exists,
Count,
IntegerField,
F,
)
from django.db.models.functions import Coalesce
from django.utils import timezone
@ -34,7 +35,7 @@ from judge.jinja2.gravatar import gravatar
from judge.models import Friend
from chat_box.models import Message, Profile, Room, UserRoom, Ignore
from chat_box.utils import encrypt_url, decrypt_url
from chat_box.utils import encrypt_url, decrypt_url, encrypt_channel
import json
@ -49,7 +50,8 @@ class ChatView(ListView):
self.room_id = None
self.room = None
self.messages = None
self.page_size = 20
self.first_page_size = 20 # only for first request
self.follow_up_page_size = 50
def get_queryset(self):
return self.messages
@ -63,10 +65,12 @@ class ChatView(ListView):
def get(self, request, *args, **kwargs):
request_room = kwargs["room_id"]
page_size = self.follow_up_page_size
try:
last_id = int(request.GET.get("last_id"))
except Exception:
last_id = 1e15
page_size = self.first_page_size
only_messages = request.GET.get("only_messages")
if request_room:
@ -80,11 +84,12 @@ class ChatView(ListView):
request_room = None
self.room_id = request_room
self.messages = Message.objects.filter(
hidden=False, room=self.room_id, id__lt=last_id
)[: self.page_size]
self.messages = (
Message.objects.filter(hidden=False, room=self.room_id, id__lt=last_id)
.select_related("author", "author__user")
.defer("author__about", "author__user_script")[:page_size]
)
if not only_messages:
update_last_seen(request, **kwargs)
return super().get(request, *args, **kwargs)
return render(
@ -101,10 +106,14 @@ class ChatView(ListView):
context["title"] = self.title
context["last_msg"] = event.last()
context["status_sections"] = get_status_context(self.request)
context["status_sections"] = get_status_context(self.request.profile)
context["room"] = self.room_id
context["has_next"] = self.has_next()
context["unread_count_lobby"] = get_unread_count(None, self.request.profile)
context["chat_channel"] = encrypt_channel(
"chat_" + str(self.request.profile.id)
)
context["chat_lobby_channel"] = encrypt_channel("chat_lobby")
if self.room:
users_room = [self.room.user_one, self.room.user_two]
users_room.remove(self.request.profile)
@ -187,7 +196,7 @@ def post_message(request):
if not room:
event.post(
"chat_lobby",
encrypt_channel("chat_lobby"),
{
"type": "lobby",
"author_id": request.profile.id,
@ -199,7 +208,7 @@ def post_message(request):
else:
for user in room.users():
event.post(
"chat_" + str(user.id),
encrypt_channel("chat_" + str(user.id)),
{
"type": "private",
"author_id": request.profile.id,
@ -208,6 +217,10 @@ def post_message(request):
"tmp_id": request.POST.get("tmp_id"),
},
)
if user != request.profile:
UserRoom.objects.filter(user=user, room=room).update(
unread_count=F("unread_count") + 1
)
return JsonResponse(ret)
@ -254,35 +267,33 @@ def update_last_seen(request, **kwargs):
room_id = request.POST.get("room")
else:
return HttpResponseBadRequest()
try:
profile = request.profile
room = None
if room_id:
room = Room.objects.get(id=int(room_id))
room = Room.objects.filter(id=int(room_id)).first()
except Room.DoesNotExist:
return HttpResponseBadRequest()
except Exception as e:
return HttpResponseBadRequest()
if room and not room.contain(profile):
return HttpResponseBadRequest()
user_room, _ = UserRoom.objects.get_or_create(user=profile, room=room)
user_room.last_seen = timezone.now()
user_room.unread_count = 0
user_room.save()
return JsonResponse({"msg": "updated"})
def get_online_count():
last_two_minutes = timezone.now() - timezone.timedelta(minutes=2)
return Profile.objects.filter(last_access__gte=last_two_minutes).count()
last_5_minutes = timezone.now() - timezone.timedelta(minutes=5)
return Profile.objects.filter(last_access__gte=last_5_minutes).count()
def get_user_online_status(user):
time_diff = timezone.now() - user.last_access
is_online = time_diff <= timezone.timedelta(minutes=2)
is_online = time_diff <= timezone.timedelta(minutes=5)
return is_online
@ -319,47 +330,51 @@ def user_online_status_ajax(request):
)
def get_online_status(request_user, queryset, rooms=None):
if not queryset:
def get_online_status(profile, other_profile_ids, rooms=None):
if not other_profile_ids:
return None
last_two_minutes = timezone.now() - timezone.timedelta(minutes=2)
joined_ids = ",".join([str(id) for id in other_profile_ids])
other_profiles = Profile.objects.raw(
f"SELECT * from judge_profile where id in ({joined_ids}) order by field(id,{joined_ids})"
)
last_5_minutes = timezone.now() - timezone.timedelta(minutes=5)
ret = []
if rooms:
unread_count = get_unread_count(rooms, request_user)
unread_count = get_unread_count(rooms, profile)
count = {}
for i in unread_count:
count[i["other_user"]] = i["unread_count"]
for user in queryset:
for other_profile in other_profiles:
is_online = False
if user.last_access >= last_two_minutes:
if other_profile.last_access >= last_5_minutes:
is_online = True
user_dict = {"user": user, "is_online": is_online}
if rooms and user.id in count:
user_dict["unread_count"] = count[user.id]
user_dict["url"] = encrypt_url(request_user.id, user.id)
user_dict = {"user": other_profile, "is_online": is_online}
if rooms and other_profile.id in count:
user_dict["unread_count"] = count[other_profile.id]
user_dict["url"] = encrypt_url(profile.id, other_profile.id)
ret.append(user_dict)
return ret
def get_status_context(request, include_ignored=False):
def get_status_context(profile, include_ignored=False):
if include_ignored:
ignored_users = Profile.objects.none()
ignored_users = []
queryset = Profile.objects
else:
ignored_users = Ignore.get_ignored_users(request.profile)
ignored_users = list(
Ignore.get_ignored_users(profile).values_list("id", flat=True)
)
queryset = Profile.objects.exclude(id__in=ignored_users)
last_two_minutes = timezone.now() - timezone.timedelta(minutes=2)
last_5_minutes = timezone.now() - timezone.timedelta(minutes=5)
recent_profile = (
Room.objects.filter(Q(user_one=request.profile) | Q(user_two=request.profile))
Room.objects.filter(Q(user_one=profile) | Q(user_two=profile))
.annotate(
last_msg_time=Subquery(
Message.objects.filter(room=OuterRef("pk")).values("time")[:1]
),
other_user=Case(
When(user_one=request.profile, then="user_two"),
When(user_one=profile, then="user_two"),
default="user_one",
),
)
@ -369,50 +384,49 @@ def get_status_context(request, include_ignored=False):
.values("other_user", "id")[:20]
)
recent_profile_id = [str(i["other_user"]) for i in recent_profile]
joined_id = ",".join(recent_profile_id)
recent_profile_ids = [str(i["other_user"]) for i in recent_profile]
recent_rooms = [int(i["id"]) for i in recent_profile]
recent_list = None
if joined_id:
recent_list = Profile.objects.raw(
f"SELECT * from judge_profile where id in ({joined_id}) order by field(id,{joined_id})"
)
friend_list = (
Friend.get_friend_profiles(request.profile)
.exclude(id__in=recent_profile_id)
Friend.get_friend_profiles(profile)
.exclude(id__in=recent_profile_ids)
.exclude(id__in=ignored_users)
.order_by("-last_access")
.values_list("id", flat=True)
)
admin_list = (
queryset.filter(display_rank="admin")
.exclude(id__in=friend_list)
.exclude(id__in=recent_profile_id)
.exclude(id__in=recent_profile_ids)
.values_list("id", flat=True)
)
all_user_status = (
queryset.filter(display_rank="user", last_access__gte=last_two_minutes)
queryset.filter(last_access__gte=last_5_minutes)
.annotate(is_online=Case(default=True, output_field=BooleanField()))
.order_by("-rating")
.exclude(id__in=friend_list)
.exclude(id__in=admin_list)
.exclude(id__in=recent_profile_id)[:30]
.exclude(id__in=recent_profile_ids)
.values_list("id", flat=True)[:30]
)
return [
{
"title": "Recent",
"user_list": get_online_status(request.profile, recent_list, recent_rooms),
"user_list": get_online_status(profile, recent_profile_ids, recent_rooms),
},
{
"title": "Following",
"user_list": get_online_status(request.profile, friend_list),
"user_list": get_online_status(profile, friend_list),
},
{
"title": "Admin",
"user_list": get_online_status(request.profile, admin_list),
"user_list": get_online_status(profile, admin_list),
},
{
"title": "Other",
"user_list": get_online_status(request.profile, all_user_status),
"user_list": get_online_status(profile, all_user_status),
},
]
@ -423,7 +437,7 @@ def online_status_ajax(request):
request,
"chat/online_status.html",
{
"status_sections": get_status_context(request),
"status_sections": get_status_context(request.profile),
"unread_count_lobby": get_unread_count(None, request.profile),
},
)
@ -447,7 +461,6 @@ def get_or_create_room(request):
return HttpResponseBadRequest()
request_id, other_id = decrypt_url(decrypted_other_id)
if not other_id or not request_id or request_id != request.profile.id:
return HttpResponseBadRequest()
@ -475,48 +488,31 @@ def get_or_create_room(request):
def get_unread_count(rooms, user):
if rooms:
mess = (
Message.objects.filter(
room=OuterRef("room"), time__gte=OuterRef("last_seen")
)
.exclude(author=user)
.order_by()
.values("room")
.annotate(unread_count=Count("pk"))
.values("unread_count")
)
return (
UserRoom.objects.filter(user=user, room__in=rooms)
.annotate(
unread_count=Coalesce(Subquery(mess, output_field=IntegerField()), 0),
other_user=Case(
When(room__user_one=user, then="room__user_two"),
default="room__user_one",
),
)
.filter(unread_count__gte=1)
.values("other_user", "unread_count")
)
else: # lobby
mess = (
Message.objects.filter(room__isnull=True, time__gte=OuterRef("last_seen"))
.exclude(author=user)
.order_by()
.values("room")
.annotate(unread_count=Count("pk"))
.values("unread_count")
)
res = (
UserRoom.objects.filter(user=user, room__isnull=True)
.annotate(
unread_count=Coalesce(Subquery(mess, output_field=IntegerField()), 0),
UserRoom.objects.filter(user=user, room__in=rooms, unread_count__gt=0)
.select_related("room__user_one", "room__user_two")
.values("unread_count", "room__user_one", "room__user_two")
)
for ur in res:
ur["other_user"] = (
ur["room__user_one"]
if ur["room__user_two"] == user.id
else ur["room__user_two"]
)
.values_list("unread_count", flat=True)
return res
else: # lobby
user_room = UserRoom.objects.filter(user=user, room__isnull=True).first()
if not user_room:
return 0
last_seen = user_room.last_seen
res = (
Message.objects.filter(room__isnull=True, time__gte=last_seen)
.exclude(author=user)
.exclude(hidden=True)
.count()
)
return res[0] if len(res) else 0
return res
@login_required

3
dmoj/settings.py
View file

@ -484,3 +484,6 @@ except IOError:
pass
DEFAULT_AUTO_FIELD = "django.db.models.AutoField"
# Chat
CHAT_SECRET_KEY = "QUdVFsxk6f5-Hd8g9BXv81xMqvIZFRqMl-KbRzztW-U="

28
judge/migrations/0166_display_rank_index.py Normal file
View file

@ -0,0 +1,28 @@
# Generated by Django 3.2.18 on 2023-08-28 01:13
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
("judge", "0165_drop_output_prefix_override"),
]
operations = [
migrations.AlterField(
model_name="profile",
name="display_rank",
field=models.CharField(
choices=[
("user", "Normal User"),
("setter", "Problem Setter"),
("admin", "Admin"),
],
db_index=True,
default="user",
max_length=10,
verbose_name="display rank",
),
),
]

1
judge/models/profile.py
View file

@ -183,6 +183,7 @@ class Profile(models.Model):
("setter", "Problem Setter"),
("admin", "Admin"),
),
db_index=True,
)
mute = models.BooleanField(
verbose_name=_("comment mute"),

562
templates/chat/chat.html
View file

@ -7,21 +7,11 @@
<script type="text/javascript" src="{{ static('mathjax3_config.js') }}"></script>
<script type="text/javascript" src="{{ static('event.js') }}"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script type="module" src="https://unpkg.com/emoji-picker-element@1"></script>
<script type="text/javascript">
let message_template = `
{% with message=message_template %}
{% include "chat/message.html" %}
{% endwith %}
`;
let META_HEADER = [
"{{_('Recent')}}",
"{{_('Following')}}",
"{{_('Admin')}}",
"{{_('Other')}}",
];
</script>
{% compress js %}
{% include "chat/chat_js.html" %}
{% endcompress %}
<script type="text/javascript">
window.limit_time = 24;
window.room_id = "{{room if room else ''}}";
@ -32,73 +22,10 @@
window.pushed_messages = new Set();
let isMobile = window.matchMedia("only screen and (max-width: 799px)").matches;
function load_next_page(last_id, refresh_html=false) {
var param = {
'last_id': last_id,
'only_messages': true,
}
$.get("{{ url('chat', '') }}" + window.room_id, param)
.fail(function() {
console.log("Fail to load page, last_id = " + last_id);
})
.done(function(data) {
if (refresh_html) {
$('#chat-log').html('');
$('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
window.lock = true;
}
var time = refresh_html ? 0 : 200;
setTimeout(function() {
$(".has_next").remove();
let $chat_box = $('#chat-box');
let lastMsgPos = scrollTopOfBottom($chat_box)
$('#loader').hide();
if (refresh_html) {
$('#chat-log').append(data);
}
else {
$('#chat-log').prepend(data);
}
register_time($('.time-with-rel'));
merge_authors();
if (!refresh_html) {
$chat_box.scrollTop(scrollTopOfBottom($chat_box) - lastMsgPos);
}
else {
$('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
}
window.lock = false;
window.has_next = parseInt($(".has_next").attr("value"));
}, time);
})
}
function scrollTopOfBottom(container) {
return container[0].scrollHeight - container.innerHeight()
}
function scrollContainer(container, loader) {
container.scroll(function() {
if (container.scrollTop() == 0) {
if (!window.lock && window.has_next) {
loader.show();
var message_ids = $('.message').map(function() {
return parseInt($(this).attr('message-id'));
}).get();
load_next_page(Math.min(...message_ids));
}
}
})}
window.load_dynamic_update = function (last_msg) {
var receiver = new EventReceiver(
"{{ EVENT_DAEMON_LOCATION }}", "{{ EVENT_DAEMON_POLL_LOCATION }}",
['chat_lobby', 'chat_{{request.profile.id}}'], last_msg, function (message) {
['{{chat_lobby_channel}}', '{{chat_channel}}'], last_msg, function (message) {
if (window.pushed_messages.has(message.message)) {
return;
}
@ -115,484 +42,8 @@
return receiver;
}
function refresh_status() {
$.get("{{url('online_status_ajax')}}")
.fail(function() {
console.log("Fail to get online status");
})
.done(function(data) {
if (data.status == 403) {
console.log("Fail to retrieve data");
}
else {
$('#chat-online-list').html(data).find('.toggle').each(function () {
register_toggle($(this));
});
register_click_space();
}
})
var data = {
'user': window.other_user_id,
};
$.get("{{url('user_online_status_ajax')}}", data)
.fail(function() {
console.log("Fail to get user online status");
})
.done(function(data) {
$('#chat-info').html(data);
register_time($('.time-with-rel'));
register_setting();
})
}
function add_message(data) {
var $data = $(data);
$('#chat-log').append($data);
$('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
register_time($('.time-with-rel'));
MathJax.typeset();
merge_authors();
}
function add_new_message(message, room, is_self_author) {
function callback(update) {
if (!document['hidden']) {
if (update) update_last_seen();
refresh_status();
}
else if (!is_self_author) {
window.unread_message++;
document.title = "(" + window.unread_message + ") " + "{{ _('New message(s)') }}";
}
}
if (room == window.room_id) {
$.get({
url: "{{ url('chat_message_ajax') }}",
data: {
message: message,
},
success: function (data) {
add_message(data);
callback(true);
},
error: function (data) {
console.log('Could not add new message');
}
});
}
else {
callback(false);
}
}
function check_new_message(message, tmp_id, room) {
if (room == room_id) {
$.get({
url: "{{ url('chat_message_ajax') }}",
data: {
message: message,
},
success: function (data) {
var $body_block = $(data).find('.body-block');
if ($('#message-'+tmp_id).length) {
$('#message-'+tmp_id).replaceWith(data);
}
else if ($('#body-block-'+tmp_id).length) {
$('#body-block-'+tmp_id).replaceWith($body_block);
}
else {
add_new_message(message, room, true);
}
MathJax.typeset();
register_time($('.time-with-rel'));
remove_unread_current_user();
merge_authors();
},
error: function (data) {
console.log('Fail to check message');
var $body = $('#body-block-'+tmp_id + ' p');
$body.css('text-decoration', 'line-through');
$body.css('text-decoration-color', 'red');
}
});
}
}
function merge_authors() {
var time_limit = 5; // minutes
var last = {
username: null,
time: null,
$content: null
};
$('.body-message').each(function() {
var username = $(this).find(".username a").text().trim();
var $body = $(this).find(".content-message .body-block");
var time = moment($(this).find(".time-with-rel").attr('data-iso'));
var $content = $(this).children('.content-message');
if (username == window.user.name) {
$(this).find('.message-text').each(function() {
$(this).removeClass('message-text-other').addClass('message-text-myself');
});
}
if (username == last.username && time.diff(last.time, 'minutes') <= time_limit) {
last.$content.append($body);
$(this).parent().remove();
}
else {
last.username = username;
last.time = time;
last.$content = $content;
}
});
}
function add_message_from_template(body, tmp_id) {
var html = message_template;
html = html.replaceAll('$body', body).replaceAll('$id', tmp_id);
var $html = $(html);
$html.find('.time-with-rel').attr('data-iso', (new Date()).toISOString());
add_message($html[0].outerHTML);
}
function submit_chat() {
{% if last_msg and not request.profile.mute %}
if ($("#chat-input").val().trim()) {
var body = $('#chat-input').val().trim();
// body = body.split('\n').join('\n\n');
var message = {
body: body,
room: window.room_id,
tmp_id: Date.now(),
};
$('#chat-input').val('');
add_message_from_template(body, message.tmp_id);
$.post("{{ url('post_chat_message') }}", message)
.fail(function(res) {
console.log('Fail to send message');
})
.done(function(res, status) {
$('#empty_msg').hide();
$('#chat-input').focus();
})
}
{% endif %}
}
function resize_emoji(element) {
var html = element.html();
html = html.replace(/(\p{Extended_Pictographic})/ug, `<span class="big-emoji">$1</span>`);
element.html(html);
}
function insert_char_after_cursor(elem, char) {
var val = elem.value;
if (typeof elem.selectionStart == "number" && typeof elem.selectionEnd == "number") {
var start = elem.selectionStart;
var prefix = elem.value.slice(0, start);
var prefix_added = prefix + char;
var chars = [...val];
chars.splice([...prefix].length, 0, char);
elem.value = chars.join('');
elem.selectionStart = elem.selectionEnd = prefix_added.length;
} else if (document.selection && document.selection.createRange) {
var range = document.selection.createRange();
elem.focus();
range.text = char;
range.collapse(false);
range.select();
}
}
function load_room(encrypted_user) {
if (window.lock_click_space) return;
function callback() {
history.replaceState(null, '', "{{url('chat', '')}}" + window.room_id);
load_next_page(null, true);
update_last_seen();
refresh_status();
$('#chat-input').focus();
}
window.lock_click_space = true;
if (encrypted_user) {
$.get("{{url('get_or_create_room')}}" + `?other=${encrypted_user}`)
.done(function(data) {
window.room_id = data.room;
window.other_user_id = data.other_user_id;
callback();
})
.fail(function() {
console.log('Fail to get_or_create_room');
})
}
else {
window.room_id = '';
window.other_user_id = '';
callback();
}
window.lock_click_space = false;
}
function register_click_space() {
$('.click_space').on('click', function(e) {
if ($(this).attr('id') == 'click_space_' + window.other_user_id) {
return;
}
var other_user = $(this).attr('value');
load_room(other_user);
});
$('#lobby_row').on('click', function(e) {
if (window.room_id) {
load_room(null);
}
});
if (isMobile) {
$('#chat-tab a').click();
}
}
function update_last_seen() {
var data = {
room: window.room_id
};
$.post("{{ url('update_last_seen') }}", data)
.fail(function(data) {
console.log('Fail to update last seen');
})
.done(function(data) {
})
}
function remove_unread_current_user() {
if (window.other_user_id) {
$("#unread-count-" + window.other_user_id).hide();
}
else {
$('#unread-count-lobby').hide();
}
}
function register_setting() {
$('#setting-button').on('click', function() {
$('#setting-content').toggle();
});
$('#setting-content li').on('click', function() {
$(this).children('a')[0].click();
})
$('#setting-content a').on('click', function() {
var href = $(this).attr('href');
href += '?next=' + window.location.pathname;
$(this).attr('href', href);
})
}
$(function() {
$('#loader').hide();
merge_authors();
window.has_next = parseInt($(".has_next").attr("value"));
scrollContainer($('#chat-box'), $('#loader'))
{% if request.user.is_staff %}
$(document).on("click", ".chat_remove", function() {
var elt = $(this);
$.ajax({
url: "{{ url('delete_chat_message') }}",
type: 'post',
data: {
message: elt.attr('value'),
},
dataType: 'json',
success: function(data){
var $block = elt.parent();
if ($block.parent().find('.body-block').length > 1) {
$block.remove();
}
else {
elt.closest('li').remove();
}
},
fail: function(data) {
console.log('Fail to delete');
},
});
});
$(document).on("click", ".chat_mute", function() {
if (confirm("{{_('Mute this user and delete all messages?')}}")) {
var elt = $(this);
$.ajax({
url: "{{ url('mute_chat_message') }}",
type: 'post',
data: {
message: elt.attr('value'),
},
dataType: 'json',
success: function(data){
window.location.reload();
},
fail: function(data) {
console.log('Fail to delete');
},
});
}
});
{% endif %}
$("#chat-log").show();
$("#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) {
insert_char_after_cursor(this, "\n");
}
else {
e.preventDefault();
submit_chat();
}
return false
}
return true
});
$('.chat-right-panel').hide();
$('#chat-tab').find('a').click(function (e) {
e.preventDefault();
$('#chat-tab').addClass('active');
$('#online-tab').removeClass('active');
$('.chat-left-panel').show();
$('.chat-right-panel').hide();
});
$('#online-tab').find('a').click(function (e) {
e.preventDefault();
$('#online-tab').addClass('active');
$('#chat-tab').removeClass('active');
$('.chat-left-panel').hide();
$('.chat-right-panel').show();
});
$('#refresh-button').on('click', function(e) {
e.preventDefault();
refresh_status();
});
setInterval(refresh_status, 2 * 60 * 1000);
$('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
load_dynamic_update({{last_msg}});
const button = document.querySelector('#emoji-button');
const tooltip = document.querySelector('.tooltip');
Popper.createPopper(button, tooltip, {
placement: 'left-end',
});
function toggleEmoji() {
tooltip.classList.toggle('shown')
}
$('#emoji-button').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
toggleEmoji();
});
// Đóng bảng emoji khi click bất kỳ chỗ nào trên màn hình
document.addEventListener("click", function(e) {
if (!tooltip.contains(e.target)) {
tooltip.classList.remove('shown'); // Ẩn bảng emoji
}
});
$('emoji-picker').on('emoji-click', function(e) {
var $chat = $('#chat-input').get(0);
insert_char_after_cursor($chat, e.detail.unicode);
$chat.focus();
})
register_click_space();
document.addEventListener('keydown', function(e) {
if (e.keyCode === 27 && $('.tooltip').hasClass('shown')) {
toggleEmoji();
}
})
$('#search-handle').replaceWith($('<select>').attr({
id: 'search-handle',
name: 'other',
onchange: 'form.submit()'
}));
var in_user_redirect = false;
$('#search-handle').select2({
placeholder: '{{ _('Search by handle...') }}',
ajax: {
url: '{{ url('chat_user_search_select2_ajax') }}'
},
minimumInputLength: 1,
escapeMarkup: function (markup) {
return markup;
},
templateResult: function (data, container) {
return $('<span>')
.append($('<img>', {
'class': 'user-search-image', src: data.gravatar_url,
width: 24, height: 24
}))
.append($('<span>', {'class': data.display_rank + ' user-search-name'}).text(data.text))
.append($('<a>', {href: '/user/' + data.text, 'class': 'user-redirect'})
.append($('<i>', {'class': 'fa fa-mail-forward'}))
.mouseover(function () {
in_user_redirect = true;
}).mouseout(function () {
in_user_redirect = false;
}));
}
}).on('select2:selecting', function () {
return !in_user_redirect;
});
$("#chat-input").on("keyup", function() {
$("#chat-input").scrollTop($("#chat-input")[0].scrollHeight);
});
// https://stackoverflow.com/questions/42121565/detecting-class-change-without-setinterval
if (typeof(MutationObserver) !== undefined) {
var observer = new MutationObserver(function (event) {
if (!document['hidden'] && window.unread_message > 0) {
update_last_seen();
refresh_status();
window.unread_message = 0;
document.title = "{{_('Chat Box')}}";
}
})
observer.observe(document.body, {
attributes: true,
attributeFilter: ['class'],
childList: false,
characterData: false
})
}
register_setting();
});
</script>
@ -638,8 +89,7 @@
{% include 'chat/user_online_status.html' %}
</div>
<div id="chat-box">
<img src="{{static('loading.gif')}}" id="loader" height="2em">
<img src="{{static('loading.gif')}}" id="loader">
<ul id="chat-log" style="display: none">
{% include 'chat/message_list.html' %}
</ul>

262
templates/chat/chat_css.html
View file

@ -1,132 +1,134 @@
<style>
footer {
display: none;
}
#content {
padding-top: 0;
}
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #d6dee1;
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: #a8bbbf;
}
#page-container {
width: 100%;
}
.body-message img{
max-height: 12em;
}
.tooltip:not(.shown) {
display: none;
}
textarea {
resize: none;
}
.tooltip {
position: absolute;
z-index: 1000;
}
#loader {
display: block;
margin-left: auto;
margin-right: auto;
width: 4%;
}
.profile-pic {
height: 2.6em;
width: 2.6em;
border-radius: 0.3em;
margin-top: 0.1em;
float: left;
}
.body-message {
padding-left: 3em;
padding-bottom: 0.5em;
border-bottom: 1px dotted lightgray;
}
.user-time {
margin-bottom: 0.3em;
}
.time {
margin-left: 0.5em;
}
.clear {
clear: both;
}
.content-message {
word-wrap: break-word;
}
.content-message p {
margin: 0;
}
#content {
width: 100%;
}
#content-body {
padding-bottom: 0;
}
#page-container {
min-height: 0;
}
.sidebox h3 {
border-radius: 0;
}
.body-block {
border-radius: 4px;
padding: 0.05em 0.6em;
width: 100%;
}
#search-form {
float: inherit;
}
#search-container {
margin-bottom: 0.4em;
}
#setting {
position: relative;
}
@media (min-width: 800px) {
#page-container {
position:fixed;
overflow:hidden;
}
}
@media (max-width: 799px) {
html, body {
max-width: 100%;
overflow-x: hidden;
}
#mobile ul {
width: 100%;
}
.info-pic {
margin-left: 0.5em;
}
.active-span {
{% compress css %}
<style>
footer {
display: none;
}
}
</style>
#content {
padding-top: 0;
}
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #d6dee1;
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: #a8bbbf;
}
#page-container {
width: 100%;
}
.body-message img{
max-height: 12em;
}
.tooltip:not(.shown) {
display: none;
}
textarea {
resize: none;
}
.tooltip {
position: absolute;
z-index: 1000;
}
#loader {
display: block;
margin-left: auto;
margin-right: auto;
width: 80px;
}
.profile-pic {
height: 2.6em;
width: 2.6em;
border-radius: 0.3em;
margin-top: 0.1em;
float: left;
}
.body-message {
padding-left: 3em;
padding-bottom: 0.5em;
border-bottom: 1px dotted lightgray;
}
.user-time {
margin-bottom: 0.3em;
}
.time {
margin-left: 0.5em;
}
.clear {
clear: both;
}
.content-message {
word-wrap: break-word;
}
.content-message p {
margin: 0;
}
#content {
width: 100%;
}
#content-body {
padding-bottom: 0;
}
#page-container {
min-height: 0;
}
.sidebox h3 {
border-radius: 0;
}
.body-block {
border-radius: 4px;
padding: 0.05em 0.6em;
width: 100%;
}
#search-form {
float: inherit;
}
#search-container {
margin-bottom: 0.4em;
}
#setting {
position: relative;
}
@media (min-width: 800px) {
#page-container {
position:fixed;
overflow:hidden;
}
}
@media (max-width: 799px) {
html, body {
max-width: 100%;
overflow-x: hidden;
}
#mobile ul {
width: 100%;
}
.info-pic {
margin-left: 0.5em;
}
.active-span {
display: none;
}
}
</style>
{% endcompress %}

553
templates/chat/chat_js.html Normal file
View file

@ -0,0 +1,553 @@
<script type="text/javascript">
let message_template = `
{% with message=message_template %}
{% include "chat/message.html" %}
{% endwith %}
`;
let META_HEADER = [
"{{_('Recent')}}",
"{{_('Following')}}",
"{{_('Admin')}}",
"{{_('Other')}}",
];
function load_next_page(last_id, refresh_html=false) {
var param = {
'last_id': last_id,
'only_messages': true,
}
$.get("{{ url('chat', '') }}" + window.room_id, param)
.fail(function() {
console.log("Fail to load page, last_id = " + last_id);
})
.done(function(data) {
if (refresh_html) {
$('#chat-log').html('');
$('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
window.lock = true;
}
var time = refresh_html ? 0 : 200;
setTimeout(function() {
$(".has_next").remove();
let $chat_box = $('#chat-box');
let lastMsgPos = scrollTopOfBottom($chat_box)
$('#loader').hide();
if (refresh_html) {
$('#chat-log').append(data);
}
else {
$('#chat-log').prepend(data);
}
register_time($('.time-with-rel'));
merge_authors();
if (!refresh_html) {
$chat_box.scrollTop(scrollTopOfBottom($chat_box) - lastMsgPos);
}
else {
$('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
}
window.lock = false;
window.has_next = parseInt($(".has_next").attr("value"));
}, time);
})
}
function scrollTopOfBottom(container) {
return container[0].scrollHeight - container.innerHeight()
}
function scrollContainer(container, loader) {
container.scroll(function() {
if (container.scrollTop() == 0) {
if (!window.lock && window.has_next) {
loader.show();
var message_ids = $('.message').map(function() {
return parseInt($(this).attr('message-id'));
}).get();
load_next_page(Math.min(...message_ids));
}
}
})}
function refresh_status() {
$.get("{{url('online_status_ajax')}}")
.fail(function() {
console.log("Fail to get online status");
})
.done(function(data) {
if (data.status == 403) {
console.log("Fail to retrieve data");
}
else {
$('#chat-online-list').html(data).find('.toggle').each(function () {
register_toggle($(this));
});
register_click_space();
}
})
var data = {
'user': window.other_user_id,
};
$.get("{{url('user_online_status_ajax')}}", data)
.fail(function() {
console.log("Fail to get user online status");
})
.done(function(data) {
$('#chat-info').html(data);
register_time($('.time-with-rel'));
register_setting();
})
}
function add_message(data) {
var $data = $(data);
$('#chat-log').append($data);
$('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
register_time($('.time-with-rel'));
MathJax.typeset();
merge_authors();
}
function add_new_message(message, room, is_self_author) {
function callback(update) {
if (!document['hidden']) {
if (update) update_last_seen();
refresh_status();
}
else if (!is_self_author) {
window.unread_message++;
document.title = "(" + window.unread_message + ") " + "{{ _('New message(s)') }}";
}
}
if (room == window.room_id) {
$.get({
url: "{{ url('chat_message_ajax') }}",
data: {
message: message,
},
success: function (data) {
add_message(data);
callback(true);
},
error: function (data) {
console.log('Could not add new message');
}
});
}
else {
callback(false);
}
}
function check_new_message(message, tmp_id, room) {
if (room == room_id) {
$.get({
url: "{{ url('chat_message_ajax') }}",
data: {
message: message,
},
success: function (data) {
var $body_block = $(data).find('.body-block');
if ($('#message-'+tmp_id).length) {
$('#message-'+tmp_id).replaceWith(data);
}
else if ($('#body-block-'+tmp_id).length) {
$('#body-block-'+tmp_id).replaceWith($body_block);
}
else {
add_new_message(message, room, true);
}
MathJax.typeset();
register_time($('.time-with-rel'));
remove_unread_current_user();
merge_authors();
},
error: function (data) {
console.log('Fail to check message');
var $body = $('#body-block-'+tmp_id + ' p');
$body.css('text-decoration', 'line-through');
$body.css('text-decoration-color', 'red');
}
});
}
}
function merge_authors() {
var time_limit = 5; // minutes
var last = {
username: null,
time: null,
$content: null
};
$('.body-message').each(function() {
var username = $(this).find(".username a").text().trim();
var $body = $(this).find(".content-message .body-block");
var time = moment($(this).find(".time-with-rel").attr('data-iso'));
var $content = $(this).children('.content-message');
if (username == window.user.name) {
$(this).find('.message-text').each(function() {
$(this).removeClass('message-text-other').addClass('message-text-myself');
});
}
if (username == last.username && time.diff(last.time, 'minutes') <= time_limit) {
last.$content.append($body);
$(this).parent().remove();
}
else {
last.username = username;
last.time = time;
last.$content = $content;
}
});
}
function add_message_from_template(body, tmp_id) {
var html = message_template;
html = html.replaceAll('$body', body).replaceAll('$id', tmp_id);
var $html = $(html);
$html.find('.time-with-rel').attr('data-iso', (new Date()).toISOString());
add_message($html[0].outerHTML);
}
function submit_chat() {
{% if last_msg and not request.profile.mute %}
if ($("#chat-input").val().trim()) {
var body = $('#chat-input').val().trim();
// body = body.split('\n').join('\n\n');
var message = {
body: body,
room: window.room_id,
tmp_id: Date.now(),
};
$('#chat-input').val('');
add_message_from_template(body, message.tmp_id);
$.post("{{ url('post_chat_message') }}", message)
.fail(function(res) {
console.log('Fail to send message');
})
.done(function(res, status) {
$('#empty_msg').hide();
$('#chat-input').focus();
})
}
{% endif %}
}
function resize_emoji(element) {
var html = element.html();
html = html.replace(/(\p{Extended_Pictographic})/ug, `<span class="big-emoji">$1</span>`);
element.html(html);
}
function insert_char_after_cursor(elem, char) {
var val = elem.value;
if (typeof elem.selectionStart == "number" && typeof elem.selectionEnd == "number") {
var start = elem.selectionStart;
var prefix = elem.value.slice(0, start);
var prefix_added = prefix + char;
var chars = [...val];
chars.splice([...prefix].length, 0, char);
elem.value = chars.join('');
elem.selectionStart = elem.selectionEnd = prefix_added.length;
} else if (document.selection && document.selection.createRange) {
var range = document.selection.createRange();
elem.focus();
range.text = char;
range.collapse(false);
range.select();
}
}
function load_room(encrypted_user) {
if (window.lock_click_space) return;
function callback() {
history.replaceState(null, '', "{{url('chat', '')}}" + window.room_id);
load_next_page(null, true);
update_last_seen();
refresh_status();
$('#chat-input').focus();
}
window.lock_click_space = true;
if (encrypted_user) {
$.get("{{url('get_or_create_room')}}" + `?other=${encrypted_user}`)
.done(function(data) {
window.room_id = data.room;
window.other_user_id = data.other_user_id;
callback();
})
.fail(function() {
console.log('Fail to get_or_create_room');
})
}
else {
window.room_id = '';
window.other_user_id = '';
callback();
}
window.lock_click_space = false;
}
function register_click_space() {
$('.click_space').on('click', function(e) {
if ($(this).attr('id') == 'click_space_' + window.other_user_id) {
return;
}
var other_user = $(this).attr('value');
load_room(other_user);
});
$('#lobby_row').on('click', function(e) {
if (window.room_id) {
load_room(null);
}
});
if (isMobile) {
$('#chat-tab a').click();
}
}
function update_last_seen() {
var data = {
room: window.room_id
};
$.post("{{ url('update_last_seen') }}", data)
.fail(function(data) {
console.log('Fail to update last seen');
})
.done(function(data) {
})
}
function remove_unread_current_user() {
if (window.other_user_id) {
$("#unread-count-" + window.other_user_id).hide();
}
else {
$('#unread-count-lobby').hide();
}
}
function register_setting() {
$('#setting-button').on('click', function() {
$('#setting-content').toggle();
});
$('#setting-content li').on('click', function() {
$(this).children('a')[0].click();
})
$('#setting-content a').on('click', function() {
var href = $(this).attr('href');
href += '?next=' + window.location.pathname;
$(this).attr('href', href);
})
}
$(function() {
$('#loader').hide();
update_last_seen();
merge_authors();
window.has_next = parseInt($(".has_next").attr("value"));
scrollContainer($('#chat-box'), $('#loader'))
{% if request.user.is_staff %}
$(document).on("click", ".chat_remove", function() {
var elt = $(this);
$.ajax({
url: "{{ url('delete_chat_message') }}",
type: 'post',
data: {
message: elt.attr('value'),
},
dataType: 'json',
success: function(data){
var $block = elt.parent();
if ($block.parent().find('.body-block').length > 1) {
$block.remove();
}
else {
elt.closest('li').remove();
}
},
fail: function(data) {
console.log('Fail to delete');
},
});
});
$(document).on("click", ".chat_mute", function() {
if (confirm("{{_('Mute this user and delete all messages?')}}")) {
var elt = $(this);
$.ajax({
url: "{{ url('mute_chat_message') }}",
type: 'post',
data: {
message: elt.attr('value'),
},
dataType: 'json',
success: function(data){
window.location.reload();
},
fail: function(data) {
console.log('Fail to delete');
},
});
}
});
{% endif %}
$("#chat-log").show();
$("#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) {
insert_char_after_cursor(this, "\n");
}
else {
e.preventDefault();
submit_chat();
}
return false
}
return true
});
$('.chat-right-panel').hide();
$('#chat-tab').find('a').click(function (e) {
e.preventDefault();
$('#chat-tab').addClass('active');
$('#online-tab').removeClass('active');
$('.chat-left-panel').show();
$('.chat-right-panel').hide();
});
$('#online-tab').find('a').click(function (e) {
e.preventDefault();
$('#online-tab').addClass('active');
$('#chat-tab').removeClass('active');
$('.chat-left-panel').hide();
$('.chat-right-panel').show();
});
$('#refresh-button').on('click', function(e) {
e.preventDefault();
refresh_status();
});
setInterval(refresh_status, 2 * 60 * 1000);
$('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
const button = document.querySelector('#emoji-button');
const tooltip = document.querySelector('.tooltip');
Popper.createPopper(button, tooltip, {
placement: 'left-end',
});
function toggleEmoji() {
tooltip.classList.toggle('shown')
}
$('#emoji-button').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
toggleEmoji();
});
// Đóng bảng emoji khi click bất kỳ chỗ nào trên màn hình
document.addEventListener("click", function(e) {
if (!tooltip.contains(e.target)) {
tooltip.classList.remove('shown'); // Ẩn bảng emoji
}
});
$('emoji-picker').on('emoji-click', function(e) {
var $chat = $('#chat-input').get(0);
insert_char_after_cursor($chat, e.detail.unicode);
$chat.focus();
})
register_click_space();
document.addEventListener('keydown', function(e) {
if (e.keyCode === 27 && $('.tooltip').hasClass('shown')) {
toggleEmoji();
}
})
$('#search-handle').replaceWith($('<select>').attr({
id: 'search-handle',
name: 'other',
onchange: 'form.submit()'
}));
var in_user_redirect = false;
$('#search-handle').select2({
placeholder: '{{ _('Search by handle...') }}',
ajax: {
url: '{{ url('chat_user_search_select2_ajax') }}'
},
minimumInputLength: 1,
escapeMarkup: function (markup) {
return markup;
},
templateResult: function (data, container) {
return $('<span>')
.append($('<img>', {
'class': 'user-search-image', src: data.gravatar_url,
width: 24, height: 24
}))
.append($('<span>', {'class': data.display_rank + ' user-search-name'}).text(data.text))
.append($('<a>', {href: '/user/' + data.text, 'class': 'user-redirect'})
.append($('<i>', {'class': 'fa fa-mail-forward'}))
.mouseover(function () {
in_user_redirect = true;
}).mouseout(function () {
in_user_redirect = false;
}));
}
}).on('select2:selecting', function () {
return !in_user_redirect;
});
$("#chat-input").on("keyup", function() {
$("#chat-input").scrollTop($("#chat-input")[0].scrollHeight);
});
// https://stackoverflow.com/questions/42121565/detecting-class-change-without-setinterval
if (typeof(MutationObserver) !== undefined) {
var observer = new MutationObserver(function (event) {
if (!document['hidden'] && window.unread_message > 0) {
update_last_seen();
refresh_status();
window.unread_message = 0;
document.title = "{{_('Chat Box')}}";
}
})
observer.observe(document.body, {
attributes: true,
attributeFilter: ['class'],
childList: false,
characterData: false
})
}
register_setting();
});
</script>