Automatisches Neuladen
Gibt es eine Möglichkeit das sich eine Seite automatisch aktualisiert?
Ich habe nämlich einen Chat erstellt und der Chat soll automatisch neu geladen werden.
Aktuell habe ich es nur so das mittels der Javascript Funktion loaddie Seite neu geladen wird, wenn jemand erfolgreich etwas in den Chat geschrieben hat.
Die Funktion wird ausgeführt, wenn man eine Nachricht gesendet hat.
Nun soll bei dem der KEINE Nachricht gesendet hat, die Seite auch aktualisiert werden, damit er sieht das jemand geschrieben hat. Ohne die Seite zu aktualisieren.
Beispiel:
Ich habe einen Chat erstellt:
2 Benutzer.
Benutzer A: Schreibt etwas in den Chat. Und sieht es direkt.
Benutzer B: Schreibt nichts, aber sieht die Nachricht von Benutzer A auch nicht, erst wenn er die Seite aktualisiert.
Gibt es da eine Funktion womit dies Möglich ist?
Der hier verwendete Code
<!doctype html>
<html lang="de">
<head>
<title>Mini Ajax Chat </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background:lightgrey;
}
#info{
color:red;
text-align:center;
}
h1{
text-align:center;
text-decoration:underline;
}
#chatconti{
display:flex;
flex-direction:column;
margin:0 auto;
justify-content: center;
min-width:500px;
max-width:1000px;
height:90vh;
overflow:auto;
padding:10px;
border:1px solid black;
border-radius:22px;
box-shadow:5px 5px 5px black;
}
#chat{
border:1px solid black;
border-radius:20px;
padding:10px;overflow:auto;
justify-content: center;
height:60%;
justify-content:center;
margin:0 0 10px 0;
}
#text{
justify-content: center;
width:70%;
}
#name{
padding:2px 10px;
width:70%;
}
#sendbox{
justify-content: center;
border:1px solid black;
padding:10px;
border-radius:20px;
}
label{
width:20%;
display:block;
text-align:center;
text-decoration:underline;
margin:7px;
}
#senden{
width:200px;
border-radius:5px;
height:20px;
font-size:16px;
margin:0 auto;
display:block;
}
#info{
font-size:12px;
}
.box{
display:flex;
flex-direction:column;
border-bottom:1px solid grey;
}
.oben {
display: flex;
border-bottom: 1px solid grey;
justify-content: space-between;
background:rgba(22,22,22,0.6);
color:white;
}
.user{
font-weight:900;
padding:0px 10px;
}
.text{
padding:2px 10px;
}
.time{
font-size:12px;
padding:0px 10px;
}
.line{
display:flex;
padding:2px;
}
</style>
<meta charset="UFT-8">
<script src="/js_webseite/jquery.js"></script>
</head>
<body>
<h1>Ajax Mini-Chat</h1>
<div id="chatconti">
<div id="chat"></div>
<div id="sendbox">
<div class="line">
<label>Name:</label>
<input type="name" id="name" placeholder="your name...">
</div>
<div class="line">
<label>Nachricht:</label>
<textarea id="text"></textarea>
</div>
<input type="button" id="senden" value="senden">
<small id="info"></small>
</div>
</div>
<script>
$(document).ready(function() {
var speed=3000;
var chatbox=document.getElementById('chat');
$('#senden').click(function(){
var text=$('#text').val();
var name=$('#name').val();
if(name==''){
name='Keine Angabe';
}
$.ajax({
type: 'POST',
url: '/apis/chat_senden.php',
data: {name:name,text:text},
success: function(data){
var text=$('#text').val('');
holen();
$('#info').html(data);
}
});
});
function holen(){
$.ajax({
type: 'GET',
url: '/apis/chat_holen.php?holer=ExjryKz',
success: function(data){
chatbox.innerHTML=data;
chatbox.scrollTop = chatbox.scrollHeight;
}
});
}
setInterval(holen,speed);
});
</script>
</body></html>