How to ping a server using JavaScript ?

Last Updated : 02 Aug, 2024

Pinging a server is used to determine whether it is online or not. The idea is to send an echo message to the server (called ping) and the server is expected to reply back with a similar message (called pong). Ping messages are sent and received by using ICMP (Internet Control Messaging Protocol). The lower the ping time, the stronger is the connection between the host and the server.

Approach: One obvious approach is to use the command prompt for sending ping messages to the server. Please refer to this post for details. In this article, we'll be using Ajax to send a request to the required server and then examining the status code received to find whether the server is running or not. The idea is that a server is definitely up and running if it returns a status code 200. Other status codes like 400 etc. point toward a possible server outage.

Below is the step by step implementation:

Step 1: Create a file named 'index.html' file to design the basic web page. The function "pingURL" is invoked when a user clicks on the button on the web page.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <script src="index.js"></script>
    <script type="text/javascript" src=
        "https://code.jquery.com/jquery-1.7.1.min.js">
    </script>
    <title>Ping a server using JavaScript</title>
</head>

<body>
    <label for="url">
        Enter the URL you want to ping:
    </label><br>

    <input type="text" id="url" 
        name="url" style="margin: 10px;"><br>
    
        <input type="submit" value="Submit" 
            onclick="pingURL()">
</body>

</html>

Step 2: Create the 'index.js' file to make a request to the server. The "pingURL" function defined the required configuration for the Ajax request in the 'settings' variable.

index.js

function pingURL() {

  // The custom URL entered by user
  var URL = $("#url").val();
  var settings = {

    // Defines the configurations
    // for the request
    cache: false,
    dataType: "jsonp",
    async: true,
    crossDomain: true,
    url: URL,
    method: "GET",
    headers: {
      accept: "application/json",
      "Access-Control-Allow-Origin": "*",
    },

    // Defines the response to be made
    // for certain status codes
    statusCode: {
      200: function (response) {
        console.log("Status 200: Page is up!");
      },
      400: function (response) {
        console.log("Status 400: Page is down.");
      },
      0: function (response) {
        console.log("Status 0: Page is down.");
      },
    },
  };

  // Sends the request and observes the response
  $.ajax(settings).done(function (response) {
    console.log(response);
  });
}