나는 이미 여기 에서이 질문을했지만 어떤 답변도 효과가 없었습니다. Django에 사용자가 서로 메시지를 보낼 수있는 메시징 앱이 있습니다. 사용자가 새 메시지를 볼 수 있도록 페이지를 새로 고치고 싶습니다. 하지만 사용자가 메시지를 작성하고 x 분마다 페이지를 다시로드하려고하면 사용자가 작성하고 있던 메시지가 사라집니다. 그래서 이것을 어떻게 피할 수 있습니까?
/*This is one of the solutions that I have tried*/
window.location.reload(true);
history.go(0);
window.location.href=window.location.href;
messages.html :
{% extends 'profile/base.html' %}
{% load tz %}
{% block title %}
Messages
{% endblock %}
{% block head %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
#form {
position: fixed;
bottom: 0;
background-color:#f1f1f1;
}
.container {
border: 1px solid #dedede;
background-color: #f1f1f1;
border-radius: 5px;
padding: 1px;
margin: 1px 0;
}
.container::after {
content: "";
clear: both;
display: table;
}
.darker {
border-color: #ccc;
background-color:#ddd;
}
.container img {
float: left;
max-width: 40px;
height:40px;
width: 100%;
margin-right: 20px;
border-radius: 50%;
}
.time-left {
margin-left:61px;
color: #999;
}
h4 {
display:inline;
}
</style>
{% endblock %}
{% block content %}
{% if not chat %}
<div class="container">
Impossible de commencer un chat avec cet utilisateur ou bien vous n'avez pas acces a ce chat.
</div>
{% else %}
{% if chat %}
<div id ='bottom' class="panel">
{% for message_item in chat.message_set.all %}
{% url 'profile' message_item.author.pk as the_user_url%}
{% if message_item.is_readed %}
<div class="container">
{% else %}
<div class="container darker">
{% endif %}
<a href="{{ the_user_url }}">
<img src="{{ message_item.author.profile.avatar.url }}" alt="Avatar" style="width:100%;">
<h4><a href="{{ the_user_url }}">{{ message_item.author.profile.prenom|title }}</a></h4>
<p>{{ message_item.message }}</p>
<span class="time-left">{{ message_item.pub_date|utc }}</span>
</a>
</div>
{% endfor %}
<br><br><br><br>
</div>
</div>
{% endif %}
<div class='w3-container'>
<div id='form'>
<form method="post" action='{% url 'messages' chat.id %}'>
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value='envoyez' />
</form>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
$('document').ready(function() {
$('html').animate({scrollTop: document.body.scrollHeight},1);
});
</script>
{% endif %}
{% endblock %}
urls.py :
from django.urls import path
from . import views
urlpatterns = [
path('dialogs/<int:chat_id>/',views.MessagesView.as_view(), name='messages'),
]
메시징 앱의 경우 페이지를 다시로드하지 않고 대신 Ajax / fetch를 사용하고 메시지 가져 오기 요청을 호출 한 다음 페이지에 메시지를 표시하는 것이 좋습니다. 예를 들면 다음과 같습니다.
const getMessages = ()=>{
fetch("https://jsonplaceholder.typicode.com/comments") // use your messages request url, this is a sample
.then((response) => response.json())
.then((messages) => {
let messagesHtml = "";
for (var message of messages) {
messagesHtml += `<div>${message.name}</div>`; // use your message html structure here
}
let messagesContainer = document.getElementById("messagesContainer");
messagesContainer.innerHTML = messagesHtml;
})
.catch((err) => console.log(err));
}
setInterval(getMessages, 3000);<div id="messagesContainer"></div>페이지를 다시로드해야하는 경우 사용자가 마지막으로 입력 한 시간을 확인하고 지연된 페이지를 다시로드 할 수 있습니다. 예를 들어 키 누르기를 듣고 페이지 다시로드를 처리 할 수있는 변수를 설정할 수 있습니다.
reloadDelay = 0;
function setDelayForReload(){
reloadDelay = 3000;
}
function reloadPage(){
if(reloadDelay == 0){
window.location.reload()
}
}
setTimeout(reloadPage, 3000)<body onkeypress="setDelayForReload()">
<div id="messagesContainer"></div>
</body>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다