如何显示使用 django 频道发送消息的时间

Question

我是 django-channels 的初学者，正在开发聊天应用程序。我希望在消息发送到房间时立即显示“时间戳”，它仅在我刷新页面时有效，因为时间戳与模型一起保存。我尝试使用 consumers.py 和 js 代码玩游戏，但无法立即随消息发送“时间戳”。

*   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

在consumers.py

中使用timezone

from django.utils import timezone

像这样：

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()
                }))

同样在 javascript 中，您可以更改其格式或对其进行本地化，但这不是必需的：

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

如何显示使用 django 频道发送消息的时间

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

python

django

django-channels