Помогите дописать Веб приложение чат

Question

Помогите дописать Веб приложение чат

Леонид Селезнёв Знаток (404), на голосовании 5 месяцев назад

Я написал чат на Python (фреймворк Django), но я не знаю как можно реализовать возможность постоянно подгружать новые сообщения. Желаемый способ решения - JavaScript, я попробовал сделать
setTimeout(function(){
location.reload();
}, 1);
но проблема в том, что при таком способе данные из text input который есть на странице сбрасываются, как можно еще решить задачу? добавить EventListener?

Answer 1

Использовать WebSockets API.
https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/message_event

Answer 2

Для чатов используется протокол непрерывного подключения WebSocket

Answer 3

Для реализации функциональности подгрузки новых сообщений в реальном времени без сброса данных в input, лучше всего использовать AJAX-запросы в JavaScript. Таким образом, вы сможете принимать новые сообщения без перезагрузки страницы.

### Основные шаги:
1. Создайте URL-адрес обработчика на стороне сервера, который будет возвращать новые сообщения.
2. Создайте функцию на JavaScript для периодического выполнения AJAX-запросов.
3. Обновите DOM элемент, отвечающий за отображение сообщений, новым содержимым, полученным из сервера.

### Шаг 1: Создание URL-адреса обработчика на стороне сервера

В вашем Django приложении добавьте новое представление, которое будет возвращать новые сообщения в формате JSON:

#### В `views.py`:

 from django.http import JsonResponse 
from .models import Message 
 
def get_new_messages(request): 
    last_message_id = request.GET.get('last_message_id') 
    if last_message_id: 
        new_messages = Message.objects.filter(id__gt=last_message_id) 
    else: 
        new_messages = Message.objects.all() 
 
    messages_data = [{ 
        'id': message.id, 
        'author': message.author.username, 
        'content': message.content, 
    } for message in new_messages] 
 
    return JsonResponse({'messages': messages_data})

#### В `urls.py`:

 from django.urls import path 
from . import views 
 
urlpatterns = [ 
    path('get-new-messages/', views.get_new_messages, name='get_new_messages'), 
    # другие пути 
]

### Шаг 2: Создание функции AJAX в JavaScript

Теперь добавим JavaScript функцию, которая будет периодически запрашивать новые сообщения с сервера:

#### В `template.html`:

  
 
 
    Chat

вместо ВСТАВЬТЕ СЮДА ПОЛНЫЙ ПУТЬ К - с https://code.jquery.com