求助：基于Django的聊天应用消息自动刷新问题解决方案

问题概述 #

开发基于Django的聊天应用时，实现消息自动刷新遇到两个问题：

• 使用JavaScript刷新聊天div时，消息输入框内容被清空
• 刷新后聊天区域的滚动位置被重置

需要实现仅刷新消息列表、保留滚动位置、不影响输入框及其他元素的方案。

解决方案：AJAX增量更新消息 #

核心思路是通过AJAX异步获取新消息，只更新消息容器内容，同时记录并恢复滚动位置，输入框内容自然保留。

1. 新增Django视图：返回最新消息 #

在views.py中添加视图，以JSON格式返回指定群组的消息：

from django.http import JsonResponse
from .models import Message, Group
from django.contrib.auth.decorators import login_required

@login_required
def get_latest_messages(request, group_name):
    try:
        group = Group.objects.get(event_name=group_name)
        # 获取前端传递的最后消息时间戳，实现增量更新
        last_timestamp = request.GET.get('last_timestamp')
        
        if last_timestamp:
            messages = Message.objects.filter(
                group=group,
                timestamp__gt=last_timestamp
            ).values('content', 'timestamp', 'sender__id')
        else:
            # 首次加载返回全部消息
            messages = Message.objects.filter(group=group).values('content', 'timestamp', 'sender__id')
        
        # 整理为前端可直接渲染的格式
        message_list = []
        for msg in messages:
            message_list.append({
                'content': msg['content'],
                'timestamp': msg['timestamp'].isoformat(),
                'sender_id': msg['sender__id']
            })
        
        return JsonResponse({'messages': message_list})
    except Group.DoesNotExist:
        return JsonResponse({'error': '群组不存在'}, status=404)

2. 配置URL路由 #

在应用的urls.py中添加对应路由：

from django.urls import path
from . import views

urlpatterns = [
    # 原有聊天页面路由
    path('chats/<str:group_name>/', views.chat_view, name='chat'),
    # 新增获取消息的API路由
    path('chats/<str:group_name>/get_messages/', views.get_latest_messages, name='get_latest_messages'),
]

3. 修改前端模板：添加AJAX刷新逻辑 #

在chats.html的末尾添加JavaScript代码，实现定时获取消息、渲染消息并保留滚动位置：

<script>
// 记录聊天区域当前滚动位置
function saveScrollPos() {
    const chatContainer = document.getElementById('dvChat');
    return chatContainer.scrollTop;
}

// 恢复聊天区域滚动位置
function restoreScrollPos(pos) {
    const chatContainer = document.getElementById('dvChat');
    chatContainer.scrollTop = pos;
}

// 渲染单条消息
function renderSingleMessage(msg, currentUserId, avatarUrl) {
    let msgHtml;
    if (currentUserId === msg.sender_id) {
        // 自己发送的消息
        msgHtml = `
        <div class="d-flex justify-content-end mb-4">
            <div class="msg_cotainer_send">
                ${msg.content}
                <span class="msg_time_send" style="color:rgba(0,0,0,1);font-size:11;">
                    ${new Date(msg.timestamp).toLocaleString()}
                </span>
            </div>
            <div class="img_cont_msg">
                <img src="the_img" class="rounded-circle user_img_msg">
            </div>
        </div>
        `;
    } else {
        // 他人发送的消息
        msgHtml = `
        <div class="d-flex justify-content-start mb-4">
            <div class="img_cont_msg">
                <img src="${avatarUrl}" class="rounded-circle user_img_msg">
            </div>
            <div class="msg_cotainer">
                ${msg.content}
                <span class="msg_time" style="color:rgba(0,0,0,1);font-size:11;">
                    ${new Date(msg.timestamp).toLocaleString()}
                </span>
            </div>
        </div>
        `;
    }
    return msgHtml;
}

// 定时获取并更新消息
let lastTimestamp = null;
const currentUserId = {{ user.id }};
const avatarUrl = "{{ user_profile.avatar.url }}";
const groupName = "{{ current_group.event_name }}";

function updateMessages() {
    const scrollPos = saveScrollPos();
    let requestUrl = `/chats/${groupName}/get_messages/`;
    
    // 传递最后消息时间戳，实现增量更新
    if (lastTimestamp) {
        requestUrl += `?last_timestamp=${lastTimestamp}`;
    }

    fetch(requestUrl)
        .then(response => response.json())
        .then(data => {
            if (data.messages && data.messages.length > 0) {
                const chatContainer = document.getElementById('dvChat');
                data.messages.forEach(msg => {
                    chatContainer.innerHTML += renderSingleMessage(msg, currentUserId, avatarUrl);
                });
                // 更新最后消息时间戳
                lastTimestamp = data.messages[data.messages.length - 1].timestamp;
            }
            restoreScrollPos(scrollPos);
        })
        .catch(err => console.error('获取消息失败:', err));
}

// 每3秒刷新一次，可根据需求调整间隔
setInterval(updateMessages, 3000);
</script>

关键优化说明 #

1. 增量更新：通过传递最后消息时间戳，只获取新消息并追加，避免重复渲染全部内容，提升性能。
2. 滚动位置保留：刷新前记录滚动位置，渲染后恢复，避免用户浏览位置被重置。
3. 输入框内容保留：仅更新消息容器，不触动输入框所在的DOM元素，输入内容自然保留。

内容的提问来源于stack exchange，提问作者BR4NKO_97_