The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Help with HTTP request 'Get', Display HEX data received correctly.
xtech007
post Oct 23 2020, 10:59 PM
Post #1





Group: Members
Posts: 4
Joined: 23-October 20
Member No.: 27,601



Hi All!
Thank you in advance for your valuable time.
This is my first Post but I have been reading lots for a while here.
I'm self taught, and thanks to forums and folks like you guys I have reached this far!

So, here is my issue:
I have a webpage with 2 html files. Page 1 and Page 2. Both request specific data from a device (Nodemcu) via serial.
When load page 1 will request data from a device and when received it will display it.
expected data is : 7d 03 18 07 05 00 00 00 00 00 00 96 00 00 00 39 00 00 00 8a 00 00 00 64 00 00 56 07.
and it works fine!
when I click on Page 2 it does the same and display its data as well correctly.
but when I click on page 1 again it will display the data Correctly once and then after its position changes to something like:
56 07 7d 03 18 07 05 00 00 00 00 00 00 96 00 00 00 39 00 00 00 8a 00 00 00 64 00 00.

This Only happens to page 1. I have tried to see if this happens to page 2 by doing the reverse but No, data always lines up.

I have attached html files & css files for review.
This is what I used on the request part:
CODE
setInterval(function() {
    Getstring();
  }, 3000);

  function Getstring(){
    var xhttp = new XMLHttpRequest();
    var page1;
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        page1 = String(this.responseText);
        document.getElementById("SENSORValue").innerHTML = page1;
      }
    };
    xhttp.open("GET", "/getDATA1", true);
    xhttp.send();
  }

when the device gets the getData1 it sends the requested Data.
Same with page 2:
CODE

setInterval(function() {
    Getstring();
  }, 3000);

function Getstring(){
  var xhttp = new XMLHttpRequest();
  var page2;
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      page2 = String(this.responseText);
      document.getElementById("SENSORValue").innerHTML = page2;
    }
  };
  xhttp.open("GET", "/getDATA2", true);
  xhttp.send();


Hope to hear your opinion!

This post has been edited by xtech007: Oct 23 2020, 11:04 PM


Attached File(s)
Attached File  data.zip ( 2.38k ) Number of downloads: 111
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
xtech007
post Oct 23 2020, 11:11 PM
Post #2





Group: Members
Posts: 4
Joined: 23-October 20
Member No.: 27,601



And here is the Video!
https://youtu.be/16lJtpXxmeQ
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 25 2020, 03:40 PM
Post #3


.
********

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



Hi!



QUOTE(xtech007 @ Oct 24 2020, 04:59 AM) *

I have a webpage with 2 html files. Page 1 and Page 2. Both request specific data from a device (Nodemcu) via serial.

What is the Nodemcu device doing with the GET request? I suppose it runs some kind of script to differentiate between "/getDATA1" and "/getDATA2"?

QUOTE
This Only happens to page 1. I have tried to see if this happens to page 2 by doing the reverse but No, data always lines up.

I don't know Ajax that well, but I see nothing different between the two scripts that could explain this. So my guess is it has something to do with the Nodemcu device.

What about page3.html? It appears to send a "/getADC" request. BTW, on page3.html the "disabled" CLASS seems to be in the wrong link:

CODE
<a class="btn btn-primary disabled" href="page1.html" role="button">Page 1</a>
<a class="btn btn-primary" href="page2.html" role="button">Page 2</a>
<a class="btn btn-primary" href="/" role="button">Page 3</a>

also there's no CSS rule using that CLASS name (in any case, if you want to disable a link you should remove its HREF attribute).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
xtech007
post Oct 25 2020, 10:54 PM
Post #4





Group: Members
Posts: 4
Joined: 23-October 20
Member No.: 27,601



Thank you for your interest!
The GETdata1 &2 actually activates a Functions that it request data from a sensor via serial , waits for response, gets the response converts it to a string and sends it to the server as page1 & page2.

After few test, it seems that the size difference of the string from page1 to page2 is the issue.
Browser is not adjusting and chopping the data it receives.
Exp: let’s say page1 at load receive a string with 80 index.
As long as we don’t go to any other page is fine.
But if we go to page2 onload it receives 120 index.
When we click on page1 again it loads the first 80 from the120, second read it add the last 40 and so forth till data miss align completely.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 26 2020, 09:14 AM
Post #5


.
********

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



QUOTE(xtech007 @ Oct 26 2020, 04:54 AM) *

After few test, it seems that the size difference of the string from page1 to page2 is the issue.
Browser is not adjusting and chopping the data it receives.
Exp: let’s say page1 at load receive a string with 80 index.
As long as we don’t go to any other page is fine.
But if we go to page2 onload it receives 120 index.
When we click on page1 again it loads the first 80 from the120, second read it add the last 40 and so forth till data miss align completely.

In my feeble understanding that shouldn't be possible (even if page1 was cached), after all it's two different HTML documents. Have you tested with different browsers? You could also try making the setInterval reload the GET request as the SRC of an IFRAME, instead of using Ajax.

Another potential problem is the 3 second delay in setInterval, maybe that causes conflicts if there's a delay somewhere else (on the the Nodemcu device, the Internet or even the browser). Perhaps https://en.wikipedia.org/wiki/Push_technology is more reliable, but I haven't tried.




User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
xtech007
post Oct 26 2020, 12:02 PM
Post #6





Group: Members
Posts: 4
Joined: 23-October 20
Member No.: 27,601



Well, I have tested different Browser and same results!
But, I re-tested with same amount of data string (120 index) on both page1 & 2 it works !!!!

It does add unnecessary data to the original 80.
But it keeps the data aligned.
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: 18th March 2024 - 10:24 PM