The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> issues with XMLHttpRequest [was "test"]
gc-malcolm
post Jun 13 2018, 05:07 AM
Post #1





Group: Members
Posts: 7
Joined: 8-May 18
Member No.: 26,641



Sorry about the name it should be " issues with XMLHttpRequest" but I had some issues creating this post and tried to make a shorter test post then found I couldn't delete that ……...

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>


This post has been edited by Christian J: Jun 13 2018, 07:50 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 13 2018, 07:50 AM
Post #2


.
********

Group: WDG Moderators
Posts: 7,894
Joined: 10-August 06
Member No.: 7



QUOTE(gc-malcolm @ Jun 13 2018, 12:07 PM) *

Sorry about the name it should be " issues with XMLHttpRequest" but I had some issues creating this post and tried to make a shorter test post then found I couldn't delete that ……...

I've changed the topic now. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
gc-malcolm
post Jun 13 2018, 02:39 PM
Post #3





Group: Members
Posts: 7
Joined: 8-May 18
Member No.: 26,641





I tried posting the whole lot but I got a message saying something to the effect it needs a post.

So I then created a test post, saying "this is a test", that was a bad move, users can't delete posts.

So then I put my original text in the "test post".

Then I couldn't change the title.

Thanks for changing the name for me.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 14 2018, 11:53 AM
Post #4


.
********

Group: WDG Moderators
Posts: 7,894
Joined: 10-August 06
Member No.: 7



(You can only edit posts for an hour, but we do have a test forum here: http://forums.htmlhelp.com/index.php?showforum=30 )

Afraid I can't help much with the Ajax part, but repeating timer scripts using setTimeout often get stuck if the browser is still waiting for the last one to finish when the next one is started. Don't know any details, alas.

A workaround might be to increment a counter value at the end of checkStatus(), and only restart instance() if both the counter value has increased and a second has passed (can't quite remember if this actually worked, but might be worth a try unsure.gif ).

A perhaps better approach than recursive Ajax calls might be to use https://en.wikipedia.org/wiki/Push_technology but I don't know any details.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
gc-malcolm
post Jun 15 2018, 04:30 AM
Post #5





Group: Members
Posts: 7
Joined: 8-May 18
Member No.: 26,641



ooops So this is acutally a reply to Christians post not to the original post. I will work out how to drive this thing eventually.

Christian,

The editing of the post wasn't a problem I changed it a few times fixing typos but changing the name proved to be difficult maybe users don't have the power. Seemed odd I couldn't delete


Thank you very much for your suggestions to my issue and shall try out your suggestions and report back.





This post has been edited by gc-malcolm: Jun 15 2018, 04:38 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
gc-malcolm
post Jun 15 2018, 06:06 AM
Post #6





Group: Members
Posts: 7
Joined: 8-May 18
Member No.: 26,641



I just spent minutes writing a reply to this post and pressed Preview Post and lost the lot. BUGGER !


So more calmly copied from a text file just in case.


Christian suggested

A workaround might be to increment a counter value at the end of checkStatus(), and only restart instance() if both the counter value has increased and a second has passed (can't quite remember if this actually worked, but might be worth a try

A perhaps better approach than recursive Ajax calls might be to use https://en.wikipedia.org/wiki/Push_technology but I don't know any details.

----

I had a look at https://en.wikipedia.org/wiki/Push_technology but I am afraid I got lost in it and thought it was a bit beyond me.

So I tried his first idea

CODE


    var x = 0;
    
    
    // so the intent here is to make sure that the time has actually progressed
    // a second from the last time this function was called
    
    
    while (x == 0)
        
    {
        seconds =  new Date() * 1;
        if (seconds < previous_seconds+1)
        { // do nothing
            appendToLog("t");
            
        }
        else if (seconds == previous_seconds +2)
        {  
            appendToLog("this shouldn't happen");
            
        }
        else
        {
            x = 1;
        }

    
    }


Tried it in edge and the php worked ok and none of the log debug lines were printed which tends to indicate the the php was not getting out of sync.

So I moved to chrome and was still busted was getting nothing from the files even though I knew there was text in them.

added

debug(root + "alert_" + area + ".txt fileSize = " + fileSize);

which gave me http://127.0.0.1/edsa-localweb/alert.txt 0

Had a look in the browser at http://127.0.0.1/edsa-localweb/ and alert.txt had a size of 10 put http://127.0.0.1/edsa-localweb/alert.txt in the browser and ended up with a blank page pressed F5 and got ten bytes on the page 0123456789

So that led me to look for Refresh and XMLHttpRequest on the web and found a number of similar thingies to mine but the best was https://stackoverflow.com/questions/1922910...-to-clear-cache which provided a fix of

CODE

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">


added the two lines to my php and

My php now works ok


I am not sure whether having no-cache is going to bite me later but for the moment it resolves my problem.

----

Thank you Christian smile.gif smile.gif smile.gif smile.gif smile.gif smile.gif smile.gif smile.gif smile.gif smile.gif


I would mark the post resolved if I could work out how to do that but sadly I can't

SOLUTION FOUND client happy

This post has been edited by gc-malcolm: Jun 15 2018, 06:13 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th September 2018 - 10:08 PM