I am hoping that there is Sherlock out there that can say I know what this is!
Background
I am creating a management program for iSpy alerts for my own use and have created an example php that uses XMLHttpRequest to read file size and read file content. The php has a recursive function that runs on a timeout that triggers a check of the file size and then a read of the file. The content of the file is written to a text area on the web page.
Sometimes it works and sometimes NOT. I have found that in Firefox, Edge and Chrome my php will often display data that is incorrect, that is, the data is from an earlier read, the file being read can be edited and saved but the output from the php does not match the most recent content in the file. Once this occurs it seems to then not work in any browser Chrome Firefox or Edge until I edit the php save that and restart the weeb page, at which point it MAY come good, muck around for a bit, editing saving and it ultimately it works again until it eventually breaks.
The browser and web server are on the same machine. There is no intent to try and make this work over the wider internet, I understand that reading (writing) files on the Client side could be somewhat .ah. bad
I have attached file_ops_example.php that intermittently triggers this "issue".
Environment
PHP Dev Server and Apache
webspace c:\localweb called edsa-localweb which is hard coded in the file_ops_example.php and would need to be changed for other environments should you wish to try it
a text file alert.txt in the localweb directory ( only needs to contain a single character )
Method
in a browser launch file_ops_eample.php and a text box is displayed on the web page, a javascript function is run in the php that recursively triggers a read of the alert.txt file every second and echos the content to the web page text box
repeat
edit alert.txt and change the content of the file ( it only needs to be one or more characters in my final app its only reading a time stamp nnnnnnnnnnn )
eventually the content being displayed may stop being what you are putting in the text file and it will be something from earlier
change the browser and try the new browser the information displayed by the browser may or may not be correct, but probably incorrect
I found that I can fix the issue in Edge by editing the function checkStatus in file_ops_eample.php and removing the // in front of the line debug... saving the file and tehn refeshing the web page in the browser this puts some extra text on the screen ( a file size) then add the // to the debug line save and refresh the browser and hey presto it's ok again, until it breaks.
Conclusion
I suspect that this is a security issue that is triggered after some time and that the saving of the php with a different filesize somehow resolves some conflict. Or it could be voodoo.
Ultimately I want to use Chrome ( where this problem manifests the most ) Why chrome? Because I am able to display video from a camera in chrome, not in other browsers, and I can cast chrome sticking the web page on a television, "flashing Warning Will Robinson". (the flashing warning is not demonstrated in the sample program )
So, I hope that my explanation has been detailed enough and that someone can offer a "fix", or a reason for what's happening.
alert.txt
anytext (typically nnnnnnnnn for seconds )
file_ops_example.php
CODE
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style_a.css">
<meta charset="utf-8">
<title>file_ops</title>
<!--
About manage parse file and determine
-->
<body>
<br><br><br><br><br>read file and write it to text box<br><br><br><br>
<form name ="myform2">
<textarea name="txt_file_content" cols="50" rows="20"></textarea>
<script>
var seconds = new Date() * 1;
var previous_seconds = seconds;
// ==========================================
function checkStatus()
{
root = "http://127.0.0.1/edsa-localweb/";
alert_file = root + "alert.txt";
var fileSize = getFileSize(alert_file);
var timestamp = "";
//debug("fileSize = " + fileSize); // uncomment this line and save to ""fix "" the bug/issue
// refresh the web page
if (fileSize > 0)
{
timestamp = readTextFile(alert_file);
var time_string = "";
appendToLog(timestamp );
}
}
// ==========================================
function getFileSize(file)
{
var fileSize = '';
var http = new XMLHttpRequest();
http.open("GET", file, false); // false = Synchronous
http.onreadystatechange = function ()
{
if(http.readyState === 4)
{
if(http.status === 200 )
{
fileSize = http.getResponseHeader('content-length');
}
}
}
http.send(null);
http.abort();
return fileSize;
}
// ==========================================
function readTextFile(file)
{
var rawFile = new XMLHttpRequest();
allText = "";
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
allText = rawFile.responseText;
}
}
}
rawFile.send(null);
rawFile.abort();
return allText;
}
// ==========================================
function appendToLog(mytext)
{
document.myform2.txt_file_content.value += "\n" + mytext;
document.myform2.txt_file_content.scrollTop = document.myform2.txt_file_content.scrollHeight +5;
}
// ==========================================
function debug(mystring)
{
document.myform2.txt_file_content.value += "\ndebug "+ mystring;
}
// ==========================================
function instance()
{
// accurate timer
// https://www.sitepoint.com/creating-accurate-timers-in-javascript/
// so forget about the accuracy for the momeent and just run every second ish
checkStatus();
// call yourself again for a futher 1 second
window.setTimeout(instance,1000);
}
// this next line calls instance which is recursive and that inturn calls checkStatus()
window.setTimeout(instance,1000);
</script>
</body>
</html>