updating page when new message is sent - php

Question

This is to function in a similar way to slack. I need the page to update dynamically, in case the user is typing.
I have index.php, messages.html and newmessage.php
The chat page (index.php) looks like this:
<h1>Chat</h1>
<?php
echo file_get_contents("./messages.html") ;
?>
<br>
<form action="newmessage.php" method="post">
<input type="text" placeholder= "Compose a new message..." name="message" required>
<input type="submit"><br>
with the php looking like this in newmessage.php:
<?php
$message = $_POST["message"];
$timestamp =date('l jS \of F Y h:i:s A');
$text = "<hr>{$message} <br> from: {$_SERVER['PHP_AUTH_USER']} at: {$timestamp} <br><br> \n";
$file = fopen("./messages.html","a+ \n");
fwrite($file, $text);
fclose($file);
?>
<meta http-equiv="refresh" content="0.5;URL='/chat/index.php'"/>
<p>Sending Message...</p>
So messages show up to the user who sent the message, but not others in the chat. I can't use meta refresh in case other users are typing something and I've tried to make just the <?php echo file_get_contents("./messages.html") ; ?> refresh or use AJAX or event listeners. I need that contents to dynamically update once a new message is posted to messages.html.
Any pointers would be appreciated. Thanks in advance.
update because answer edit was rejected
function reloadData()
{
var now = new Date();
url = 'liveData?' + now.getTime();
try {
req = new XMLHttpRequest();
} catch (e) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (oc) {
alert("No AJAX Support");
return;
}
}
}
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
}
function processReqChange()
{
// If req shows "complete"
if (req.readyState == 4)
{
dataDiv = document.getElementById('currentData');
// If "OK"
if (req.status == 200)
{
// Set current data text
dataDiv.innerHTML = req.responseText;
// Start new timer (1 min)
timeoutID = setTimeout('reloadData()', 60000);
}
else
{
// Flag error
dataDiv.innerHTML = '<p>There was a problem retrieving data: ' + req.statusText + '</p>';
}
}
}

Answer 1

The best way to get the dynamic updating you are looking for would be AJAX, because you don't really want a real refresh all the time. You said, you tried AJAX? How did that approach look like?
My hint would be to get a basic understanding of web architecture. Try to understand the JS-code you found and how AJAX works. Did you work with JS before? If not, learn the basics.
Change the url variable to the url you use on your server to return the data. Yes, you will need that. Than look at the callback function (processReqChange()).
I would give you more than just hints, but in your early stage it is better to do a lot alone with some hints by more experienced developers.