How to show time at which message was sent with django channels

Question

I'm a beginner with django-channels working on a chat app. I want the "timestamp" to be shown instantly when a message is sent the room, it only works when I refresh the page as the timestamp gets saved with the models. I tried playing arround with consumers.py and the js code but was not able to send the "timestamp" instantly with the message.

*   models.py:
    class Message(models.Model):
        username = models.CharField(max_length=100)
        room = models.CharField(max_length=100)
        content = models.TextField()
        timestamp = models.DateTimeField(auto_now_add=True)
   
    consumers.py:
    class ChatConsumer(AsyncWebsocketConsumer):
        async def connect(self):
            self.room_name = self.scope['url_route']['kwargs']['room_name']
            self.room_group_name = 'chat_%s' % self.room_name
    
            # Join room
            await self.channel_layer.group_add(
                self.room_group_name,
                self.channel_name
            )
    
            await self.accept()
    
        async def disconnect(self, close_code):
            # Leave room
            await self.channel_layer.group_discard(
                self.room_group_name,
                self.channel_name
            )
    
        # Receive message from web socket
        async def receive(self, text_data):
            data = json.loads(text_data)
            message = data['message']
            username = data['username']
            room = data['room']
    
            await self.save_message(username, room, message)
    
            # Send message to room group
            await self.channel_layer.group_send(
                self.room_group_name,
                {
                    'type': 'chat_message',
                    'message': message,
                    'username': username
                }
            )
    
        # Receive message from room group
        async def chat_message(self, event):
            message = event['message']
            username = event['username']
    
            # Send message to WebSocket
            await self.send(text_data=json.dumps({
                'message': message,
                'username': username
            }))
    
        @sync_to_async
        def save_message(self, username, room, message):
            Message.objects.create(username=username, room=room, content=message
    
    
    html/js:
    {{ room_name|json_script:"json-roomname" }}
           {{ username|json_script:"json-username" }}
    
            <script>
                document.querySelector("#chat-message-input").onkeyup = function(e) {
                    if (e.keyCode === 13) {
                    document.querySelector('#chat-message-submit').click();
                    }
                };
    
                function scrollToBottom() {
                    let objDiv = document.getElementById("chat-messages");
                    objDiv.scrollTop = objDiv.scrollHeight;
                 }
    
                 scrollToBottom();
    
                 const roomName = JSON.parse(document.getElementById('json-roomname').textContent);
                 const userName = JSON.parse(document.getElementById('json-username').textContent);
    
                 const chatSocket = new WebSocket(
                    'ws://'
                    + window.location.host
                    + '/ws/'
                    + roomName
                    + '/'
                 );
    
             chatSocket.onmessage = function(e) {
                    console.log('onmessage');
    
                    const data = JSON.parse(e.data);
    
                    if (data.message) {
                            document.querySelector('#chat-messages').innerHTML += (
                            data.timestamp +
                            '<b>' + data.username + '</b>' +
                            ': ' + data.message +
                            '<hr>'
                            );
    
                    } else {
                        alert('The message is empty!');
                    }
    
                    scrollToBottom();
                };
    
    
    
                chatSocket.onclose = function(e) {
                    console.log('The socket close unexpectadly');
                };
    
                document.querySelector('#chat-message-submit').onclick = function(e) {
                    const messageInputDom = document.querySelector('#chat-message-input');
                    const message = messageInputDom.value;
    
                    chatSocket.send(JSON.stringify({
                        'message': message,
                        'username': userName,
                        'room': roomName
                    }));
    
                    messageInputDom.value = '';
                };
                </script>
*

Answer 1

Use timezone in consumers.py

from django.utils import timezone

as this:

async def chat_message(self, event):
                message = event['message']
                username = event['username']
        
                # Send message to WebSocket
                await self.send(text_data=json.dumps({
                    'message': message,
                    'username': username,
                    'timestamp': timezone.now().isoformat()
                }))

also in javascript you can change its format or localize it but it is not necessary:

var dateOptions = {hour: 'numeric', minute: 'numeric', hour12: false};
var datetime = new Date(data.timestamp).toLocaleString('en', dateOptions);