In this article, we will know how to get the client’s IP address in Javascript. An IP address is a combination of numbers that uniquely identifies one’s system. It’s like a house that has an address to get mail. Similarly, your computer has an address to receive the data from the web. The word protocol refers to some set guidelines which need to be followed while browsing for global connectivity. The networking part of the Internet is defined by exact specifications (guidelines) for connecting on the Internet.
To get the client’s public IP address, JavaScript acts as a third-party server-side language. JavaScript can’t do it alone, so, jQuery is added to do this. JavaScript works with third-party applications to fetch the IP addresses. These are the application services that fetch the user’s IP address and simply return it in three formats, ie., plain text, JSON, and JSONP format. There are loads of them available on the internet. Here, we will be using ipify and ipinfo, two of the most popular tools for finding IP addresses.
Example 1: In this example, we are going to use the ipify for SSL-contained websites (having https protocol) to get the client’s IP address.
HTML
<!DOCTYPE html><html><head> <title>Getting Clients IP</title> <style> p, h1 { color: green; } </style> <script src= </script> <script> /* Add "https://api.ipify.org?format=json" statement this will communicate with the ipify servers in order to retrieve the IP address $.getJSON will load JSON-encoded data from the server using a GET HTTP request */ $.getJSON("https://api.ipify.org?format=json", function(data) { // Setting text of element P with id gfg $("#gfg").html(data.ip); }) </script></head><body> <center> <h1>neveropen</h1> <h3>Public IP Address of user is:</h3> <p id="gfg"></p> </center></body></html> |
Output:
Getting the user’s Public IP address
Example 2: In this example, we are going to use the ipinfo to get the client’s IP address in an alert box.
HTML
<!DOCTYPE html><html><head> <title>Getting Clients IP</title> <style> h1 { color: green; } </style> <script src= </script> <script> // Add "https://ipinfo.io" statement // this will communicate with the ipify servers // in order to retrieve the IP address $.get("https://ipinfo.io", function(response) { alert(response.ip); }, "json") // "json" shows that data will be fetched in json format </script></head><body> <center> <h1>neveropen</h1> <h3>Getting Client IP address</h3> </center></body></html> |
Output:
Getting client’s IP address
Note: Sometimes, it will not work on Google Chrome and Internet Explorer for the default setting. It supports Firefox and Microsoft Edge.
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples
