Динамическая страница чата на канале django
На данный момент мой чат функционирует через 2 простые страницы: home.html (список чатов) и chat_room.html с полем ввода и подключением к веб-сокету:
<!DOCTYPE html>
<html>
<head>
<title>Chat Rooms</title>
</head>
<body>
<div>
<h1>Chat Rooms</h1>
<ul>
{% for room in chat_rooms %}
<li><a href="{% url 'chat_room' room.id %}">{{ room.name }}</a></li>
{% endfor %}
</ul>
</div>
</body>
</html>
chat_room.html:
<!DOCTYPE html>
<html>
<head>
<title>{{ room.name }}</title>
<script>
var room_id = {{ room.id }};
var chatSocket = new WebSocket(
'ws://' + window.location.host +
'/ws/chat/' + room_id + '/');
chatSocket.onmessage = function(e) {
var data = JSON.parse(e.data);
var message = data['message'];
var sender = data['sender'];
var chatMessages = document.querySelector('#messages');
var messageElement = document.createElement('p');
messageElement.innerHTML = '<strong>' + sender + ':</strong> ' + message;
chatMessages.appendChild(messageElement);
};
function sendMessage() {
var messageInputDom = document.querySelector('#id_content');
var message = messageInputDom.value;
var sender = "User";
chatSocket.send(JSON.stringify({
'message': message,
'sender': sender
}));
messageInputDom.value = '';
}
</script>
</head>
<body>
<h1>{{ room.name }}</h1>
<div id="messages">
{% for message in messages %}
<p><strong>{{ message.sender }}:</strong> {{ message.content }}</p>
{% endfor %}
</div>
<form id="message-form" onsubmit="event.preventDefault(); sendMessage()">
{% csrf_token %}
{{ form }}
<button type="submit">Send</button>
</form>
</body>
</html>
Обе страницы получены пользователем через рендерер просмотра:
def home(request):
chat_rooms = ChatRoom.objects.all()
return render(request, 'home.html', {'chat_rooms': chat_rooms})
def chat_room(request, room_id):
room = get_object_or_404(ChatRoom, id=room_id)
messages = room.messages.all()
form = MessageForm()
if request.method == 'POST':
form = MessageForm(request.POST)
if form.is_valid():
sender = "User"
content = form.cleaned_data['content']
Message.objects.create(room=room, sender=sender, content=content)
return redirect('chat_room', room_id=room_id)
return render(request, 'chat_room.html', {'room': room, 'messages': messages, 'form': form})
Моя основная проблема заключается в том, что я хочу избавиться от разделения этих страниц и создать динамическое переключение между чатами на одной и той же странице без необходимости переходить в chat_room.html. Я видел в одном репозитории, что подобное можно сделать с помощью javascript и дополнительных библиотек, но я не очень опытен в этом. Может ли кто-нибудь подсказать что-нибудь? (Если вам нужна дополнительная информация по проекту, дайте мне знать)