diff --git a/chatter/settings.py b/chatter/settings.py index ac1bf0f..15cb4c3 100644 --- a/chatter/settings.py +++ b/chatter/settings.py @@ -159,7 +159,7 @@ LANGUAGE_CODE = 'en-us' -TIME_ZONE = 'UTC' +TIME_ZONE = "America/New_York" USE_I18N = True diff --git a/django_chatter/consumers.py b/django_chatter/consumers.py index bc7b8a1..f072496 100644 --- a/django_chatter/consumers.py +++ b/django_chatter/consumers.py @@ -3,13 +3,14 @@ --------------------------------------------------------------------------AI''' from django.contrib.auth import get_user_model from django.db import connection -from django.utils.timezone import now +from django.utils.timezone import now, get_default_timezone_name +from django.utils import dateformat '''AI-------------------------------------------------------------------------- Third-party Imports --------------------------------------------------------------------------AI''' -from channels.generic.websocket import AsyncWebsocketConsumer +from channels.generic.websocket import AsyncJsonWebsocketConsumer from channels.db import database_sync_to_async import bleach @@ -25,6 +26,7 @@ --------------------------------------------------------------------------AI''' import json from uuid import UUID +import pytz ''' @@ -72,6 +74,7 @@ def save_message(room, sender, text, multitenant=False, schema_name=None): new_message.save() room.date_modified = new_message.date_modified room.save() + return new_message.date_created else: new_message = Message(room=room, sender=sender, text=text) new_message.save() @@ -79,9 +82,10 @@ def save_message(room, sender, text, multitenant=False, schema_name=None): new_message.save() room.date_modified = new_message.date_modified room.save() + return new_message.date_created -class ChatConsumer(AsyncWebsocketConsumer): +class ChatConsumer(AsyncJsonWebsocketConsumer): ''' AI------------------------------------------------------------------- @@ -134,64 +138,57 @@ async def disconnect(self, close_code): self.channel_name ) - async def receive(self, text_data): + async def receive_json(self, data): username = self.user.username - text_data_json = json.loads(text_data) - message = text_data_json['message'] - room_id = text_data_json['room_id'] + message_type = data['type'] + if message_type == "text": + message = data['message'] + room_id = data['room_id'] - # Clean code off message if message contains code - self.message_safe = bleach.clean(message) - message_harmful = (self.message_safe != message) + # Clean code off message if message contains code + self.message_safe = bleach.clean(message) + message_harmful = (self.message_safe != message) - try: - # room = await self.get_room(room_id) - room_group_name = 'chat_%s' % room_id - except Exception as ex: - raise ex - await self.disconnect(500) - - await save_message(self.room, - self.user, - self.message_safe, - self.multitenant, - self.schema_name - ) - - if message_harmful: - warning = "Your message has been escaped due to security reasons.\ - For more information, see \ - https://en.wikipedia.org/wiki/Cross-site_scripting" - else: - warning = '' - - await self.channel_layer.group_send( - room_group_name, - { - 'type': 'send_to_websocket', - 'message': self.message_safe, - 'warning': warning, - 'sender': username, - 'room_id': room_id, - } - ) + try: + # room = await self.get_room(room_id) + room_group_name = 'chat_%s' % room_id + except Exception as ex: + raise ex + await self.disconnect(500) + + time = await save_message(self.room, + self.user, + self.message_safe, + self.multitenant, + self.schema_name + ) + + zone = pytz.timezone(get_default_timezone_name()) + time = time.astimezone(tz=zone) + formatted = dateformat.DateFormat(time) + time = formatted.format('M d, Y h:i a') + + + if message_harmful: + warning = "Your message has been escaped due to security reasons.\ + For more information, see \ + https://en.wikipedia.org/wiki/Cross-site_scripting" + else: + warning = '' + + await self.channel_layer.group_send( + room_group_name, + { + 'type': 'send_to_websocket', + 'message_type': 'text', + 'message': self.message_safe, + 'date_created': time, + 'warning': warning, + 'sender': username, + 'room_id': room_id, + } + ) async def send_to_websocket(self, event): - message = event['message'] - warning = event['warning'] - sender = event['sender'] - room_id = event['room_id'] - if warning == '': - await self.send(text_data=(json.dumps({ - 'message': message, - 'sender': sender, - 'room_id': room_id, - }))) - else: - await self.send(text_data=(json.dumps({ - 'message': message, - 'sender': sender, - 'warning': warning, - 'room_id': room_id - }))) + await self.send_json(event) diff --git a/django_chatter/models.py b/django_chatter/models.py index df83966..f03155b 100644 --- a/django_chatter/models.py +++ b/django_chatter/models.py @@ -9,6 +9,7 @@ class UserProfile(models.Model): on_delete=models.CASCADE, related_name='profile') last_visit = models.DateTimeField() + # This model is used to give date and time when a message was created/modified. class DateTimeModel(models.Model): date_created = models.DateTimeField(auto_now_add=True) @@ -17,6 +18,7 @@ class DateTimeModel(models.Model): class Meta: abstract = True + class Room(DateTimeModel): id = models.UUIDField(primary_key=True, default=uuid.uuid4, @@ -31,6 +33,7 @@ def __str__(self): return ", ".join(members_list) + class Message(DateTimeModel): sender = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name='sender') diff --git a/django_chatter/static/css/chat-window.css b/django_chatter/static/css/chat-window.css index d35151c..de22133 100644 --- a/django_chatter/static/css/chat-window.css +++ b/django_chatter/static/css/chat-window.css @@ -6,6 +6,7 @@ AI------------------------------------------------------------------- :root { --main-bg-color: #08d18e; + --bg-grey: #f0f0f0; } /*Chatter's container. Contains chatroom-list and chat-dialog*/ @@ -22,14 +23,13 @@ AI------------------------------------------------------------------- .chat-subsection { display: flex; flex-direction: column; - border: 2px solid var(--main-bg-color); + border: 1px solid var(--bg-grey); border-radius: 2px; - box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2); } .chatroom-list-container { flex-basis: 0; - flex-grow: 1; + flex-grow: 2; border-right: 0; max-width: 400px; } @@ -49,12 +49,13 @@ AI------------------------------------------------------------------- flex-basis: 0; width: 100px; /*Placeholder to enable max-width*/ max-width: 800px; + border-left: 1px solid #bebebe; } .back-button-container { height: 25px; position: absolute; - left: 10px; + left: 20px; } #back-button { position: absolute; @@ -66,8 +67,12 @@ AI------------------------------------------------------------------- justify-content: center; display: flex; flex-direction: row; - height: 40px; - border-bottom: 2px solid var(--main-bg-color); + height: 60px; + border-bottom: 2px solid var(--bg-grey); + font-size: 20px; + -webkit-box-shadow: 0 5px 10px -2px var(--bg-grey); + -moz-box-shadow: 0 5px 10px -2px var(--bg-grey); + box-shadow: 0 5px 10px -2px var(--bg-grey); } /*This is the setting for the chat history dialog.*/ @@ -75,6 +80,101 @@ AI------------------------------------------------------------------- overflow: auto; height: 96%; max-width: 100%; + padding-bottom: 5px; + display: flex; + flex-direction: column; +} + +/* +AI------------------------------------------------------------------- + The messages inside the chat-dialog have the following settings +-------------------------------------------------------------------AI +*/ + +.message-container { + display: flex; + position: relative; + flex-direction: column; +} + +/*Generic message setting that applies to all messages*/ +.message { + max-width: 60%; + padding: 15px 15px 15px 15px; + margin: 3px 10px 3px 10px; + border-radius: 20px; + vertical-align: bottom; + word-wrap: break-word; +} + +/*Messages sent by current user has these settings.*/ +.message-sent { + background: var(--main-bg-color); + color: white; + margin-left: auto; +} + +.message-received-container { + display: flex; + align-items: center; +} + +.receiver-bubble { + display: flex; + align-items: center; + justify-content: center; + color: white; + font-weight: bold; + background: var(--main-bg-color); + border-radius: 50%; + width: 30px; + height: 30px; + margin-left: 10px; +} + +/*Messages received by other users in the chat have these settings.*/ +.message-received { + background: var(--bg-grey); + color: black; + margin-right: auto; + margin-left: 5px; + max-width: 45%; +} + +/* custom margins for multiple message bubbles sent by the same user */ +.sent-reduced-bottom-margin { + margin-bottom: 0.8px; + border-bottom-right-radius: 5px; +} + +.sent-reduced-top-margin { + margin-top: 0.8px; + border-top-right-radius: 5px; +} + +.received-reduced-bottom-margin { + margin-bottom: 0.8px; + border-bottom-left-radius: 5px; +} + +.received-reduced-top-margin { + margin-top: 0.8px; + border-top-left-radius: 5px; +} + +/* Created time styles */ +.message-date-created { + font-size: 0.8rem; + background: transparent; + color: #606060; + padding: 5px 0 5px 0; + display: none; + height: 1rem; +} + +/* Custom class to process date on message received */ +.message-received-date-created { + margin-left: 45px; } /* @@ -87,8 +187,8 @@ AI------------------------------------------------------------------- padding-bottom: 2px; display: flex; justify-content: center; - border-top: 2px solid var(--main-bg-color); - height: 40px; + border-top: 2px solid var(--bg-grey); + height: 50px; } /*This is the text box where the user inputs the messages to send. @@ -100,7 +200,6 @@ It's a textarea element to enable scroll.*/ overflow: auto; resize: none; border: none; - font-family: 'Raleway', sans-serif; padding: 0 10px; } @@ -116,50 +215,11 @@ It's a textarea element to enable scroll.*/ background: transparent; font-weight: bold; font-size: 1rem; - color: var(--main-bg-color); + color: var(--bg-grey); border: none; width: 50px; } -/* -AI------------------------------------------------------------------- - The messages inside the chat-dialog have the following settings --------------------------------------------------------------------AI -*/ - -/*Generic message setting that applies to all messages*/ -.message { - max-width: 60%; - padding: 0.5em 0.5em 0.5em 0.5em; - margin: 0.2em 0.2em 0.2em 0.2em; - border-radius: 2em; - vertical-align: bottom; - clear: both; - word-wrap: break-word; -} - -/*Messages sent by current user has these settings.*/ -.message-sent { - background: var(--main-bg-color); - color: white; - float: right; -} - -.message-receiver { - color: grey; - font-size: 0.7em; - float: left; - padding: 0.2em; - margin: 0; -} - -/*Messages received by other users in the chat have these settings.*/ -.message-received { - background: #dcdcdc; - color: black; - float: left; -} - @media only screen and (min-width: 577px) { #back-button { display: none; diff --git a/django_chatter/static/css/chatroom-list.css b/django_chatter/static/css/chatroom-list.css index 8a4e0d9..29ecbac 100644 --- a/django_chatter/static/css/chatroom-list.css +++ b/django_chatter/static/css/chatroom-list.css @@ -13,22 +13,26 @@ AI------------------------------------------------------------------- flex-direction: column; } +.chatroom-list-title { + height: 60px; + display: flex; + align-items: center; + font-size: 20px; + padding-left: 20px; +} + .list-room { - height: 50px; + height: 60px; width: 100%; display: flex; align-items: center; justify-content: center; -} - -.chat-link { text-decoration: none; color: black; + font-size: 18px; + cursor:pointer; } -/* -AI------------------------------------------------------------------- - Each item in the chatroom container is a div with the following - properties. --------------------------------------------------------------------AI -*/ +.list-room:hover { + background-color: var(--bg-grey); +} diff --git a/django_chatter/static/js/chat-window.js b/django_chatter/static/js/chat-window.js index ee06aae..76ec378 100644 --- a/django_chatter/static/js/chat-window.js +++ b/django_chatter/static/js/chat-window.js @@ -1,167 +1,97 @@ /* AI------------------------------------------------------------------- - The majority of WebSocket events will take place in this - JS file. + When the document is loaded, start the websocket connection. + The webpage should load the latest 50 messages in a particular + group chat. When that is done, scroll down to the bottom to + reveal the latest messages. -------------------------------------------------------------------AI */ +$(function() { -websocket_url = ws_or_wss + window.location.host - +'/ws/chat/' + room_id + '/'; - -/* -AI------------------------------------------------------------------- - The following function opens a websocket with the current URL, - sends messages to that websocket, receives and processes messages - that are sent back from the server. --------------------------------------------------------------------AI -*/ -function startWebSocket(websocket_url) { - var chatSocket = new WebSocket( - websocket_url - ); - //Notify when the websocket is connected. - chatSocket.onopen = function(e) { - console.log('Websocket connected.'); - } - - /* - AI------------------------------------------------------------------- - When a message is received: - 1) Parse the message. - 2) Find out who the sender is. - 3) Store the message text. - 4) If there is a warning, store it. - 5) If the message is sent by the user logged into the session, - apply the correct classes to the message so it's displayed - to the right. - 6) If the message is sent by a different user, apply the correct - classes to the message so it's displayed to the left. - 7) If there are warnings in step 5 and 6, append it to the dialog - after the corresponding message. - 8) Clear the input textarea for the current user to send a new - chat message. - 9) After the messages have been rendered, scroll down to the bottom - of the dialog to the latest messages that have been sent. - -------------------------------------------------------------------AI - */ - chatSocket.onmessage=function(e) { - var data = JSON.parse(e.data); - var message = data['message']; - var warning = data['warning']; - var sender = data['sender']; - var received_room_id = data['room_id']; - if (username === sender) { - // Below line adds the current chatroom to the top - $('#' + received_room_id).parent().prepend($('#' + received_room_id)); - $('#chat-dialog').append( - '
' - + '
' + message + '
' - + '
'); - if (warning) { - $('#chat-dialog').append( - '
' - + '
' + warning + '
' - + '
'); - } + // Start websocket present in websocket.js + startWebSocket(websocket_url); - $('#send-message').val(''); - - } else { - // The room that received the new message is open right now - if (received_room_id === room_id) { - $('#'+received_room_id).css('font-weight', 'bold'); - $('#'+received_room_id).parent().prepend($('#'+received_room_id)); - $('#chat-dialog').append( - '
' - + '
' + message + '
' - + '
'); - if (warning) { - $('#chat-dialog').append( - '
' - + '
' + warning + '
' - + '
'); + // visually group messages currently present in the chat + messages = $('.message').not('.message-created-time'); + messages.each(function(index, el) { + if(index !== messages.length - 2) { + $current = messages.eq(index); + $next = messages.eq(index + 1); + if ($current.hasClass('message-received')) { + if ($next.hasClass('message-received')) { + $current.addClass('received-reduced-bottom-margin'); + $next.addClass('received-reduced-top-margin'); } } - // The room containing the new message is a different room from the current one - else { - $('#'+received_room_id).css('font-weight', 'bold'); - $('#'+received_room_id).parent().parent().prepend($('#'+received_room_id).parent()); + else if ($current.hasClass('message-sent')) { + if ($next.hasClass('message-sent')) { + $current.addClass('sent-reduced-bottom-margin'); + $next.addClass('sent-reduced-top-margin'); + } } - } - document.getElementById('chat-dialog').scrollTop - = document.getElementById('chat-dialog').scrollHeight; - } - - //Notify when the websocket closes abruptly. - chatSocket.onclose=function() { - console.log('WebSocket disconnected.'); - //setTimeout(function(){startWebSocket(websocket_url)}, 5000); - } - - //When the enter key is pressed on the textarea, trigger a click - //on the Send button. - $('#send-message').keyup(function(e) { - if (e.which === 13) { - $('#send-button').trigger('click'); - } - }); - - //When the Send button is clicked, check if its just an empty message (i.e. only spaces). - //If it is, don't send the message. Otherwise, send it to the websocket. - $('#send-button').click( function() { - if ($.trim($("#send-message").val())) { - var message = $('#send-message').val(); - chatSocket.send(JSON.stringify({ - 'message': message, - 'room_id': room_id, - })); - } + } }); -} -/* -AI------------------------------------------------------------------- - When the document is loaded, start the websocket connection. - The webpage should load the latest 50 messages in a particular - group chat. When that is done, scroll down to the bottom to - reveal the latest messages. --------------------------------------------------------------------AI -*/ -$(function() { - startWebSocket(websocket_url); + // Set the latest message as visible document.getElementById('chat-dialog').scrollTop = document.getElementById('chat-dialog').scrollHeight; + + + // Mark active room with grey focus color $active_room = $("#" + room_id); - $active_room.css("background", "#E0E0E0"); // Select current room - $('#send-message').focus(); // Focus message input on load + $active_room.css("background", "#E0E0E0"); + + // Focus message input on load + $('#send-message').focus(); }); + // Animation to slide up chat window and slide down user list in mobile devices $('#back-button').click(function() { $(this).hide(); - $('.dialog-container').slideUp("slow", function() { + $('.dialog-container').hide(400, function() { $chatroom_list = $('.chatroom-list-container'); $chatroom_list.css('width','100%'); $chatroom_list.css('max-width', '100%'); - $chatroom_list.css('border', '2px solid var(--main-bg-color)'); - $chatroom_list.slideDown(); + $chatroom_list.css('border', '2px solid var(--bg-grey)'); + $chatroom_list.show(); }); }); + // When user clicks on the chat dialog, focus the input // and change chatroom-list text to normal if it was bold before $('#chat-dialog').click(function() { $('#send-message').focus(); // Focus message input - $('#' + room_id).css('font-weight', 'normal'); + $('#' + room_id).find('.chat-list-item').css('font-weight', 'normal'); }); + // Don't select the input field when user clicks on message to enable selecting // text $('.message').click(function(e) { e.stopPropagation(); }); + // Change chatroom lists's room's font to normal on text input click $('#send-message').click(function() { - $('#' + room_id).css('font-weight', 'normal'); + $('#' + room_id).find('.chat-list-item').css('font-weight', 'normal'); +}); + +// When a user clicks on a message, show the time underneath that message +$('body').on('click', '.message-sent', function () { + $(this).next().slideToggle(200); +}); + +$('.message-sent').click(function() { + $(this).next().slideToggle(200); +}); + +$('body').on('click', '.message-received', function () { + $(this).parent().next().slideToggle(200); +}); + +$('.message-received').click(function() { + $(this).parent().next().slideToggle(200); }); diff --git a/django_chatter/static/js/index.js b/django_chatter/static/js/index.js deleted file mode 100644 index e69de29..0000000 diff --git a/django_chatter/static/js/websocket.js b/django_chatter/static/js/websocket.js new file mode 100644 index 0000000..a8cd9cc --- /dev/null +++ b/django_chatter/static/js/websocket.js @@ -0,0 +1,217 @@ +/* +AI------------------------------------------------------------------- + The majority of WebSocket events will take place in this + JS file. +-------------------------------------------------------------------AI +*/ + +//Global variable to modify HREF to tailor to secure or non-secure connections. +var http_or_https = window.location.protocol == "https:" ? "https://" : "http://"; +var ws_or_wss = window.location.protocol == "https:" ? "wss://" : "ws://"; + +websocket_url = ws_or_wss + window.location.host + +'/ws/chat/' + room_id + '/'; + +/* +AI------------------------------------------------------------------- + The following function opens a websocket with the current URL, + sends messages to that websocket, receives and processes messages + that are sent back from the server. +-------------------------------------------------------------------AI +*/ +function startWebSocket(websocket_url) { + var chatSocket = new WebSocket( + websocket_url + ); + //Notify when the websocket is connected. + chatSocket.onopen = function(e) { + console.log('Websocket connected.'); + } + + /* + AI------------------------------------------------------------------- + When a message is received: + 1) Parse the message. + 2) Find out who the sender is. + 3) Store the message text. + 4) If there is a warning, store it. + 5) If the message is sent by the user logged into the session, + apply the correct classes to the message so it's displayed + to the right. + 6) If the message is sent by a different user, apply the correct + classes to the message so it's displayed to the left. + 7) If there are warnings in step 5 and 6, append it to the dialog + after the corresponding message. + 8) Clear the input textarea for the current user to send a new + chat message. + 9) After the messages have been rendered, scroll down to the bottom + of the dialog to the latest messages that have been sent. + -------------------------------------------------------------------AI + */ + chatSocket.onmessage=function(e) { + var data = JSON.parse(e.data); + var message = data['message']; + var warning = data['warning']; + var sender = data['sender']; + var received_room_id = data['room_id']; + var date_created = data['date_created'] + if (username === sender) { + $last_message = $('.message').not('.message-date-created').last(); + if ($last_message.hasClass('message-sent')) { + $last_message.addClass('sent-reduced-bottom-margin'); + // Below line adds the current chatroom to the top + $('#' + received_room_id).parent().prepend($('#' + received_room_id)); + $('#chat-dialog').append( + '
' + + '
' + + message + + '
' + + '
' + + date_created + + '
' + + '
'); + if (warning) { + $('#chat-dialog').append( + '
' + + '
' + + warning + + '
' + + '
' + + date_created + + '
' + + '
'); + } + } + else { + $('#' + received_room_id).parent().prepend($('#' + received_room_id)); + $('#chat-dialog').append( + '
' + + '
' + + message + + '
' + + '
' + + date_created + + '
' + + '
'); + if (warning) { + $('#chat-dialog').append( + '
' + + '
' + + warning + + '
' + + '
' + + date_created + + '
' + + '
'); + } + } + + + $('#send-message').val(''); + + } else { + $last_message = $('.message').not('.message-date-created').last(); + + // If the last message has been sent by the opposition + if ($last_message.hasClass('message-received')) { + // if (received_room_id === room_id) { + $last_message.addClass('received-reduced-bottom-margin'); + $('#'+received_room_id).find('.chat-list-item').css('font-weight', 'bold'); + $('#'+received_room_id).parent().prepend($('#'+received_room_id)); + $('#chat-dialog').append( + '
' + + '
' + + '
' + + sender.charAt(0).toUpperCase() + + '
' + + '
' + + message + + '
' + + '
' + + '
' + + date_created + + '
' + + '
'); + + if (warning) { + $('#chat-dialog').append( + '
' + + '
' + + warning + + '
' + + '
' + + date_created + + '
' + + '
'); + } + } + + // Last message is not sent by the opposition + else { + $('#'+received_room_id).find('.chat-list-item').css('font-weight', 'bold'); + $('#'+received_room_id).parent().prepend($('#'+received_room_id)); + $('#chat-dialog').append( + '
' + + '
' + + '
' + + sender.charAt(0).toUpperCase() + + '
' + + '
' + + message + + '
' + + '
' + + '
' + + date_created + + '
' + + '
'); + + if (warning) { + $('#chat-dialog').append( + '
' + + '
' + + warning + + '
' + + '
' + + date_created + + '
' + + '
'); + } + } + // } + // The room containing the new message is a different room from the current one + // else { + // $('#'+received_room_id).find('.chat-list-item').css('font-weight', 'bold'); + // $('#'+received_room_id).parent().parent().prepend($('#'+received_room_id).parent()); + // } + } + document.getElementById('chat-dialog').scrollTop + = document.getElementById('chat-dialog').scrollHeight; + } + + //Notify when the websocket closes abruptly. + chatSocket.onclose=function() { + console.log('WebSocket disconnected.'); + //setTimeout(function(){startWebSocket(websocket_url)}, 5000); + } + + //When the enter key is pressed on the textarea, trigger a click + //on the Send button. + $('#send-message').keyup(function(e) { + if (e.which === 13) { + $('#send-button').trigger('click'); + } + }); + + //When the Send button is clicked, check if its just an empty message (i.e. only spaces). + //If it is, don't send the message. Otherwise, send it to the websocket. + $('#send-button').click( function() { + if ($.trim($("#send-message").val())) { + var message = $('#send-message').val(); + chatSocket.send(JSON.stringify({ + 'type': 'text', + 'message': message, + 'room_id': room_id, + })); + } + }); +} diff --git a/django_chatter/templates/django_chatter/base.html b/django_chatter/templates/django_chatter/base.html index 476ff27..5ec53dd 100644 --- a/django_chatter/templates/django_chatter/base.html +++ b/django_chatter/templates/django_chatter/base.html @@ -48,7 +48,7 @@ Child pages inherting this base must include their extra properties inside the following content block. ===========================================================AI--> - + {% block django_chatter_content %} {% endblock django_chatter_content %} diff --git a/django_chatter/templates/django_chatter/chat-window.html b/django_chatter/templates/django_chatter/chat-window.html index d04ed66..8f90147 100644 --- a/django_chatter/templates/django_chatter/chat-window.html +++ b/django_chatter/templates/django_chatter/chat-window.html @@ -54,12 +54,25 @@
{{message.text}}
+
+ {{message.date_created}} +
{% else %}
-
- {{message.text}} +
+
+ {{message.sender|make_list|first|title}} +
+
+ {{message.text}} +
+
+ {{message.date_created}} +
+
{% endif %} {% endfor %} @@ -87,6 +100,7 @@ var room_id = '{{room_uuid_json}}'; var username = '{{user.username}}'; + {% endblock django_chatter_content %} diff --git a/django_chatter/templates/django_chatter/chatroom-list.html b/django_chatter/templates/django_chatter/chatroom-list.html index 7f0c4f6..8625f02 100644 --- a/django_chatter/templates/django_chatter/chatroom-list.html +++ b/django_chatter/templates/django_chatter/chatroom-list.html @@ -12,7 +12,7 @@ The following div describes the Search bar to search for users as well as the name of the chatroom. ===========================================================AI--> - +
Chats
{% csrf_token %} diff --git a/django_chatter/tests/test_consumers.py b/django_chatter/tests/test_consumers.py index 25ae64f..4e7d713 100644 --- a/django_chatter/tests/test_consumers.py +++ b/django_chatter/tests/test_consumers.py @@ -1,19 +1,21 @@ -from django.conf import settings from channels.testing import WebsocketCommunicator from channels.routing import ProtocolTypeRouter, URLRouter -import pytest + +from django.conf import settings from django.contrib.auth import get_user_model from django.test import Client +from django.utils.timezone import now, get_default_timezone_name +from django.utils import dateformat -from django_chatter.models import Room +from django_chatter.models import Room, Message from chatter.routing import application, multitenant_application import django_chatter.routing from django_chatter.utils import ChatterMTMiddlewareStack -import json - from functional_tests.data_setup_for_tests import set_up_data +import pytz +import pytest TEST_CHANNEL_LAYERS = { 'default': { @@ -43,14 +45,14 @@ async def test_single_tenant_chat_consumer(): ) connected, subprotocol = await communicator.connect() assert connected - data = json.dumps({ + data = { + 'type': 'text', 'message': "Hello!", 'sender': user.username, 'room_id': str(room.id), - }) - await communicator.send_to(text_data=data) - response = await communicator.receive_from() - response = json.loads(response) + } + await communicator.send_json_to(data) + response = await communicator.receive_json_from() assert response['message'] == "Hello!" assert response['sender'] == "user0" assert response['room_id'] == str(room.id) @@ -78,17 +80,27 @@ async def test_multitenant_chat_consumer(): ) connected, subprotocol = await communicator.connect() assert connected - data = json.dumps({ + data = { + 'type': 'text', 'message': "Hello!", 'sender': user.username, 'room_id': str(room.id), - }) - await communicator.send_to(text_data=data) - response = await communicator.receive_from() - response = json.loads(response) - assert response['message'] == "Hello!" - assert response['sender'] == "user0" + } + await communicator.send_json_to(data) + response = await communicator.receive_json_from() + response = response + message = Message.objects.all()[0] + time = message.date_created + zone = pytz.timezone(get_default_timezone_name()) + time = time.astimezone(tz=zone) + formatted = dateformat.DateFormat(time) + time = formatted.format('M d, Y h:i a') + + assert response['message_type'] == 'text' + assert response['message'] == 'Hello!' + assert response['sender'] == 'user0' assert response['room_id'] == str(room.id) + assert response['date_created'] == time await communicator.disconnect() @pytest.mark.asyncio @@ -113,14 +125,14 @@ async def test_harmful_message_in_chat_consumer(): ) connected, subprotocol = await communicator.connect() assert connected - data = json.dumps({ + data = { + 'type': 'text', 'message': "", 'sender': user.username, 'room_id': str(room.id), - }) - await communicator.send_to(text_data=data) - response = await communicator.receive_from() - response = json.loads(response) + } + await communicator.send_json_to(data) + response = await communicator.receive_json_from() assert response['message'] == "<script>evil();</script>" assert response['sender'] == "user0" assert response['room_id'] == str(room.id)