How to get a client IP address using JavaScript?

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

In this article, we are to going to see how to get a client IP address using JavaScript.

What is IP address

An IP (Internet Protocol) address can be defined as the address of network hardware. or we can say that an IP address is a combination of numbers that uniquely identifies one’s system. It’s like a house has an address to get mail, just like that your computer has an address to receive the data from the web.

Depending upon javascript alone will not help us, so we will use jQuery as well. JavaScript works with third-party applications to fetch the IP addresses. These third-party application services fetch the IP address and simply return it in three formats, plain text, JSON, and JSONP format.

We can find many application services like ipify and ipinfo. But we are going to use - ipify , one of the most popular tools for finding IP addresses.

So let's see the implementation part:

.html file

!DOCTYPE html>
<html>

<head>
    <title>Getting Clients IP</title>
    <style>
        p, h1 {
            color: #175dcf;
        }

        #content{
            margin-top: 10%;
        }

    </style>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </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 hashnode
            $("#hashnode").html(data.ip);
        })
    </script>
</head>

<body>
    <center id="content">

       <a href="https://codingnuts.hashnode.dev/"> 
<img  src="https://img.shields.io/badge/Hashnode-2962FF?style=for-the-badge&logo=hashnode&logoColor=white"/>
</a>
        <h1>Nishant's Blog</h1>
        <h3>Your Public IP Adress is Shown Below:</h3>

        <p id="hashnode"></p>

    </center>
</body>

</html>

OUTPUT

2021-05-13-15-27-36.gif

Note: Not Supported for some browsers.

So this is it for today!.

I hope you liked it!. Let's catch up in the next articles and Stay tuned.

If you liked it, Please Support Me

Interested in reading more such articles from Nishant Gour?

Support the author by donating an amount of your choice.

Recent sponsors
Aman Chourasia's photo

Can you give the source code of "LISTEN TO THIS ARTICLE" section pls

Nishant Gour's photo

Aman Chourasia that is the functionality provided by platform [hashnode]. which is an inbuilt feature. But if you want such functionality, I will share an article soon in both javascript and python.

And Thanks for commenting!

Aman Chourasia's photo

Nishant Gour Yes, I will be glad if you make a dedicated article on that :)

keerti shukla's photo

It was very easy to use and very useful!

Nishant Gour's photo

I am glad you liked it!