check if server and client are connected

[s_avinash_s]

Hi

In web server , how can i display whether server and client are connected or disconnected?

Actually every 5 seconds , i need to check if server and client are connected .If connected i should display connected else disconnected

 

How can i do it

Thanks and Regards

Avinash 

[Ingolme]

In what way? In HTTP, the connection between client and server ends as soon as the page finishes loading.

[s_avinash_s]

Hi

My requirement is to check from a web page if the server on the board is accessible or not.

If it is accessible, I need to display on my web page as "connected " else "disconnected."

How can i do this.

Is there a way to use 

xhttp.open("GET", "online_check.txt", true);

and setinterval to check every 1 second.

If i get a data from server, display as connected else as disconnected.

 

Is  it possible.

Please suggest

 

[dsonesuk]

If your server is inaccessible, all you will receive is the browsers default "unable to connect"  message, with the path it tried to connect, I:E 'localhost'.

[s_avinash_s]

Hi

Unable to connect comes when i disconnect the cable from board and refresh the page.

But what my requirement is, When i disconnect the cable and don't refresh the page also.It should dis[play as disconnect or cannot connect 

[dsonesuk]

If you don't refresh the page, it won't know if connection is lost! it would be like being on a web page and disconnecting a cable to your pc from router or router to external fibre or telephone/data cable, there won't be no indication that access has been broken until you refresh the page itself.

[Ingolme]

You can send an XMLHttpRequest periodically and check that the HTTP status is 0.

Building up on the line of code you provided earlier.

// ... More code
xhttp.open("GET", "online_check.txt", true);
xhhtp.onreadystatechange = function() {
  if(xhttp.readyState == 4) {
    if(xhttp.status == 0) {
      // Show disconnected message
    } else {
      // Show connected message
    }
  }
}
// ... More code

To save on server resources, you probably should not make requests more frequently than once every 5 seconds.

[dsonesuk]

Are we working to a scenario that

{1) The board has a server type functionality that reads post requests

(2) The card has a local server.

(3) The "web page" works from card local server.

(4) You want to determine if connection between card server and board server exists or not by any means.

[s_avinash_s]

Hi Dsonesuk and Ingolme.

1. My board has a server type which accepts GET and POST requests and Web page acts as client.

I did not get what do you mean by card server.

2.I tried like a below code.when i press the button nothing appears

    
        <p id="ping1">
        <button type="button" onclick="ping()">Change Content</button>
        </p>
    <script>
    function ping() {

      var xhttp = new XMLHttpRequest();
     xhhtp.onreadystatechange = function() {
  if(xhttp.readyState == 4) {
    if(xhttp.status == 0) {
      
      document.getElementById("ping1").innerHTML = "Disconnected";
    } else {
      
      document.getElementById("ping1").innerHTML = "Connected";
    }
  }
    xhttp.open("GET", "ping.txt", true);
    xhttp.send();
    }
    </script>

 

[dsonesuk]

Count the curly braces '{}' they are uneven, meaning one is missing.

Your mission if you accept it! Is to find which curly brace is missing and add it to the script in the correct position, as usual if you or any of your IM force are captured we will deny any knowledge of your existence.

[s_avinash_s]

Hi

I have checked the brackets and changed long back  but still nothing is happening.

        <p id="ping1">
        <button type="button" onclick="ping()">Change Content</button>
        </p>
    <script>
    function ping() 
    {
      var xhttp = new XMLHttpRequest();
      xhhtp.onreadystatechange = function() 
        {
            if(xhttp.readyState == 4) 
            {
                if(xhttp.status == 0) 
                {      
                    document.getElementById("ping1").innerHTML = "Disconnected";
                }
                else 
                {     
                    document.getElementById("ping1").innerHTML = "Connected";
                }
            }
        };
    xhttp.open("GET", "ping.txt", true);
    xhttp.send();
    }
        
    </script>

 

[dsonesuk]

Here's the problem

xhhtp.onreadystatechange = function(){...}

when it should be

var xhttp = new XMLHttpRequest();

[s_avinash_s]

Hi 

Now am successfully able to get it.

if(xhttp.status == 0) 
                {      
                    document.getElementById("ping1").innerHTML = "Disconnected";
                }
                else 
                {     
                    document.getElementById("ping1").innerHTML = "Connected";
                }

 

Disconnected and connected , i need to change color.

How can i do that

[dsonesuk]

document.getElementById("ping1").style.color = "red";

 

[s_avinash_s]

Hi 

I have got a sample code for LED  change.

https://www.w3schools.com/code/tryit.asp?filename=FW1SQNHXYORW

How to get led change in below conditions using div as shown above.

 if(xhttp.status == 0) 
                {      
                    document.getElementById("ping1").innerHTML = "Disconnected";
                    document.getElementById("ping1").style.color = "red";                  
                }
                else 
                {       
                    document.getElementById("ping1").innerHTML = "Connected";                  
                    document.getElementById("ping1").style.color = "green";                                       
                }

In above if status is 0 , i need to glow yellow LED else Green .How to do it.

Please help

[dsonesuk]

Give the led elements an unique id ref, then reference those using document.getElementById(), and swap display inline-block to none OR invisibility visible to hidden.

Edited October 8, 2018 by dsonesuk

[s_avinash_s]

Hi Dsonesuk,

Thanks for the reply.

But i didn't get exactly how to proceed.

Actually led data is in div with class, how to get it in id.

Can you share any example similar

[dsonesuk]

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_display

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_visibility

[s_avinash_s]

Hi 

i am not getting exactly why this visibility option is needed.

I tried some thing like https://www.w3schools.com/code/tryit.asp?filename=FW25NN8UM79R

But not working..only disconnected is coming as before

[dsonesuk]

This might give you a hint why it didn't work.

document.getElementById("if-the-element-using-this-id-does-not-exist-anywhere-how-do-you-expect-me-to-style-it")

 

[s_avinash_s]

Hi

I created <p> with id and now i can see it once at the starting, may be due p with id creation.

disconnected is always visible.

Now after disconnected is shown , i want led to be glown continously

<p  id="led-yellow"></p>
<p  id="ping1"></p>
    <script>     
    function ping() 
    {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() 
        {
            if(xhttp.readyState == 4) 
            {
                if(xhttp.status == 0) 
                {      
                    document.getElementById("ping1").innerHTML = "Disconnected"; 
                    document.getElementById("led-yellow").style.visibility = "hidden";
                }
                else 
                {        
                    document.getElementById("ping1").innerHTML = "Connected";  
                    document.getElementById("led-green").style.visibility = "hidden";
                }
            }
        };
    xhttp.open("GET", "ping.txt", true);
    xhttp.send();
    }
     setInterval("ping()", 1000);       
    </script>

 

[dsonesuk]

Then you need to apply invisibility: hidden; property to to the css styling for both LED's. You then need to under the if status 4 condition, make sure both are hidden again, to allow for connection changes, then if disconnected or connected make then visible NOT! hidden.

[s_avinash_s]

Hi

At first both leds shown, then only yellow led.

with disconnected case, only disconnected text is printed.no yellow led is shown after  that

https://www.w3schools.com/code/tryit.asp?filename=FW28CGRYIQBC

[dsonesuk]

'visibility' not 'invisibility'

[s_avinash_s]

Hi

Instead of LEDS, we require a single radio buttton which changes to green when connected and to red when disconnected.

How to do it