Django - 如何在发送消息后显示用户的个人资料图片？

Question

I have a live chat application and I'm trying to display a profile picture with the message after its sent with Javascript. Here is my code...

Models.py - here is my Message and Profile model

class Message(models.Model):
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    room = models.CharField(max_length = 255)
    content = models.TextField()
    date_added = models.DateTimeField(auto_now_add = True)

    class Meta:
        ordering = ('date_added', )

class Profile(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    image = models.ImageField(default='default.png', upload_to='profile_pics')

    def __str__(self):
        return f'{self.user.username} Profile'

    def save(self, *args, **kwargs):
        super().save(*args, **kwargs)

        img = Image.open(self.image.path)

        if img.height > 300 or img.width > 300:
            output_size = (300, 300)
            img.thumbnail(output_size)
            img.save(self.image.path)

Consumers.py

class ChatRoomConsumer(AsyncWebsocketConsumer):
async def connect(self):
    self.room_name = self.scope['url_route']['kwargs']['room_name']
    self.room_group_name = 'chat_%s' % self.room_name
    print(self.room_group_name)

    await self.channel_layer.group_add(
        self.room_group_name,
        self.channel_name
    )

    await self.accept()

async def disconnect(self, close_code):
    await self.channel_layer.group_discard(
        self.room_group_name,
        self.channel_name
    )

async def receive(self, text_data):
    text_data_json = json.loads(text_data)
    message = text_data_json['message']
    username = text_data_json['username']
    room = text_data_json['room']

    await self.save_message(username, room, message)

    await self.channel_layer.group_send(
        self.room_group_name,
        {
            'type': 'chatroom_message',
            'message': message,
            'username': username,
        }
    )

async def chatroom_message(self, event):
    message = event['message']
    username = event['username']

    await self.send(text_data=json.dumps({
        'message': message,
        'username': username,
    }))

@sync_to_async
def save_message(self, username, room, message):
    user = User.objects.get(username = username)
    Message.objects.create(author = user, room = room, content = message)

pass

And here is the Javascript code for the live chat...

{{ request.user.username|json_script:"user_username" }}
{{ room_name|json_script:"room-name" }}
<script>
    const user_username = JSON.parse(document.getElementById('user_username').textContent);
    document.querySelector('#submit').onclick = function (e) {
        const messageInputDom = document.querySelector('#input');
        const message = messageInputDom.value;
        if(message.trim() == ''){
        }
        else {
            chatSocket.send(JSON.stringify({
            'message': message,
            'username': user_username,
            'room': roomName,
        }));
        messageInputDom.value = '';
        }
    };
    const roomName = JSON.parse(document.getElementById('room-name').textContent);

    const chatSocket = new WebSocket(
        'ws://' +
        window.location.host +
        '/ws/chat/' +
        roomName +
        '/'
    );

    chatSocket.onmessage = function (e) {
        const data = JSON.parse(e.data);
        console.log(data)
        if (data.message) {
                document.querySelector('#chat-text').innerHTML += ('<img id="imageid" src="{{ message.author.profile.image.url }}">' + data.username + '<br>' + data.message + '<br>');
            }
        else {

        }
    }
</script>

The problem is with this <img id="imageid" src="{{ message.author.profile.image.url }}"> in the Javascript code. So my question is, how can I display the user's profile picture with the message after its sent without refreshing the page?

Answer 1

您可以使用 Ajax 仅刷新网页的一部分，使用不同的 HTML 文档，其中包含用于显示个人资料图片的 Django HTML。

Answer 2

You don't need to use AJAX here, you are communicating with the server via WebSockets, you can get the data you need through it.

Looks like you are using django-channels. Check django-channels documentation about authentication . If you enable it, you will be able to access the current user through self.scope['user'] .

So, you will able to do something like this:

async def receive(self, text_data):
    text_data_json = json.loads(text_data)
    message = text_data_json['message']
    username = self.scope['user'].username
    profile_pic = self.scope['user'].profile.image.url  # None handling required
    room = text_data_json['room']

    await self.save_message(username, room, message)

    await self.channel_layer.group_send(
        self.room_group_name,
        {
            'type': 'chatroom_message',
            'message': message,
            'username': username,
            'profile_pic': profile_pic
        }
    )

async def chatroom_message(self, event):
    message = event['message']
    username = event['username']
    profile_pic = event['profile_pic']

    await self.send(text_data=json.dumps({
        'message': message,
        'username': username,
        'profile_pic': profile_pic
    }))

 # on the frontend
 chatSocket.onmessage = function (e) {
        const data = JSON.parse(e.data);
        console.log(data)
        if (data.message) {
                document.querySelector('#chat-text').innerHTML += (`<img id="imageid" src="${data.profile_pic}">` + data.username + '<br>' + data.message + '<br>');
            }
        else {
            
        }

Note that you can't make database calls from async context because database connector works in a synchronous manner. When you are getting a profile pic self.scope['user'].profile.image.url you are actually making a DB call to get user's profile.

What you need to do in such cases is make a db call using either database_sync_to_async or sync_to_async decorators.

For example:

from channels.db import database_sync_to_async

@database_sync_to_async
def get_user_profile(self):
    return self.scope['user'].profile
 
# and in receive method you call it
async def receive(self, text_data):
    profile = await self.get_user_profile()
    profile_pic = profile.image.url
    ....